HTML5+CSS3学习笔记第五天

五、CSS 第三天（选择器、PxCook软件、盒子模型）

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

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素

• E:nth-child(N):N可以为2n（偶数）|2n+1（奇数）|5n（5的倍数）|n+5(第五个之后的标签)
• E就是标签

2.伪元素选择器：创建虚拟元素，摆放装饰性内容

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

 div::before {
        content:"我爱你"; <!--必须有该属性，否则不生效-->
        width: 100px;
        height: 100px;
        background-color:brown;
        display: block; "该选择器默认为行内显示样式"
      }

3.PxCook(像素大厨)：切图设计工具软件，支持PSD文件的文字、颜色、距离自动智能识别

​ 用于对设计稿进行尺寸、颜色、距离等进行标注——方便开发

4.盒子模型：布局网页、摆放盒子和内容

• 组成：

  • 内容区域——width&height

  • 内边距——padding

    • 单方向内边距：padding-方位名词
    • 可以多值写法：padding：上 右 下 左（顺时针）

  • 边框线——border：边框线粗细、线条样式、颜色（不区分顺序）

    • 线条样式：solid(实线)、dashed(虚线)、dotted(点线)
    • 设置单方向边框线：border-方位名词（top|right|left|bottom）

  • 外边框——margin

    • 垂直排列的两个标签margin会合并

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

      解决方法——取消子级margin,给父级设置padding

• 盒子尺寸=内容尺寸+boder尺寸+内边距尺寸
  ​ border和padding会撑大尺寸——解决方法：
  1.减少盒子宽高（手动减法）
  2.box-sizing: border-box(自动做减法)

• 版心居中：margin设置左右0 auto (盒子要有宽度才能实现版心居中)

• 元素溢出：控制溢出元素的内容的显示方式——overflow

  属性值	效果
  hidden	溢出隐藏
  scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
  auto	溢出滚动（溢出才显示滚动条位置）

• 行内元素——垂直内外边距问题

  • 添加margin和padding，无法改变元素垂直位置

    解决方法——加行高属性line-height

• 盒子模型——圆角：设置外边框为圆角

  border-radius : 数字+px/百分比（属性值最大为50%）

  • 正圆形状：给正方形盒子设置属性值为宽高的一半|50%
  • 胶囊形状：给长方形盒子设置属性值为盒子高的一半

• 盒子模型——阴影

  box-shadow : [ x轴偏移量 y轴偏移量] (必须存在) 模糊半径 扩散半径 颜色 内外阴影

5.清除默认样式：

• 清除内外边距使用通配符*设置内外边距为0
• 清除列表标签：list-style: none