1.什么是標準流
- 在沒有給標簽通過CSS布局的時候，標簽在瀏覽器中有一套默認的布局規(guī)則，這個規(guī)則就是標準流布局
2.標準流布局規(guī)則
1）塊級標簽
- 一個占一行（不管標簽本身的寬度），設置寬高有效，默認寬度是父標簽的寬度，默認高度是內(nèi)容的高度
- 例如：p，h1-h6，hr，div，...
2）行內(nèi)標簽
- 一行可以有多個，默認大小就是內(nèi)容的大小，設置寬高無效
- 例如：a，font，label，span，...
3）行內(nèi)塊標簽
- 一行可以顯示多個，默認大小就是內(nèi)容的大小，設置寬高有效
- 例如：input，button，img，...
3.display屬性
- 可以改變標簽布局規(guī)則
- block：塊級標簽
- inline：行內(nèi)標簽
- inline-block：行內(nèi)塊標簽
- none：隱藏
4. 脫流 / 脫標
- 只要標簽脫流，標準流的規(guī)則全部失效，不管什么樣的標簽在脫離標準流的情況下都是按照以下規(guī)則進行布局：一行可以顯示多個，默認大小是內(nèi)容大小，設置寬高有效
-
浮動和定位都可以讓標簽脫流
5. 浮動：float屬性
6. 浮動內(nèi)容環(huán)繞現(xiàn)象
- 被環(huán)繞標簽浮動，環(huán)繞的內(nèi)容的容器標簽不浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--浮動內(nèi)容環(huán)繞現(xiàn)象:
被環(huán)繞標簽浮動，環(huán)繞的內(nèi)容的容器標簽不浮動
-->
<div id="" style=" width: 100px; height: 100px; float: left;">
<img style="width: 50px;height: 50px;" src="img/luffy.jpg"/>
</div>
<div id="" style="width: 400px;">
無論多么復雜的布局，其基本出發(fā)點均是：“如何在一行顯示多個div元素”。
顯然標準流已經(jīng)無法滿足需求，這就要用到浮動。
浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。
1.什么是浮動元素的脫離文檔流?
首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的標準流（網(wǎng)頁的正常排版順序）。
脫離文檔流: 就是脫離正常的網(wǎng)頁排版順序。成為浮動流（浮動后的元素就是浮動流）。
簡單來說當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣, 這個就是脫離文檔流。
</div>
</body>
</html>
7. 清除浮動
- 清除浮動就是清除因為浮動而產(chǎn)生的高度塌陷問題
1）高度塌陷
- 當父標簽不浮動，并且不設置固定高度，而子標簽浮動，就會產(chǎn)生高度塌陷的問題
2）清除浮動的方法
- 空盒子法：在高度會塌陷的標簽的最后添加一個空的div,并且設置這個空的div的樣式的clear屬性為both
- 設置高度會塌陷的標簽的樣式的overflow屬性為hidden
- 萬能清除法：給高度會塌陷的標簽的after狀態(tài)添加樣式{display:block;clear:both;content:"";visibility:hidden;height:0;}，再給高度會塌陷的標簽添加樣式屬性zoom的值為1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方法1*/
.clear1{
clear: both;
}
/*方法2*/
.clear2{
overflow: hidden;
}
/*方法3*/
.clear3:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clear3{
zoom: 1;
}
</style>
</head>
8. 定位：
1）position屬性
- 選中定位的標簽的參考對象
-
initial / static：不定位，默認值；但是body的不是它們
-
absolute：絕對定位, 相對第一個position屬性不是initial/static的父標簽進行定位
-
relative：相對定位，相對標準流定位（相對于原標簽在標準流中的位置進行定位）
-
fixed：相對瀏覽器定位
-
sticky：定位保持網(wǎng)頁中最后一個塊在最后面（網(wǎng)頁滾動的時候在瀏覽的最下面，網(wǎng)頁不超過一屏在內(nèi)容的最下面）
2）left \ right \ top \ bottom
- 設置當前標簽的左右上下到參考對象的左右上下的距離
- 注意：在不給position屬性的時候直接設置left \ right \ top \ bottom屬性無效
9. 盒子模型：
- html中每個可見的標簽都是一個盒子模型，由content、padding、border、margin組成
1）content
-
內(nèi)容，設置寬和高其實是設置盒子內(nèi)容的大?。惶砑幼訕撕炇翘砑釉趦?nèi)容上；設置背景顏色和背景圖都會作用于內(nèi)容部分
2）padding
-
內(nèi)邊距（默認沒有），內(nèi)容外面的可見部分（默認沒有），有四個方向：padding-left、padding-right、padding-top、padding-bottom；設置padding會讓標簽變大；設置背景顏色和背景圖都會作用于padding部分
3）border
-
邊框，有四個方向（border-bottom/left/right/top），可以單獨控制每個方向的大小、顏色、樣式
-
border: 邊框?qū)挾?邊框樣式 邊框顏色（例：border:5px solid #ff0000）
-
邊框樣式：solid（實線）/ dashed（虛線）/ dotted（點劃線）/ double（雙線）
4）margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/*2.padding*/
/*1)一起設置4個方向的padding值都為50px*/
/*padding: 50px;*/
/*2)單獨設置各個方向的padding*/
padding-left: 20px;
padding-top: 20px;
/*3.border
* 1）一起設置
* 格式 - border: 邊框?qū)挾?邊框樣式 邊框顏色
* 邊框樣式 - solid(實線)\dashed(虛線)\dotted
*/
border: 2px solid darkblue;
/*2)單獨設
*/
/*border-left-width: 10px;*/
border-left: 5px dashed red;
/*4.margin*/
/*1）一起設置*/
/*margin: 20px;*/
margin-left: 20px;
}
</style>
</head>
<body>
<div id="div1" style="width: 100px; height: 100px; background-color: hotpink;">
<p>我是段落</p>
</div>
<input type="" name="" id="" value="" style="padding-left: 10px;"/>
</body>
</html>
10.補充
1）設置背景圖片
- background：圖片地址 是否平鋪 水平方向的位置 垂直方向的位置 背景顏色
2）去掉 / 增加下劃線
- text-decoration: none
- text-decoration: underline
3）水平居中方法
- text-align:center
- margin-left: auto; margin-right: auto
4）垂直居中方法
- line-height:行高（當單行文本的行高等于容器高時，可實現(xiàn)文本在容器中垂直居中）
5）其他
- cursor: pointer - 鼠標懸停時候的樣式為手指
- vertical-align: bottom - 相對于容器底部對齊 （垂直方向布局方式）
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
