盒子模型
一个盒子是由一下基本分构成的:
- 盒子中的内容 content
- 盒子的边框 border
- 盒子的边框与内容之间的距离,称为填充—padding,内边距(内补丁)
- 多个盒子存在,盒子与盒子之间的距离,称为边界—margin
整个盒模型再页面中所占的实际宽度为:
左边界+左边距+左填充+内容+右填充+右边框+右边界组成
Css盒子的相关属性:
语法:padding:上 右 下 左
再定义盒子的宽度时候,要考虑到内填充,边框,边界的存在,如果增加了内填充,整个盒子的宽度值要再减去你增加的内填充值
1.在使用外边距,要注意浏览器的兼容性
2.注意:除了值为0的情况下,所有的非0的后面都要加单位
3.由于各个浏览器存在着内外边距的默认值(而且不相同),我们需要将所有的浏览器的内外边距都从零开始计算,在实际工作中不要用 这个 *{margin:0 ;padding:0;},效率最低,所以我们使用到了哪些元素,就把哪些元素的默认值归零。
补充:如果使元素居中,则可以使用margin属性。
{
margin:10px(上下 外边距) zuto(左右 为自动)
}
注意:设置一个块为水平居中的时,都会给这个快设置一个宽度值,如果不设置则宽度为100%即沾满整个屏幕,如果在设置margin居中就不起效果
4.css的属性,虽然有继承的特点,但是,并不是所有的属性都有继承
5.css布局主要是通过盒子模型来实现的---w3c将网页内容放置在一个盒子中,对这个盒子的一些属性进行控制
①.内容属性 :内容本身的宽 :width,内容本身的高:
height
②.内填充属性:内容与边界的距离 padding
6.关于列表的属性介绍:
List-style:none 不要列表的符号
7.CSS小技巧
①让盒子水平居中,让对象的左右外边距设为auto
②让盒子中的内容垂直居中,设置行高(line-height)=盒子的高度,但是不要有换行
③在调试的时候可以适当的加背景颜色。