web前端开发第五天课程

1.结构伪类选择器：根据元素的结构关系查找元素

li:first-child{color:red;} 第一个标签
li:last-child{color:red;} 最后一个标签
li:nth-child(N){color:red;} 第N个标签
li:nth-child(2n){color:red;} 偶数标签
li:nth-child(2n+1/2n-1){color:red;} 奇数标签
li:nth-child(5n){color:red;} 5的倍数
li:nth-child(n+5){color:red;} 第五个以后的标签
li:nth-child(-n+5){color:red;} 第五个以前的标签

2.PXCook用法:测量设计稿数据

3.盒子模型

盒子模型-组成

• 内容区域-width&height
• 内边距-padding(出现在内容和盒子边距之间)
• 边框线-border
• 外边距-margin(出现在盒子外面)

盒子模型-边框线

div{border(bd):粗细 线条样式 颜色(不区分顺序);}
div{border:1px solid(实线)/dashed(虚线)/dotted(点线) red;}
div{border-top/bottom/left/right;3px solid red;}

盒子模型-内边距

div{padding-top/bottom/left/right:10px;}
记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样
div{padding:10px 20px 30px 40px;}(上 右 下 左)
div{padding:10px 20px 40px;}（上 左右 下）
div{padding:10px 20px;}（上下 左右）

盒子模型-尺寸计算

• 默认盒子尺寸=内容尺寸+border尺寸+padding尺寸
• 结论：给盒子加border/padding会撑大盒子
• 解决：

1. 手动做减法：减掉border/padding的尺寸
2. 内减模式：box-sizing:border-box

盒子模型-外边距

margin跟padding写法相同
版心居中（盒子要有宽度）：div{margin:0 auto;}

清除默认样式

*{margin:0; padding:0; box-sizing:border-box;}j
li{list-style:none;} 去掉列表的项目符号

盒子模型-元素溢出

div{overflow:hidden;} 溢出隐藏
div{overflow:scroll;} 溢出滚动（无论是否溢出，都显示滚动条位置）
div{overflow:auto;} 溢出滚动（溢出才显示滚动条位置）

外边距问题

a合并现象：垂直排列的兄弟元素，上下margin会合并，取两个margin中较大的生效

b塌陷问题：父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动

解决方法：

• 取消子级margin，父级设置padding
• 父级设置overflow:hidden
• 父级设置border-top

行内元素-内外边距问题（span）

行内元素添加margin和padding,无法改变元素垂直位置，给给行内元素添加line-height可以改变垂直位置

盒子模型-圆角

div{border-radius:10px;/50%;}

• 常见应用-正圆形状
  给正方形盒子设置圆角属性值为宽高的一半/50%
• 常见应用-胶囊形状
  给长方形盒子设置圆角属性值为盒子高度的一半/50%

盒子模型-阴影

div{box-shadow:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影}
注意：

1. X轴偏移量和Y轴偏移量必须书写
2. 默认是外阴影，内阴影需要添加inset
   div{box-shadow:10px 10px 2px 4px rgb(0,0,0,0.5) inset;}

4.CSS书写顺序

1. 盒子模型属性
2. 文字样式
3. 圆角、阴影等修饰属性