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之间有边距。

 

posted @ 2017-03-06 20:11  关泉珍  阅读(60)  评论(0)    收藏  举报