前端第三天

超大背景图片 垂直居中靠左上 left top或top left

css三大特性：
1.层叠性
相同选择器给相同样式会被覆盖，遵循原则：就近原则
2.继承性
子元素继承父元素的样式（text-,font,line和color属性)
子元素继承父元素行高1.5倍是在当前元素文字大小上的1.5倍
3.优先级

权重可以叠加

网页布局：
1.先准备好相关网页元素，盒子来分区
2.利用css设置好盒子样式，摆放到响应位置
3.往盒子里面装内容

盒子模型：
1.border（边框） ：border-width（边框粗细）、border-style（边框样式）、border-color（边框颜色）
简写：border：1px solid red（无顺序限制）
分开写法：border-top：
注意：边框会影响盒子大小（测量需注意）
2.padding（内边距）：padding-left padding-right padding-top padding-bottom
一个值为上下左右都是 2个值是上下和左右 三个值是上、左右和下，四个值是上右下左
3. margin（外边距)：margin-left、margin-right、margin-top 、margin-bottom
4.content（内容）

注意：外边距可以让块级盒子水平居中
条件：
1.盒子必须制定宽度
2.左右外边距都为auto
行内和行内块元素水平居中直接添加text-aligh-center

外边距合并：当父子块元素都有外边距，父元素会塌陷较大的外边距值
解决方案：
1.为父元素定义上边框
2.为父元素定义内边距
3.给父元素添加overflow：hidden

字数不一样盒子可以给一个padding值来撑开盒子
若盒子本身没有指定width/height属性，贼padding就不会撑开盒子大小

清除内外边距：
*{
margin:0;
padding:0;
}

表格细线边框：border-collapse:collapse

圆角边框：
border-radius:length
（接四个数值顺序分别是左上、右上、右下、左下；接两个数值是左上、右下和右上左下对角关系）
1.参数值可以为数值或百分比
2.如果是正方形，要设置成一个圆，数值修改为高度或者宽度的一般或者直接写50%
3.矩形直接设置为高度的一半
4.分开：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

盒子阴影：
box-shadow:h-shadow（水平阴影的位置） v-shadow（垂直阴影的位置） blur （模糊距离）spread（阴影尺寸） color （阴影颜色）inset（外部阴影改为内部阴影）
语法：box-shadow（必需）h-shadow（必需） v-shadow blur color
默认外阴影（但不能写outset否则无效），不占用条件

文字阴影：text-shadow（同盒子阴影一致）