CSS浮动知识整理（二）

客官°小女子只卖身不卖艺 2022-10-29 07:47 182阅读 0赞

1.  什么是DIV  
    DIV是层叠样式表中的定位技术，全称为DIVision，有时把div称为图层，更多时候称为“**块**”。
2.  DIV样式设置

*  div大小，背景设置
 *  div溢出效果演示、换行、滚动条显示
 *  div边框、轮廓设置
 *  盒子模型

1.  div大小、背景设置

div{
        
    	background-color:yellow;
    	width:100px;
    	height:100px;
    	position:absolute; 绝对定位(相对于上一级，即body),偏移top和left像素
    	top:200px;
    	left:200px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]  
由图可以看出，内容溢出了。

例：DIV溢出处理效果有：隐藏或增加滚动条

①overflow属性设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]  
加了overflow: scroll;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]

②css轮廓、边框

*  轮廓：outline 绘制元素周围的一条线，位于边框边缘的外围，可起到突起元素的作用。
 *  outline：dashed（虚线） / dotted（点状）/ solid（实线）/ double（双线）；
 *  边框：设置div边框的边线宽度、颜色、虚线、实线等样式css属性
 *  有border-left/ border-right / border-top / border=bottom
 *  示例：border-bottom：solid / none / double

例子：制作只有下边框的文本框  
![在这里插入图片描述][20210210113721209.png]

#div2{
        
    	top:250px;
    	left:350px;
    	position:absolute;
    }
    input{
        
    	border:none;
    	border-bottom:solid;
    	outline:none;加了这个之后，输入时边框就会消失。
    }

1.  盒子模型:width、height、border、margin、padding  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]  
    作用：在进行页面布局时，盒子模型非常重要。

5.浮动

①行级元素：行内元素和其他元素都会在同一条水平线上排列，都是在同一行的。有a标签、label、img、span等。对于行级元素，加上div就可让它变成块级元素。

②块级元素：默认情况下，会独占一行。有div、h标签、li、table等。

③定位机制：（对于块级元素）有文档流、脱标流（float、position:absolute均可实现脱标流的效果）

④文档流特点：

*  空白折叠现象
 *  高矮不齐，底边对齐
 *  自动换行，一行写满，换行写。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]  
    ⑤float属性设置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="index.css">
    </head>
    <body>
    <div id="div1">第一个</div>
    <div id="div2">第二个</div>
    <div id="div3">第三个</div>
    </body>
    </html>

div{
        
    	width: 200px;
    	height: 200px;
    }
    #div1{
        
    	background-color: yellow;
    	float:left;
    }
    #div2{
        
    	background-color: red;
    	width: 300px;
    	float:left;
    }
    #div3{
        
    	background-color: blue;
    	width: 400px;
    	float:left;
    }

三块都加了flaot: left  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]  
float: 父一级的块级元素高度发生了破坏，没有设定的情况下，高度和宽度都是父一级的。

vertical-align: 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 7]  
⑥清除浮动：（clear：both;）

*  为了让父元素不会出现“高度崩塌”。
 *  如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了。
 *  从某个元素开始，不再需要浮动效果了。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="index.css">
    </head>
    <body>
    	<div id="div1">
    		<div id="div2"></div>
    		<div id="div3"></div>
    		<div id="div4"></div>
    	</div>
    </body>
    </html>

#div1{
        
    	background-color: red;
    }
    #div2{
        
    	background-color: yellow;
    	float: left;
    	width: 200px;
    	height: 200px;
    }
    #div3{
        
    	background-color: blue;
    	float: left;
    	width: 220px;
    	height: 220px;
    }
    #div4{
        
    	background-color: black;
    	width: 240px;
    	height: 240px;
    	
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 8]  
因为其他两个都是脱标流，黑色块作为文档流的第一个被覆盖住了。

在div4中添加 clear:both; 清除文档流，可实现黑色块接在脱标流的下面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 9]  
清除浮动的另一种规范的写法

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]: /images/20221024/1121801dffc44864afee87e118b2de2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]: /images/20221024/198c9954adfc43728cdf4b4c44f2d9f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]: /images/20221024/af754f01477b4408857299c356ee052e.png
[20210210113721209.png]: /images/20221024/a2432fad2c5345629ecc499ca9aaad9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]: /images/20221024/788e54e0f28d4976808d9bf98c97f5ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]: /images/20221024/eeba55b2ed104e01a7c7a020237ee44f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]: /images/20221024/dd11a41fd8424e3b8be48018e77bd377.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]: /images/20221024/a32b1d4b346d450ba9b86a32b5d28fee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 7]: /images/20221024/9900d99d3b29470cabc7a2c18519661f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 8]: /images/20221024/eb76282144ec4c3d89baefad5663f7c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 9]: /images/20221024/4f145f0b1e94437c84b8ff3cf8769606.png