1.塊級元素
1.1 常用的塊級元素
div p h1~h6 ul ol li hr table
1.2 塊級元素的特點
1.2.1 塊級元素預設顯示在父標籤的左上角。
1.2.2 塊級元素預設沾滿一行(沾滿整個文件流)
1.2.3 塊級元素可以變為行內元素
display:inline;/*變為行內元素*/1.2.4 塊級元素可以通過下面屬性,同時擁有行內元素和塊級元素的特點(width、height受到影響,不會單獨佔滿一行)
display:inline-block;/*同時具有塊級元素和行內元素的特點*/2.行內元素(內聯元素)
2.1 常用的行內元素有哪些
2.2 行內元素的特點
2.1 行內元素影響的範圍是文字區域大小,不受到width,height影響。
2.2 行內元素不會單獨佔滿一行(不會佔滿文件流)
2.3 行內元素可以變為塊級元素
display:block3.浮動(float)
3.1 float使得當前塊級元素脫離文件流,通過left、right屬性來控制此元素的漂浮方向
3.2 清除浮動(清除對當前元素的影響)
clear:both/*清除左右浮動*/4.內間距、外邊距(padding、margin)clear:left/*清除左浮動*/
clear:right/*清除右浮動*/
4.1 padding的屬性
padding:10px; /*上下左右都為10px*/4.2 margin的屬性與padding相同,都支援對於塊級元素,但是margin對於行內元素只支援左右的外邊距,不支援上下的外邊距。padding:10px 20px /*上下10px 左右為20px*/
padding:10px 20px 30px/*上10px 左右為20px 下30px*/
padding:10px 20px 30px 40px/*上右下左*/
/*單一使用時,可單獨操作4個方向*/
padding-left
padding-top
padding-right
padding-bottom
5.三種定位方式(relative、absolute、fixed)
5.1、絕對定位(absolute)
5.1.1 設定為絕對定位時候,會脫離文件流,不會單獨佔滿一行,不會受到浮動的影響。
5.1.2 當設定為絕對定位的時候,元素的方位就會受到窗體的top、left、bottom、right的影響
5.2、相對定位(relative)
5.2.1當設定為相對定位的時候,並沒有脫離文件流,此時浮動是會對他產生影響的。
5.2.2當設定為相對定位的時候,元素的方位是相對於元素的父標籤,由於標籤並沒有脫離文件流,所以它四周的標籤是佔著位置的。
5.3、固定定位(fixed)
在給定的位置不動。
css盒子模型,定位,浮動
1.盒子模型 margin 外邊距 清除邊框外的區域,外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域,內邊距是透明的。content 內容 盒子的內容,顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
CSS 盒子模型 定位流 浮動
目錄 css盒子模型 1 內容得寬度和高度 2 元素的寬度和高度 3 元素空間得寬度和高度 css定位流 了解 相對定位 了解 相對定位的應用 絕對定位 了解 固定定位 靜態定位 浮動與清除浮動 了解 一 標準流中的兩種排版方式 1 垂直排版 2 水平排版 浮動 浮動流排版方式 特點 什麼是浮動元素...
css背景樣式 列表樣式 盒子模型 浮動
1.對於背景的樣式來說,背景的樣式是重點,background repeat控制背景是否重複 background size控制大小,contain不會失幀但是可能會不完全覆蓋 cover會導致的缺失 百分之百可能會讓失幀 背景定位用background position 2.使用列表樣式注意刪除列...