CSS day3

第三章

1.盒子模型

盒子组成的4个组成部分：盒子内容（content），盒子边框（border），盒子内边距（padding），盒子外边距（margin）

2.盒子边框

border-width 定义边框的粗细，单位是px

border-style 边框样式，默认值none；solid实线；dashed虚线；dotted点线

border-color 边框颜色

border-top-width,border-top-style，border-top-color（上下左右都能写）

border:1px solid red (连写的最常见写法)

botder-top:1px solid red （连写上下左右都能写）

3.盒子内边距

padding属性设置内边距，是指边框与内容之间的距离，增加内边距，盒子会变大

padding-left:10px;(上下左右都能写)

padding:1px 2px 3px 4px（上，右，下，左，顺时针）

padding:1px（上下左右都等于1）

padding：1px 2px (上下内边距1，左右内边距2)

pading: 1px 2px 3px (上边距1px,左右边距2px,下边距3px)

盒子实际大小 = 盒子内容宽度 高度 + 内边距 + 边框

4.盒子外边距

margin-left:10px;(上下左右都能写)

margin:1px 2px 3px 4px（上，右，下，左，顺时针）

下面3种水平居中常见的写法（必须有宽度）

margin-left:auto;margin-right:auto

margin:auto;

margin:0 auto;

外边距塌陷的解决方案

1.为父元素增加边框

2.为父元素定义内边距

3.为父元素添加ovflow:hidden

5.盒子圆角边框

border-radio:50%;  圆圈

border-radio:高度一半；圆弧

6.盒子阴影

box-shadow：h-shadow（水平阴影必须）v-shadow(垂直阴影必须)  blur(模糊距离可选) spread(阴影尺寸可选) color(阴影颜色可选) inset(内部阴影可选)

box-shadow:2px 2px 2px 2px #000

box-shadow:0 15px 30px rgba(0,0,0,0.3)