盒模型
一、认识盒模型
所有html标签都可以看成矩形盒子，由width、height、padding、border构成，称之为"盒模型"
盒模型示意图.png
二、属性详解
(一)width和height属性
width属性表示盒子内容的
- 单位包括：px、百分数、rem等
- 当块级元素（div、h系列、li等）没有设置width属性时，它将自己撑满，但这并不意味width可以继承。
height属性设置元素的高度。这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。
(二)padding属性详解
padding是盒子的内边距，即盒子边框内壁到内容的距离
- 可以分别设置方向属性：
上 padding-padding-top、
右 padding-padding-right、
下 padding-padding-bottom、
左 padding-padding-left - 可以使用四数值写法，用空格隔开数值分别表示上、右、下、左：
{padding:10px 20px 30px 40px; } - 使用三数值写法，分别表示 上、左右、下：
{padding:10px 20px 30px;} - 使用二数字写法，分别表示上下、左右：
{padding:10px 20px;}
(三)margin属性详解
margin是盒子的外边距，即盒子和其他盒子之间的距离
- 可以分别设置方向属性：
上 margin-margin-top、
右 margin-margin-right、
下 margin-margin-bottom、
左 margin-margin-left - 可以使用四数值写法，用空格隔开数值分别表示上、右、下、左：
{margin:10px 20px 30px 40px; } - 使用三数值写法，分别表示 上、左右、下：
{margin:10px 20px 30px;} - 使用二数字写法，分别表示上下、左右：
{margin:10px 20px;}
- 竖直方向的margin有塌陷现象，小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。
部分元素（例如：body,ul,p等）具备默认的margin，制作页面时，建议初始化清除。
*{ <!-- 星号通配符选择器，表示选择所有元素-->
margin:0;
padding:0;
}
body,ul,p{ <!-- 通配符涉及效率低下，使用并集选择器-->
margin:0;
padding:0;
}
- 盒子的水平居中
将盒子左右两边的margin都设置为auto，盒子将水平居中.box{ margin: 0 auto;}*
(四)box-sizing属性
盒子添加
box-sizing:border-box之后，盒子的width、height数字就表示盒子实际占有的宽度（不含margin），即padding、border变为“内缩”，不再外扩。
box-size属性大量应用于移动网页的制作中，结合百分比布局、弹性布局非常好用。
三、display属性
（一）行内元素和块级元素
行内和块级元素.png
行内块
img和表单元素是特殊的行内块,即能够设置宽度高度，也能并排显示
（二）行内元素和块级元素的相互转换
- 使用
display:block;将元素转换为块级元素 - 使用
display:inline;将元素转换为行内元素。将元素转换为行内元素的应用不多见 - 使用
display:inline-block；将元素转为行内块
(三)、元素的隐藏
-
display:none可以将元素隐藏，元素将彻底放弃位置。 -
visibility:hidden也可以将元素隐藏，元素不放弃自己位置。
浮动与定位
一、浮动
（一）浮动基本概念
- 浮动本质功能：
- 要点1：要浮动，并排的盒子都要设置浮动。
- 要点2：父盒子要有足够的宽度，否则盒子会出现下坠。
- 要点3：子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一兄弟元素。
- 要点4：浮动元素
，已经脱离标准文档流，都能够设置宽度和高度，计时是span或a标签等。
（二）使用浮动实现布局
- 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动
- 外部大盒子内部可以继续使用浮动
- 合理使用div划分
（三）BFC规范和浏览器差异
BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
如何创建BFC
-
float的值不是none -
position的值不是static或者relative -
display的值inline-block、flex或者inline-flex overflow:hidden
什么是overflow:hidden;
- overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏
- overflow:hidden;是非常好用的让盒子形成BFC的方法
BFC的其他作用
- BFC可以取消盒子margin塌陷
-
BFC可以可以阻止元素被浮动元素覆盖,如下图：
BFC其他作用
（四）清除浮动
为什么要清除浮动?
清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。
下面这个例子，有两个块级元素div，div没有任何属性，每个div里有p，如果我们给里面的p标签加浮动,效果如下：
图片描述
上图中，我们发现：第二组中的第1个p，去贴靠第一组中的最后一个p了（我们本以为这些p会分成两排）。浮动的元素，只能被有高度的盒子关住。
清除浮动方法
- (1) 清除浮动方法1：
让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
<style>
* {
margin: 0;
padding: 0;
}
div {
overflow: hidden;
margin-bottom: 10px;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-right: 20px;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</body>
- (2)清除浮动方法2：给后面的父盒子设置
clear:both属性。clear：both表示清除浮动对自己的影响，表示左右浮动都清除。这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。
<style>
* {
margin: 0;
padding: 0;
}
.box2 {
margin-top: 20px;
clear: both;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-right: 20px;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="box2">
<p></p>
<p></p>
</div>
</body>
*(3) 清除浮动方法3：使用
::after伪元素，并且给::after设置clear:both。
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: '';
clear: both;
/* 转为块级元素 */
display: block;
}
div {
margin-bottom: 10px;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-right: 20px;
}
</style>
<body>
<div class="clearfix">
<p></p>
<p></p>
</div>
<div class="clearfix">
<p></p>
<p></p>
</div>
</body>
(4) 清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带
clear:both的盒子。上面这个例子中，为了防止第二个div贴靠到第一个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。
<style>
* {
margin: 0;
padding: 0;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-right: 20px;
}
.cl{
clear: both;
}
.h20 {
height: 20px;
}
.h22 {
height: 22px;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="cl h20"></div>
<div>
<p></p>
<p></p>
</div>
</body>
二、定位
（一）相对定位
相对定位：盒子可以相对自己原来的位置进行位置调整
position:relative;设置相对定位
top:10px;相对原位置向下移动10px
left:10px;相对原位置左向右移动10px
- 相对定位的元素，本质上仍在原位置，只不过渲染咋新的地方，渲染的图形可以比喻成“影子”，部位对页面其他元素产品任何影响。
- 相对定位用来微调元素位置，相对定位的元素还可以当作绝对定位的参考盒子。
（二）绝对定位
绝对定位：盒子可以在浏览器中坐标进行位置精准描述，拥有自己的绝对位置。
position:absolute;设置绝对定位
top:20px;从顶部向下移动20px
left:20px;从左向右移动20px
- 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。
- 脱离标准文档流的方法：浮动、绝对定位、固定定位。
- 绝对定位的盒子并不是永远以浏览器作为基准点。
- 绝对定位的盒子
，当作基准点。这个盒子通常是相对定位的，所以这个性质也叫“子绝父相”。
（1）绝对定用来制作“压盖”、“遮罩”效果
（2）用来结合CSS精灵使用
（3）可以结合JS实现动画
（三）固定定位
固定定位：不管也买你如何卷动，永远固定在那里。
position:fixed;设置固定定位
top:·100px;从顶部向下移动20px
left:100px;从左向右移动20px
- 固定定位只能以页面为参考点，没有子固父相。脱离标准文档流。
网友评论