css的盒子模型
注意块级标签可以给它加一个长和宽的属性。注意内联标签给它设置长宽也没用。注意在CSS里面是一切皆盒子。盒子嵌盒子,每个盒子里面又可以嵌套一个新的布局。相框里面每一个相片就是content.注意border和相片之间的距离就是padding。border本身有一个厚度。每一个相框就是一个盒子,盒子与盒子之间的距离就是margin。
content
border
padding
margin
盒子包括content、border、padding。margin是不属于盒子的。
padding是内容到边框的距离。
margin:用于控制元素与元素之间的距离。margin的最基本用途就是控制元素周围空间的间隔
设置margin的时候必须:
margin-top:100px
margin-left:100px
注意但是这个样子是不起作用的,最好的方法是:
在outer样式里边写:
.outer{
border:1px solid transparent;
}

注意也可以通过padding属性去改,代码如下:
注意通过padding修改,原来的盒子大小会改变




需要知道的一点是设置margin的盒子不会变,设置padding的时候盒子的大小会变

注意在border的外面的一层是HTML层。
所以如果在border里边设置margin=0,就不会出现body与HTML之间有边距。


浙公网安备 33010602011771号