前端入門應該掌握的html+css知識點

時間 2019-11-17

標籤前端入門應該掌握 html+css html css 知識欄目 CSS 简体版

原文原文鏈接

* 文檔流css

元素從上自下從左到右排列，即文檔流html

（因此一個普通的元素前面有一個向右浮動的元素，這個元素不會和這個浮動元素髮生重疊，可是若是這個普通元素前面是一個向左浮動的元素，能夠看到css3

元素會和浮動元素重疊）bootstrap

* 佈局種類app

佈局分爲：塊級佈局（float、多列）、行級佈局、定位佈局、表格佈局、彈性佈局、網格佈局ide

（多列：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts）wordpress

* inline、inline-block、block元素的區別佈局

塊級元素（block）老是獨佔一行，從上自下排列，能夠包含塊級元素也能夠包含行級元素字體

內聯元素（ inline）老是在一行排列，直到一行排滿再換行排列，能夠包含行級元素不能包含塊級元素ui

內聯塊級元素像內聯元素同樣排列，一行排滿再換行排列，像塊級元素同樣，能夠包含塊級元素也能夠包含行級元素

* 常見佈局

一、三列布局：

a) 對於三列寬度都是固定的狀況，能夠利用position:absoult/float/display:inline-block來實現佈局

b) 對於左右寬度固定，中間寬度自適應，父容器由最高的子元素撐開的狀況用絕對定位和inline-block都不可行：

inline-block實現左中右三列布局，三個模塊必須設置固定寬度，中間寬度沒法作到自適應；

absolute，父元素高度最多隻能作到由中間元素撐開，且左右兩邊的元素脫離了文檔流。

劃重點- 雙飛翼或聖盃佈局實現三列布局：

聖盃佈局和雙飛翼佈局都是採用float佈局，中間模塊優先渲染，寬度設置爲100%，自適應寬度；左右模塊固定寬度，而後利用負外邊距讓左右兩個模塊布

局到合適的位置的模式建立三列布局。

劃重點- 聖盃佈局與雙飛翼的不一樣之處：

聖盃佈局與雙飛翼佈局的不一樣之處在於中間元素的內容被左右兩個模塊擋住時的處理方式不一樣，聖盃佈局採用的是父容器設置合適的左右padding值，而後

左右兩個模塊設置爲相對定位，分別利用left、right來調整元素的位置。而雙飛翼佈局是在中間的元素的內容外面在加一層div，而後爲這個div加左右margin

值，來讓左右元素不遮擋中間的元素內容。

劃重點- 負外邊距：

負外邊距能夠影響普通文檔流中的元素，也能夠影響浮動元素和絕對定位的元素：

負外邊距對普通文檔流中的元素的影響：它不一樣於relative定位，負外邊距偏移元素以後，元素位置改變以前元素在文檔中佔據的空間不會保留，因此會影響其餘元

素的佈局；relative定位，在偏移元素以後，會保留元素以前佔據的位置，因此不會影響其餘元素的佈局。

負外邊距對浮動元素的影響與對處在普通文檔流中的元素的影響同樣。

負外邊距對絕對定位的元素的影響，利用負外邊距和絕對定位讓元素水平垂直居中顯示。

能夠利用負外邊距改變元素的寬度：

父容器設置固定寬高，子容器設置固定高度，不設置寬度，而後子元素利用負外邊距能夠增長容器大小，利用這一特色能夠實現如下佈局：

但願靠最右邊的元素沒有白色的空白

                  <div style="width: 430px; border: 10px solid #f00; margin-top: 20px;">	
                  <ul style="height: 210px; list-style: none; overflow: hidden; margin-right: -10px;">
				<style scoped>
					li {
						float: left;
						width: 100px;
						height: 100px;
						margin-right: 10px;
						background: #000;
						margin-bottom: 10px;
			                  }
				</style>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>				
			</ul>
		      </div>

但願靠最右邊的元素沒有白色的空白，還能夠將父容器寬度設置爲430px，子容器寬度設置爲440px，默認子容器多餘的10px會被裁剪掉，可是子元素

裏面的元素仍然能夠並排顯示。

http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#undefined

以外的總結：

* float浮動不越過父容器的padding值（在聖盃佈局中，父容器設置了左右padding值，中間元素自適應容器寬度，沒有多餘的空間，左邊的元素經過

margin-left偏移上去以後，右邊的元素不會由於浮動自動顯示在中間元素的右側，由於沒有多餘的空間，因此右邊的元素也須要經過margin-left設置

來偏移到中間元素的右邊）

* margin-left、margin-right等margin值不管取正值仍是負值，都不會把容器的padding值計算在內（一個元素在一個有padding值的父容器中，該元素利

用margin偏移的時候不會將父容器的padding值計算在內，當一行顯示不下全部元素時，剩餘元素會在下一行顯示，可是這些元素仍然是在父容器中，

偏移原理同樣，偏移時不將父容器的padding值計算在內）

未設置margin-left:-100%

設置了margin-left：-100%

* position中的top、left等屬性取正值時，若是父容器有padding，則以padding爲基準。元素position默認爲static，靜態元素沒有top、left等屬性。

* position: relative能夠和float一塊兒使用

聖盃佈局： https://alistapart.com/article/holygrail

二、左右佈局：

三、居中對齊：

行級元素垂直居中對齊：

塊級元素垂直居中對齊：

行級元素水平居中對齊：

塊級元素水平居中對齊：

應用場景：

文本相對旁邊的行內塊級元素居中顯示（在容器中居中對齊）

四、自適應屏幕高度：

（關於佈局全部：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout）

讓子元素的高度等於父元素的高度，子元素設置爲100%，必須給html和body都設置height爲100%

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        這樣這個div的高度就會100%了
      </p>
    </div>
  </body>
</html>

多列等高

* float的理解以及清除浮動的使用

float的理解：

浮動元素會脫離文檔流，設置了浮動的元素會顯示爲塊級佈局（例如給一個行級元素設置浮動就能夠爲行級元素設置寬高），浮動元素會沿着容器的左側或右側排列，

文本或內聯元素（inline或inline-block元素）會環繞浮動元素佈局。

浮動元素的做用：一般利用浮動佈局來水平排列元素或讓文字環繞圖片顯示。

一個浮動元素，若是前面的元素也是一個浮動元素，且這個兩個元素是在同一方向浮動，後面的元素會緊跟隨前面的元素排列；若是這兩個浮動元素是在兩個相反

的方向浮動，那麼它們分別在左右兩邊排列。

若是浮動元素的前面是一個處在文檔流中的普通塊級元素，那麼這個浮動元素會在新的一行排列。

若是浮動元素後面是一個處在文檔流中的普通塊級元素，那麼浮動元素會和後面的普通元素重疊。（這個普通元素會移動到浮動元素的左側位置開始排列）

（關於浮動更多內容：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats）

清除浮動：

一、直接經過clear來清除，clear能夠取的值有none、left、right、both、inherit。（對塊級元素有效，行級元素都是圍繞浮動元素顯示，因此clear對行級元

素沒有意義）

（clear的做用是指定一個元素是否能夠在以前的浮動元素旁邊或者說必須向下移動在它下面。例如：設置了clear：left 的元素旁邊不能有左浮動的元素，設置了

clear：right的元素旁邊不能有右浮動的元素。

clear能夠做用於浮動元素或非浮動元素，做用於非浮動元素，會將非浮動元素的邊框邊界移動到全部相關浮動元素的外邊界下方；看成用於浮動元素時，

會將元素的外邊界移動到全部相關的浮動元素的外邊界的下方。)

驗證：

 <style> * { margin: 0; padding: 0; } body { background: #989EA4; font-size: 62.5%; } /*.clearfix:after { display: block; content: ''; clear: both; }*/ .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%;} .red { float: right; margin: 0; background-color: red; width:20%; } p { width: 45%; } </style> <div class="wrapper"> <p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. 
 Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. 
 
 </p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. 
 Duis mattis varius dui. Suspendisse eget dolor.
 </p> <p class="both clearfix">This paragraph clears both.</p> </div>

二、給元素設置overflow:hidden或auto

三、經過僞元素：after設置clear替代

       .clearfix:before, .clearfix:after {
                content: " ";
                display: table;
       }
            
        .clearfix:after {
                clear: both;
                overflow: hidden; 
       }
            
       .clearfix {
                zoom: 1;
       }

https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

爲何要清除浮動：一、讓浮動元素也能撐開容器高度；二、讓浮動元素不影響其餘元素的佈局

三種清除浮動方式的使用場景：一、clear做用於非浮動元素，讓前面的浮動元素不影響後面元素的佈局，可能但願後面的元素可以在新的一行顯示。

二、overflow：hidden或auto，容器中有浮動元素，但願容器的高度能由裏面的元素撐開時。

三、利用僞元素after設置clear的方式，和利用overflow清除浮動同樣，可讓浮動元素撐開容器高度。

（與overflow不一樣的是它的原理不是將浮動元素高度計算在內，而是加了一個空元素將整個容器撐開，clear做用於

一個非浮動元素時，這個非浮動元素的邊框邊界會移動到相關浮動元素的外邊界下方顯示，就是這個原理）

其餘：

* BFC IFC

BFC：

BFC即塊級格式化上下文，設置爲BFC元素，它的佈局是獨立的，元素不受外面元素佈局的影響，元素的佈局也不影響外面的元素。

生成BFC元素的方式： float不爲none

overflow不爲visible

display設爲table-cell、table-caption、inline-block等

position不爲static或relative

設置元素爲BFC的做用：不讓元素與浮動元素重疊。處在BFC中的元素，每個元素的左邊界老是要與包含塊的左邊界相接觸，而建立了BFC的

元素不能與浮動元素相重疊。

清除內部浮動。處在文檔流中的普通元素，不會將浮動的子元素的高度計算在內，而BFC元素會將其浮動的子元素的高度

計算在內。（可讓浮動的元素，仍就能夠撐開容器）

不讓相鄰兩個元素的垂直外邊距發生重疊。處在同一BFC的兩個相鄰的元素的垂直外邊距會發生重疊的現象。

BFC元素不會和其餘元素的垂直外邊距發生重疊。 (垂直方向具備margin值的上下相鄰的兩張圖片，外邊距不會發生重疊，

圖片默認爲inline-block佈局)

* 外邊距重疊

外邊距的三種狀況：

相鄰兩個元素的垂直外邊距發生重疊。

處於同一文檔流的兩個相鄰元素的垂直外部距會發生重疊現象：

當兩個相鄰元素的垂直外邊距相等時，會合併爲一個外邊距；

當一個外邊距的值大一個外邊距的值小時，外邊距爲值大的哪個；

當兩個外邊距都爲負數時，外邊距取絕對值大的那一個；

當一個爲正一個爲負時，外邊距爲兩個值求和以後計算的值。

父元素與子元素的垂直外邊距發生重疊。父元素與子元素處在同一文檔流中。

自身沒有內容填充時上下垂直邊距發生重疊。

* 關於盒模型

* 能夠繼承和不能夠繼承的元素屬性

能夠繼承：font有關的，color、backgrond等

不能夠繼承：width、height、padding、margin、opacity等

* css中的各類單位

px：絕對大小單位，相對於屏幕分辨率而言

em：相對大小單位，相對於父元素的字體大小計算（默認1em = 16px）

rem：相對大小單位，相對於根元素的字體大小計算

https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

* overflow的使用

* 響應式佈局

http://getbootstrap.com/css/

* background的使用

a) 能夠設置背景圖片的起始位置、大小、是否重複、指定初始位置的相對區域、指定背景外延的位置、背景顯示的方式、背景色

background：url(), 0% 0%, repeate, fixed...

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

b) 下面兩個屬性能夠取的值有：border-box、padding-box、content-box（inherit），分別是至關於元素邊框、元素內邊距、元素內容。

background-origin: padding-box （背景圖爲fixed顯示時，此屬性不起做用）
background-clip: border-box

background-attachment能夠取值：fixed、scroll（默認）、local

c) fixed相對於視口，不隨着內容滾動而滾動

scroll相對於元素自己，不隨着內容滾動而滾動

local相對於元素內容，若是元素有滾動機制將隨着內容的滾動而滾動

一、給元素添加背景圖片

給元素添加背景圖片能夠同時添加多張，並分別指定背景圖的初始位置：

.examplethree {
background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png");
background-position: 0px 0px, center;
}

* line-height的使用

一、行高字面意思即一行文字的高度，具體的就是兩行文字間基線之間的距離。

二、能夠設置的屬性值有：normal、inherit、長度值（px/em）、百分比、數值

三、對於沒有設置高度的塊級元素而言，line-height決定其元素的高度（包含內容的元素，下面同理）

四、對於非替換行級元素（span、a等標籤元素），font-size決定其元素的高度，最終元素的佈局取決於父元素與子元素中行高值最大的那一個

五、對於可替換行級元素，line-height能夠影響部分可替換行級元素的佈局（影響高度），例如button、input等，對於img的佈局沒有明顯影響。

通常設置行高的值採用設置數值的方式：

行高設置成百分比，行高的值等於這個百分比乘以當前元素的字體大小，後代會繼承這個最終算出來的行高值，不能自適應

行高設置成em，行高的值等於這個設置的值乘以當前元素的父元素的字體大小（若是當前元素有字體大小則乘以當前元素的字體大小），不能自適應

行高設置成數值，行高的值等於這個數值乘以當前元素中的文本的字體大小，後代繼承的是父元素的這個行高的數值值，能夠自適應（子元素不一樣字體大小有不一樣的行高）

注：一個沒有設置高度的塊級元素，高度取決於line-height，若是這個行高的值是以數值的形式設置的，則最終行高的值等於這個數值乘以元素中的文本的字體大小，這個文本的字體大小多是由另一層包裹的元素來決定的

* vertical-align的使用

一、vertical-align用來調整行級元素的基線，只對行級元素有效

二、能夠取的值有：百分比、數值、normal、inherit、text-top、text-bottom、top、bottom

三、 text-bottom（text-top）與bottom（top）的區別：

一個是元素的底端與父元素字體的底端對齊，另外一個是元素及其後代的底端與整行的底端對齊。

.box1{background:black; color:white; padding-left:20px; display: inline-block; line-height: 4;} 
.dot1{display:inline-block; width:4px; height:4px; background:white; vertical-align: text-bottom;}

.box2{background:black; color:white; padding-left:20px; display: inline-block; margin-left: 20px; line-height: 4;} 
.dot2{display:inline-block; width:4px; height:4px; background:white; vertical-align: bottom; }

           <span class="box1"> 
			<span class="dot1">				
			</span> 
			我是一段文字。
	    </span>
	    
	    <span class="box2"> 
			<span class="dot2">				
			</span> 
			我是一段文字。
	    </span>

　a)元素沒有設置行高時表現一致：

b)設置行高以後，能夠看到二者的差異：

行高增大了父元素的高度（應該說是增大了文字整行的高度因此整個高度增大了），text-bottom相對父元素字體的底部對齊，不動；bottom相對的是整行的底部對齊，父元素增高底部變化，bottom的位置隨之變化。

c) 若是不要行高，直接使用height給box設置高度，表現以下：

說明設置行高時，增大的是整個一行文字的高度，vertical-align設置爲bottom時，相對整行的底部定位，在最底部；而直接給box設置height高度時，增大的是父元素的高度，父元素中文字這一行的高度並無變，因此，vertical-align設置爲bottom時，不會有變化。

* ::before ::after的使用

css3以前用:來表示僞元素，css3修訂後用::來表示僞元素

做用：在元素後面或前面添加內容

一、元素內容前面添加文本：

二、元素內容前面添加圖片：

content用於在:before 、:after中爲元素添加內容，它除了能夠在元素中添加文本、圖片，還能夠經過open-quote等屬性給特定的文本添加引號，

經過attr屬性還能夠獲取元素中某個屬性的值，而後將讀取的值添加在元素內容中：