盒子模型

盒子模型

选择器

1. 结构伪类选择器
   • E:first-child：查找第一个E元素
   • E:last-child：查找最后一个E元素
   • E:nth-child(n)：查找第n个E元素
   • E:nth-child(2n)：偶数标签
   • E:nth-child(2n+1)：奇数标签
   • E:nth-child(2n+1)：奇数标签
   • E:nth-child(5n)：5的倍数
     • 公式中的n的取值从0开始
2. 伪元素选择器
   • 创建虚拟元素，用来摆放装饰性内容
   • E::before：在E元素前面添加一个伪元素
   • E::after：在E元素后面添加一个伪元素
   • 注意点：
     • 必须设置content属性用来设置伪元素的内容，如果没有内容，则引号留空即可
     • 伪元素默认是行内显示模式
     • 权重和变迁选择器相同

PxCook

1. 切图设计工具
   • 开发面板（自动智能识别）
   • 设计面板（手动测量尺寸和颜色）

盒子模型

1. 组成

   • 内容区域
   • margin
   • border
   • padding

2. 边框线

   • 属性值：边框线粗细 线条样式 颜色

   • 属性值	线条样式
     solid	实线
     dashed	虚线
     dotted	电线

   • 单方向边框线：border-方位名词

3. 内边距

   • padding
   • padding-方位名词
   • 多值写法：一值（四个），二值（上下，左右），三值（上，左右，下），四值（上，右，下，左）
   • 从上开始，顺时针转动

4. 尺寸计算

   • 长：左右边框线+左右内边距+内容长度
   • 宽：上下边框线+上下内边距+内容宽度
   • 给盒子加border/padding会撑大盒子
   • 解决：
     • 手动减去
     • 自减（border-sizing：border-box）

5. 外边距

   • margin
   • margin-方位词
   • 与padding属性值写法相同

6. 版心居中

   • margin：0 auto;

7. 清除默认样式

   • *{}

8. 元素溢出

   • overflow:hidden—>隐藏
   • overflow:auto—>如果超出内容，会产生滚动条
   • overflow:scroll—>无论是否超出，都会产生滚动条

9. 外边距问题

   • 垂直排列的兄弟元素，上下margin会合并
   • margin显示较大的margin

10. 外边距塌陷

    • 原因：父子级标签，子级添加上外边距会产生塌陷问题
    • 解决办法
      • 取消子集margin，给父级设置内边距
      • 父级设置overflow:hidden
      • 父级设置border-top

11. 行内元素内外边距问题

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

12. 圆角

    • border-radius
    • 二值（左上右下，右上左下），三值（左上，右上左下，右下），四值（左上，右上，右下，左下）
    • 属性值是圆角半径
    • 正圆：正方形设置border-radius的值为宽的一半（或者直接设置为50%）
    • 胶囊：border设置为宽度的一半

13. 盒子阴影

    • border-shadow：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色内外阴影
    • X轴偏移量和Y轴偏移量必须书写
    • 默认是外阴影，要是内阴影需要加inset