CSS盒子模型

1.边框border

边框可以分开设置样式 只需将下列border改为border-top/bottom/left/right

1.1边框样式border-style

主要使用的有:
solid - 定义实线边框
dotted - 定义点线边框
dashed - 定义虚线边框
double - 定义双边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用

1.2边框颜色border-color

1.3边框宽度border-width

边框会放到盒子内,所以边框宽度会影响盒子的实际宽度

1.4边框的复合写法

border: 5px solid black; 没有顺序区别

1.5合并相邻的边框

border-collapse: collapse;
可以用于在表格中两个td相邻导致边框变粗

2.内边距padding

padding拥有用于为元素的每一侧指定内边距的属性:
padding-top
padding-right
padding-bottom
padding-left

padding也会影响盒子的实际大小,若先指定height/width再指定内边距,盒子会被撑大.不指定h/w,padding不会撑大盒子.
若盒子中字数不一样多,可以只设置padding-l/r,不设置width来让每个盒子保持同样内边距,使整体美观.

复合写法

(1)如果 padding 属性有四个值：
padding: 25px 50px 75px 100px;
上内边距是 25px
右内边距是 50px
下内边距是 75px
左内边距是 100px
即为顺时针顺序
(2)如果 padding 属性设置了三个值：
padding: 25px 50px 75px;
上内边距是 25px
右和左内边距是 50px
下内边距是 75px
(3)如果 padding 属性设置了两个值：
padding: 25px 50px;
上和下内边距是 25px
右和左内边距是 50px
(4)如果 padding 属性设置了一个值：
padding: 25px;
所有四个内边距都是 25px

3.外边距margin

依然拥有用于为元素的每一侧指定外边距的属性:
margin-top
margin-right
margin-bottom
margin-left

margin的复合写法意义与padding相同

使盒子水平居中

1. 盒子必须指定宽度
2. 将盒子左右外边距都设置为auto

从父类继承外边距

margin: inherit
使 <p class="ex1"> 元素的外边距继承自父元素（<div>）：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

外边距合并(塌陷)

对两个有嵌套关系的块元素,父子元素都有上外边距,此时父元素会使用较大的那个上外边距,而子元素不会有上外边距(塌陷问题).

解决方案:

1. 可以为父元素定义任意上边框。
2. 可以为父元素定义任意上内边距。
3. 可以为父元素添加overflow:hidden。

4.清除内外边距

网页默认内外边距不同,故在布局前首先要清除网页元素默认边距
CSS的第一行代码:

* {
	     padding: 0;
	     margin: 0;
  }

CSS3新增:

5.圆角边框border-radius

border-radius: length;
length值越大,越趋近与圆或椭圆

可以分开四个属性写,第一个值为左上角,其他按顺时针顺序.

5.1圆形

设置一个正方形盒子,将length设置为正方形边长的一半或50%

5.2圆角矩形

设置一个矩形盒子,将length设置为高的一半

5.3椭圆

设置一个矩形盒子,将length设置为50%

6.盒子阴影box-shadow

默认是外阴影(outset),但不可以设置最后一个参数为outset,否则阴影会无效

盒子阴影不占空间,不影响其他盒子排列

7.文字阴影text-shadow