CSS整理
css總結
實現垂直居中的方式
基於表格定位
將要居中內容的外層容器元素的display設置成table，內層內容庫使用table-cell，而後分別設置水平垂直居中css
/*表格方案*/
#table-father{
display:table;
}
#table-child{
display:table-cell;
text-align:center;
vertical-align:middle;
}
複製代碼
缺點是須要額外加標記html
基於絕對定位
若是要居中的元素寬高已知而且不會更改，能夠利用-margin，值是元素寬和高的一半android
#child{
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;
background:gold;
}
複製代碼
缺點是沒法自適應，若是元素寬高是自適應百分比定義的，就不能用這種方法，由於margin採用百分比是相對於包含塊的寬度而不是元素自身的寬度git
如何解決元素自身寬高自適應的改變？github
- translate()
#position-child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
複製代碼
translate基於自身寬度移動web
- margin:auto
.absolute-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width:50%;
height:50%;
}
複製代碼
margin充滿父元素瀏覽器
基於視口單位
要把元素相對於視口進行居中，那麼至關於父元素的高度就是視口的高度，視口的高度能夠用vh來獲取：bash
/*相對於視口單位進行居中的解決方案*/
#view-child{
margin:50vh auto 0;
transform:translateY(-50%);
}
複製代碼
基於 FlexBox
父元素設置爲flex，子元素能夠經過兩種方式居中app
/*基於伸縮盒的解決方案*/
#flex-father{
display:flex;
}
#flex-child{
margin:auto;
}
複製代碼
div#flex-father{
display:flex;
align-items:center;
justify-content: center;
}
複製代碼
缺點是須要考慮瀏覽器支持ide
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
複製代碼
Flex注意事項
- Flex佈局之後，子元素的float、clear和vertical-align屬性將失效
- flex內部的子元素（除了position:absolute或fixed）不管是display:block或者display:inline，都成爲了伸縮項目
- android瀏覽器4.4以前對於flex佈局支持很差
- flex-shrink屬性用於設置或檢索彈性盒的收縮比率，默認爲1。不容許爲負值，flex-shrink值爲0時表示不收縮，保持自身
- PC兼容性相對較差，IE要10，甚至11以上纔有很好的兼容
盒子模型淺析
盒子模型的組成
盒子模型包含四個重要的部分： content(width、height):盒子內容寬高 padding:內邊距(填充) border:邊框 margin:外邊距
重點：對於盒子來講，設置的寬高和真實佔有寬高是不同的
IE寬度是包括content，padding，border 標準寬度是隻有content
CSS浮動
爲何要清除浮動
一個塊級元素若是沒有設置height，那麼其高度就是由裏面的子元素撐開，若是子元素使用浮動，脫離了標準的文檔流，那麼父元素的高度會將其忽略，若是不清除浮動，父元素會出現高度不夠，那樣若是設置border或者background都得不到正確的解析
在咱們讓元素浮動的時候，它就會離開原來的文檔流，將它原先佔有的空間釋放。
打個比方，父元素就如一個有伸縮性的容器，而子元素就如一個氣球。
當沒有設置容器的高寬時，他的高寬徹底是被裝在裏面的氣球撐開的，當子元素浮動時候，就像氣球從容器裏飄了出來，飄在了他的上方。
而此時容器也就空了，因爲伸縮性，高度就變爲了o，看不見了。
複製代碼
清除浮動的方式
1.父元素添加高度
#div1{
background-color: blank;
height：200px；
}
複製代碼
缺點：但當你調整子元素高度的時候，若你要實現父元素包含子元素的效果，你就也要調整父元素高度。
2.父元素也添加浮動
#div1{
background-color: black;
width: 100%;
float: left;
}
複製代碼
缺點：雖然能夠解決問題，可是後面要添加有不須要浮動的子元素，則影響其顯示
3.給父元素添加overflow：hidden；
#div1{
background-color: black;
overflow: hidden;
}
複製代碼
缺點：一旦包含非浮動的子元素，則會影響其顯示。
4.給父元素添加一個無關的元素，讓添加的無關元素去清除浮動 clean：both;
#div5{
clear:both;
}
</style>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
</body>
複製代碼
缺點：添加了一個無關元素，代碼閱讀受影響。
5.經過僞類來實現，在須要清除浮動的父元素裏，添加一個清除浮動的僞類。
#div1:after{
content: "";
display: block;
clear: both;
}
複製代碼
實現兩列布局的方法
首先建立基本的HTML佈局和基本樣式
<div class="wrapper" id="wrapper">
<div class="left">
左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
</div>
<div class="right">
這裏的內容可能比左側高，也可能比左側低。寬度須要自適應。</br>
基本的樣式是，兩個div相距20px, 左側div寬 120px
</div>
</div>
複製代碼
.wrapper {
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
border: 5px solid #ddd;
}
.right {
margin-left: 20px;
border: 5px solid #ddd;
}
複製代碼
雙inline-block方案
.wrapper-inline-block {
box-sizing: content-box;
font-size: 0; // 消除空格的影響
}
.wrapper-inline-block .left,
.wrapper-inline-block .right {
display: inline-block;
vertical-align: top; // 頂端對齊
font-size: 14px;
box-sizing: border-box;
}
.wrapper-inline-block .right {
width: calc(100% - 140px);
}
複製代碼
注：
- 須要知道左側盒子的寬度，兩個盒子的距離，還要設置各個元素的box-sizing
- 須要消除空格字符的影響
- 須要設置vertical-align: top知足頂端對齊。
雙float方案
.wrapper-double-float {
overflow: auto; // 清除浮動
box-sizing: content-box;
}
.wrapper-double-float .left,
.wrapper-double-float .right {
float: left;
box-sizing: border-box;
}
.wrapper-double-float .right {
width: calc(100% - 140px);
}
複製代碼
本方案和雙float方案原理相同，都是經過動態計算寬度來實現自適應。可是，因爲浮動的block元素在有空間的狀況下會依次緊貼，排列在一行，因此無需設置display: inline-block;，天然也就少了頂端對齊，空格字符佔空間等問題。
注：
- 須要知道左側盒子的寬度，兩個盒子的距離，還要設置各個元素的box-sizing。
- 父元素須要清除浮動。
float+margin-left方案
下面兩種方案則是利用了block級別的元素盒子的寬度具備填滿父容器，並隨着父容器的寬度自適應的流動特性。 可是block級別的元素都是獨佔一行的，因此要想辦法讓兩個block排列到一塊兒。 咱們知道，block級別的元素會認爲浮動的元素不存在，可是inline級別的元素能識別到浮動的元素。這樣，block級別的元素就能夠和浮動的元素同處一行了。
.wrapper-float {
overflow: hidden; // 清除浮動
}
.wrapper-float .left {
float: left;
}
.wrapper-float .right {
margin-left: 150px;
}
複製代碼
缺點：
- 須要清除浮動
- 須要計算右側盒子的margin-left
absolute+margin-left方案
另一種讓兩個block排列到一塊兒的方法是對左側盒子使用position: absolute的絕對定位。這樣，右側盒子也能無視掉它
.wrapper-absolute .left {
position: absolute;
}
.wrapper-absolute .right {
margin-left: 150px;
}
複製代碼
缺點：
- 使用了絕對定位，如果用在某個div中，須要更改父容器的position。
- 沒有清除浮動的方法，若左側盒子高於右側盒子，就會超出父容器的高度。所以只能經過設置父容器的min-height來放置這種狀況。
float+BFC方案
這個方案一樣是利用了左側浮動，可是右側盒子經過overflow: auto;造成了BFC，所以右側盒子不會與浮動的元素重疊
.wrapper-float-bfc {
overflow: auto;
}
.wrapper-float-bfc .left {
float: left;
margin-right: 20px;
}
.wrapper-float-bfc .right {
margin-left: 0;
overflow: auto;
}
複製代碼
這種狀況下，只須要爲左側的浮動盒子設置margin-right，就能夠實現兩個盒子的距離了。而右側盒子是block級別的，因此寬度能實現自適應。
flex方案
.wrapper-flex {
display: flex;
align-items: flex-start;
}
.wrapper-flex .left {
flex: 0 0 auto;
}
.wrapper-flex .right {
flex: 1 1 auto;
}
複製代碼
flex能夠說是最好的方案了，代碼少，使用簡單。有朝一日，你們都改用現代瀏覽器，就可使用了。 須要注意的是，flex容器的一個默認屬性值:align-items: stretch;。這個屬性致使了列等高的效果。 爲了讓兩個盒子高度自動，須要設置: align-items: flex-start;
grid方案
.wrapper-grid {
display: grid;
grid-template-columns: 120px 1fr;
align-items: start;
}
.wrapper-grid .left,
.wrapper-grid .right {
box-sizing: border-box;
}
.wrapper-grid .left {
grid-column: 1;
}
.wrapper-grid .right {
grid-column: 2;
}
複製代碼
極限狀況
最後能夠再看一下在父容器極限小的狀況下，不一樣方案的表現。主要分紅四種狀況：
- 動態計算寬度的狀況
兩種方案: 雙inline-block方案和雙float方案。寬度極限小時，右側的div寬度會很是小，因爲遵循流動佈局，因此右側div會移動到下一行。
- 動態計算右側margin-left的狀況
兩種方案: float+margin-left方案和absolute+margin-left方案。寬度極限小時，因爲右側的div忽略了文檔流中左側div的存在，因此其依舊會存在於這一行，並被隱藏。
- float+BFC方案的狀況
這種狀況下，因爲BFC與float的特殊關係，右側div在寬度減少到最小後，也會掉落到下一行。
- flex和grid的狀況
這種狀況下，默認兩種佈局方式都不會放不下的div移動到下一行。不過 flex佈局能夠經過 flex-flow: wrap;來設置多餘的div移動到下一行。 grid佈局暫不支持。
單行居中兩行居左
咱們讓內層 p 居左 text-align:left，外層 h2 居中 text-align:center，而且將 p 設置爲display:inline-block ，利用 inline-block 元素能夠被父級 text-align:center 居中的特性，這樣就能夠實現單行居中，多行居左，CSS 以下：
p {
display: inline-block;
text-align: left;
}
h2{
text-align: center;
}
複製代碼
超出兩行展現
display: -webkit-box; // 設置display，將對象做爲彈性伸縮盒子模型顯示
-webkit-line-clamp: 2; // 限制在一個塊元素顯示的文本的行數
-webkit-box-orient: vertical; // 規定框的子元素應該被水平或垂直排列
複製代碼
可是這樣寫後第一行也變回了居左，而沒有居中，緣由在於咱們第一個設置的 display: inline-block ，被接下來設置的display: -webkit-box 給覆蓋掉了，因此再也不是 inline-block 特性的內部 p 元素佔據了一整行，也就天然而然的再也不居中，而變成了正常的居左展現
因此：
<h2><p><em>單行居中，多行居左<em></p></h2>
設置 em 爲 display: -webkit-box
設置 p 爲 inline-block
設置 h2 爲 text-align: center
複製代碼
最終成果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
display:inline-block;
text-align:left;
}
em{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}
div{
border: 1px solid red;
font-size: 30px;
text-align:center;
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<p><em>單行居中，多行居左</em></p>
</div>
</body>
</html>
複製代碼
如何製做一個三角形，梯形
border-bottom: 50px solid red;
width: 100px;
border-left: 50px solid yellow;
border-right: 50px solid green;
border-top: 50px solid black;
height: 0;
width: 0;
transparent //這個是透明
複製代碼
經過border 寬度和透明transparent 來實現三角形和梯形
漸變(Gradients)
線性漸變(Linear Gradient)
向下/向上/向左/向右/對角方向
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 標準的語法 */
}
透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法 */
重複的線性漸變
background: repeating-linear-gradient(red, yellow 10%, green 20%);
複製代碼
徑向漸變（Radial Gradients)
由它們的中心定義
#grad1 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 標準的語法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 標準的語法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
複製代碼
移動端適配
移動端適配我的接觸的就那麼幾個
HTML的head部分
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
複製代碼
其中：
width：viewport 的寬度，能夠指定爲一個像素值，如：640，或者爲特殊的值，如：device-width （設備的寬度）。
initial-scale：初始縮放比例，即當瀏覽器第一次加載頁面時的縮放比例。值爲 1.0 即原始尺寸。
maximum-scale：容許瀏覽者縮放到的最大比例，通常設爲1.0，即原始尺寸。
minimum-scale：容許瀏覽者縮放到的最小比例，通常設爲1.0，即原始尺寸。
user-scalable：瀏覽者是否能夠手動縮放，yes 或 no 。
px轉爲rem
頁面 css 所有寫完以後，將全部的 px 轉換爲以 rem 爲單位的數字。例如 我設置 body 的 width ：320px； 則根據 我在第三步設置的 font - size 值，轉換爲 rem ，則是
width ：16 rem； 【320 / 20 (你設置的標準 font - size) = 16】
rem原理
什麼是em
em做爲font-size的單位時，其表明父元素的字體大小，em做爲其餘屬性單位時，表明自身字體大小——MDN
- em可讓咱們的頁面更靈活，更健壯，比起處處寫死的px值，em彷佛更有張力，改動父元素的字體大小，子元素會等比例變化，這一變化彷佛預示了無限可能,有些人提出用em來作彈性佈局頁面
- em作彈性佈局的缺點還在於牽一髮而動全身，一旦某個節點的字體大小發生變化
什麼是rem
rem做用於非根元素時，相對於根元素字體大小；rem做用於根元素字體大小時，相對於其出初始字體大小——MDN
/* 做用於根元素，相對於原始大小（16px），因此html的font-size爲32px*/
html{font-size:2rem}
/* 做用於非根元素，相對於根元素字體大小，因此爲64px */
p{font-size:2rem}
複製代碼
em就是爲字體和行高而生的，有些時候子元素字體就應該相對於父元素，元素行高就應該相對於字體大小；而rem的有點在於統一的參考系
Rem佈局與案例
rem佈局的本質基於寬度的等比縮放
比rem更好的方案
vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100 —— MDN
僅用於我的整理，參考：
- 1. css-flex整理
- 2. CSS 整理
- 3. CSS hack整理
- 4. css整理
- 5. html+css整理
- 6. css hack 整理
- 7. CSS整理
- 8. CSS 佈局整理
- 9. css hack整理 (摘)
- 10. CSS佈局整理
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • Docker 清理命令
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
- 1. css-flex整理
- 2. CSS 整理
- 3. CSS hack整理
- 4. css整理
- 5. html+css整理
- 6. css hack 整理
- 7. CSS整理
- 8. CSS 佈局整理
- 9. css hack整理 (摘)
- 10. CSS佈局整理