DIV
- DIV是层叠样式表中的定位技术，全程DIVision
- 有时把div称为图层，更多时候称为“块”
DIV设置
DIV溢出处理效果：
- 超出div宽度高度的文字或图片进行隐藏处理
- 超出div宽度高度的文字或图片增加滚动条
overflow属性设置
如：
html文件：
<body>
<div id="div1">
一些废话<br>
一些废话<br>
一些废话<br>
一些废话<br>
一些废话<br>
一些废话<br>
一些废话<br>
一些废话<br>
一些废话<br>
</div>
</body>
css文件：
#div1 {
background-color: yellowgreen;
width: 150px;
height: 150px;
}
则：这就是溢出。
解决方法1：隐藏。
在css代码上加上：
overflow: hidden;
则超出的那部分就会被隐藏。
其他属性同理。
轮廓与边框设置
轮廓outline
作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
dashed：虚线轮廓dotted：点状轮廓solid：实线轮廓double：双线轮廓
边框
作用：设置div边框的边线宽度、颜色、虚线、实线等样式css属性。
有四种属性：
border-leftborder-rightborder-topborder-bottom
solid，表示有线。
现在做一个这个：
html文件：
<body>
<label>姓名：</label>
<div id="div1">
<input type="text">
</div>
</body>
css文件：
#div1 {
position: absolute;
left: 150px;
top: 150px;
border-bottom: solid;
}
label {
position: absolute;
left: 105px;
top: 150px;
}
input {
border: none;
}
显示：
盒子模型
用来设置间距。
相关属性：
- width
- height
- border
- margin：外边距
- padding：内边距
顺序：上、右、下、左
关于padding的距离由哪里产生
html文件：
<body>
<div id="div1">一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话</div>
<div id="div2">一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话</div>
</body>
css文件：
div {
height: 100px;
width: 100px;
/*溢出的看不到了*/
overflow: hidden;
}
#div1 {
background-color: yellowgreen;
margin: 20px 0px 0px 20px;
/*增加右边的宽度*/
padding-right: 20px;
box-sizing: content-box;
}
#div2 {
background-color: skyblue;
margin: 0px 0px 20px 20px;
}
* {
/*不会有边距，会直接顶到左上方*/
/*margin: 0px 0px 0px 0px;*/
/*即上 右 下 左*/
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
显示：padding的20是content外的20.
若把box-sizing改成：box-sizing: border-box;
content变成了80x100——padding的20是content内的20。
元素居中
包括：
- 文字居中：让自己容器中的元素居中，常作用于文本或图片等内联元素。
- 对象居中：让容器中的自己居中，常作用于块元素，且需要配合宽度使用。
实现文字居中的代码：
html代码：
<body>
<div id="div1">一段废话</div>
</body>
css代码：
div {
height: 200px;
width: 200px;
}
#div1 {
background-color: yellowgreen;
margin: 20px 0px 0px 20px;
/*文字：水平居中*/
text-align: center;
/*文字：垂直居中：默认居中，所以高度跟跟总体的高度一样*/
line-height: 200px;
}
显示：
对象居中的代码，增加css代码：
/*对象水平居中: 上下 左右*/
/*对于auto，该对象要有宽度才能使用*/
margin: 0px auto;
显示：
浮动
行级元素与块级元素
相关概念：
行级元素
行内元素和其他行内元素都会在同一条水平线上排列，都是在同一行的。如：
- a标签
- label
- img
- span
如，html文件：
<body>
<a href="">我的博客</a>
<a href="">https://blog.csdn.net/karshey</a>
</body>
显示：在同一行。
块级元素
在默认情况下，会独占一行。如：
- div
- h标签
- li
- table
如：
<body>
<div><a href="">我的博客</a></div>
<div><a href="">https://blog.csdn.net/karshey</a></div>
</body>
显示：换行了。
定位机制
分为：
- （标准）文档流
- 脱标流：脱离标准文档流（float、position:absolute）
文档流特点：
- 空白折叠现象
- 高矮不齐，底边对齐
- 自动换行，一行写满换行写
空白折叠现象演示：
<body>
<label>一段废话</label>
<label>一段废话</label>
<label>一段废话</label>
</body>
显示：有空格——把编辑区里的换行显示成空格。
改成：
<label>一段废话</label><label>一段废话</label><label>一段废话</label>
显示：空白被折叠了。
文档流：从上到下（块）、从左到右依次布局。
脱标流：让块级元素从上到下，从左到右布局。
脱标流
float的属性：
演示文档流的情况：
html文件：
<body>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
</body>
css文件：
div {
width: 200px;
height: 200px;
}
#div1 {
background-color: yellowgreen;
}
#div2 {
background-color: lightpink;
}
#div3 {
background-color: lightblue;
}
显示：div是块级元素，所以会从上到下排列——这是文档流。
添加float后：
#div1 {
background-color: yellowgreen;
float: left;
}
#div2 {
background-color: lightpink;
width: 300px;
}
显示：第一个div是盖在第二个div上的。
若把left改成right：
#div1 {
background-color: yellowgreen;
float: right;
}
显示：第一个div就到右边了。
若全都脱离文档流：
div {
width: 200px;
height: 200px;
}
#div1 {
background-color: yellowgreen;
float: left;
}
#div2 {
background-color: lightpink;
width: 300px;
float: left;
}
#div3 {
background-color: lightblue;
float: left;
}
float初衷、包裹与崩溃
float的崩溃（破坏、崩塌）
- 是父一级的块级元素高度发生破坏
ps：如果块级元素没有设置宽度，那么它的宽度就是父一级元素的宽度。
如：
html文件：
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
css文件：
#div1 {
border: 1px solid black;
background-color: hotpink;
}
#div2 {
background-color: lightpink;
width: 300px;
height: 300px;
}
显示：深粉色是div1的块，它的长度宽度是它的父一级的长度宽度，在这里就是<body>。
float崩溃：将子元素设置为浮动之后，父元素在没有指定高度的情况下其高度将不存在。
html文件：
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
css文件：
#div1 {
border: 1px solid black;
background-color: hotpink;
}
#div2 {
background-color: lightpink;
width: 300px;
height: 300px;
float: left;
}
#div3 {
background-color: deeppink;
width: 100px;
height: 200px;
float: left;
}
显示：div1的块没有了——float崩溃。
float包裹特性
包裹性：当产生了浮动之后，div的宽度会自动地适用于里面的内容。
html代码：
<body>
<div id="div1">
<img src="../img/1.jpg">
</div>
</body>
css代码：
#div1 {
background-color: hotpink;
float: left;
}
显示：在浏览器按F12：
整个div是297x302：
而img是297x298：
多出来的297x4就是基准线。
img是行级元素，行级元素都会出现基准线的问题。
如何去除基准线？
添加css代码：
img {
/*垂直对齐方式设置为底边对齐*/
/*也可以理解为将行级元素转换为块级元素*/
vertical-align: bottom;
}
显示：去除成功！
float的设计初衷
使文字或矩形区域能进行环绕排列。
清除浮动
清除浮动：指的是清除该元素之前的浮动。
为什么要清除浮动：
- 为了父元素不会出现“高度崩塌”
- 如果强制规定外层容器的尺寸，则显得不那么灵活，高度就不能自动适应了
- 从某个元素开始，不再需要浮动效果
未清除浮动：
html：
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
css：
#div1 {
background-color: greenyellow;
}
#div2 {
background-color: lightpink;
float: left;
width: 300px;
height: 300px;
}
#div3 {
background-color: lightblue;
float: left;
width: 330px;
height: 330px;
}
#div4 {
background-color: springgreen;
width: 500px;
height: 500px;
}
显示：左上两个都是浮动的。
想要清除浮动，在css中的div4中添加：
/*清除浮动：从div4开始就不再浮动了*/
clear: both;
显示：不再浮动了。
both：表示可以清楚left、right两种浮动。
清除浮动的第二种方法：
html：
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="clearDiv"></div>
<div id="div4"></div>
</div>
</body>
css：改变div4，增加clearDiv
#div4 {
background-color: springgreen;
width: 500px;
height: 500px;
}
#clearDiv {
clear: both;
}
显示效果一样。
清除浮动的第三种方法（主流）：
/*意思是：在clearDiv结束的位置上添加一段内容*/
#clearDiv::after {
/*有content的存在但不显示任何内容*/
content: "";
/*将content内容隐藏*/
visibility: hidden;
/*以上两个互为补充*/
height: 0px;
/*块级显示*/
display: block;
clear: both;
}
显示效果一样。
554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
