當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS整理

發布時間：2024/4/14 CSS 58 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS整理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css總結

實現垂直居中的方式

基于表格定位

將要居中內容的外層容器元素的display設置成table，內層內容庫使用table-cell，然后分別設置水平垂直居中

/*表格方案*/#table-father{display:table;}#table-child{display:table-cell;text-align:center;vertical-align:middle;} 復制代碼

缺點是需要額外加標記

基于絕對定位

如果要居中的元素寬高已知并且不會更改，可以利用-margin，值是元素寬和高的一半

#child{position: absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;width:100px;height:100px;background:gold;} 復制代碼

缺點是無法自適應，如果元素寬高是自適應百分比定義的，就不能用這種方法，因為margin采用百分比是相對于包含塊的寬度而不是元素自身的寬度

如何解決元素自身寬高自適應的改變？

translate()

#position-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); 復制代碼

translate基于自身寬度移動

margin:auto

.absolute-center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:50%;height:50%;} 復制代碼

margin充滿父元素

基于視口單位

要把元素相對于視口進行居中，那么相當于父元素的高度就是視口的高度，視口的高度可以用vh來獲取：

/*相對于視口單位進行居中的解決方案*/#view-child{margin:50vh auto 0;transform:translateY(-50%);} 復制代碼

基于 FlexBox

父元素設置為flex，子元素可以通過兩種方式居中

/*基于伸縮盒的解決方案*/#flex-father{display:flex;}#flex-child{margin:auto;} 復制代碼 div#flex-father{display:flex;align-items:center;justify-content: center;} 復制代碼

缺點是需要考慮瀏覽器支持

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部分

其中：

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

僅用于個人整理，參考：

實現水平垂直居中的4種解決方案

Flex 布局教程：語法篇

七種實現左側固定，右側自適應兩欄布局的方法

當子元素全部浮動時，怎么解決父元素塌陷的問題？

盒子模型淺析

談談一些有趣的CSS題目-- 單行居中，兩行居左，超過兩行省略

www.jianshu.com/p/09bd0ca51…

轉載于:https://juejin.im/post/5caa06a56fb9a05e677e8c8b

總結

以上是生活随笔為你收集整理的CSS整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： datax源码阅读一：python文件
下一篇： CSS 布局与“仓库管理”的关系