7_盒子模型.txt

标签：7_盒子模型.txt

css选择符就是，表示你将把你定义的样式，用给谁。

css盒子模型

一个盒子是由以下几部分构成：

1.盒子中的内容 content

2.盒子的边框 border

3.盒子的边框与内容之间的距离，称为填充 padding，内边距(内补丁)

4.多个盒子存在时，盒子与盒子之间的距离，称为边界 margin，外边距(外补丁)

css控制元素的尺寸：

1.设置元素宽度 width:100px;

2.设置元素高度 height:100px;

3.设置元素的某一个方向外边距 margin-top/right/bottom/left:10px;

4.通知参数个数不同来设置元素的外边距 margin:10px; 上右下左4个方向

margin:10px 20px; 上下10px 左右20px

margin:10px 20px 30px; 上10px 右20px 下30px 左20px

margin:10px 20px 30px 40px; 上10px 右20px 下30px 左40px

5.设置元素的内边距 padding:上 右 下 左;

注意1：在定义盒子的宽度时，要考虑padding、border、margin的存在。

       如果增加了padding，整个盒子宽度值，要减去增加的padding的值。

注意2：在使用外边距margin时，要注意浏览器兼容性。

       解决办法：加border属性就可以解决问题。如：border:2px solid blue;

注意3：由于各个浏览器存在着内外边距的默认值，还不同，

       我们需要将所有浏览器的默认内外边距，都从零开始计算。

注意4：在实际开发中，不要用 *{margin:0;padding:0;} 因为效率低。

我们一般是用到了哪些元素，就把哪些元素的默认值归0

-----------------------

css小技巧：

1.让盒子水平居中。可以将对象的左右外边界，设置为auto

margin:10px auto;

2.让盒子中的内容，垂直居中，设置行高=盒子的高度。但是不要有换行。

height:50px;

line-height:50px;

7_盒子模型.txt

标签：7_盒子模型.txt

原文地址：http://1154179272.blog.51cto.com/10217799/1657207