html_css_盒子

盒子模型

一个盒子是由一下基本分构成的：

1. 盒子中的内容 content
2. 盒子的边框 border
3. 盒子的边框与内容之间的距离，称为填充—padding，内边距（内补丁）
4. 多个盒子存在，盒子与盒子之间的距离，称为边界—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)=盒子的高度，但是不要有换行

    ③在调试的时候可以适当的加背景颜色。