目录
2、块级格式化上下文BFC(Block Formating Context)
一、盒子模型(Box Model)
![](https://i-blog.csdnimg.cn/blog_migrate/246efb7bfb66291b5630ab2e21d0d662.png)
如果我们用CSS进行网页布局时,不可避免地会碰到盒子模型。如果把网页比作一个容器,那么HTML元素(element)就是一个个的盒子,盒子里装的就是HTML元素的内容。盒子模型规定了元素框处理元素内容、内边距、边框和外边距的的方式,简单来说,就是描述一个盒子(HTML元素)和外界容器以及内部的内容之间的关系。它是一个局部布局。
1、盒子的组成
1)margin(外边距)——CSS属性,表示的是边框到外界容器之间的距离
2)border(边框)——CSS属性
3)padding(内边距)——CSS属性,表示的是边框到内部内容之间的距离
4)content(内容)——它是HTML元素中的内容,但它不是CSS属性
2、 浅析盒子模型的CSS属性
1)margin(这个属性接受任何长度单位、百分数值甚至负值)
盒子的外边框,完全透明的,开发者只能设置它的边距
- margin-top:设置元素的上外边距
- margin-bottom:设置元素的下外边距
- margin-left:设置元素的左外边距
- margin-right:设置元素的右外边距
举个例子:
p{
margin-top: 100px;/*如果margin-top的值是负数,边框会向上移动*/
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;
}
如果将其简化为一条,可以按照从上外边距(top)开始围着元素顺时针旋转的顺序进行简写,那样上例就会变成:
p{margin:100px 200px 300px 400px;}
2)padding
盒子的内边距(填充)。它可以设置背景颜色和图片,不是完全透明的。与margin类似的是,padding可以设置每一条边的边距,所以有padding-top、padding-bottom、padding-left、padding-right,设置方法与margin相同,不再赘述
3)border
盒子的边界,可以将它设置成各种样式、样式、宽度
- border-style:用于设置元素所有边框的样式,或者单独地为各边设置边框样式
- border-width:简写属性,用于为元素的所有边框设置宽度,或者单独地为各边框设置宽度
- border-color:简写属性,设置元素的所有边框中可见部分的颜色,或为4个边分别设置颜色
- border-radius:边界的四个角的半径,可以用百分值和像素值将它们设置为带弧度的
我们用链接来举个例子:
<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>
下面的样式,我们设置链接访问前和访问后的样式为5px实线的不可见边框,鼠标悬停时样式为灰色边框