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;