6.24 学习笔记

结构性伪类选择器

         nth–of–type()    nth–child()

         角标是从1开始的，1表示第一项，2表示第二项   n值，表示从零到无穷大

         first–of–type

         last–of–type

         only–of–type

         nth–of–type()与nth–child()之间的区别:

            type:类型，相同类型的第几个

            child:孩子，大标题以下的都是孩子，不分类型

13、CSS的样式继承

文字关的样式可以被继承

布局相关的样式不能被继承(默认不能被继承，但可以设置继承属性 inherit值)

14、CSS优先级

    1.相同样式优先级

     当设置相同样式时，后面的优先级较高，不建议出现重复设置样式的情况

    2.内部样式与外部样式

  内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级较高。

    3.单一样式优先级

      Style行间＞id＞class＞tag＞*＞继承

    4.！important

      提升样式的优先级，非规范方式，不建议使用。(不能针对继承的属性进行优先级的提升)

    5.标签＋类＞单类

    6.群组优先级

      群组选择器与单一选择器的优先级相同，靠后写的优先级高

    7.层次优先级

      1.权重比较

       ul  li  .box  p  input{}   1+1+10+1+1

       .hello  span  #elem{}    10+1+100

      2.约分比较

        ul  li  .box  p  input{}      li  p  input{}

        .hello  span  #elem{}       #elem{}

15、css的盒子模型

组成: content -> padding -> border -> margin

      物品      填充物     包装盒    盒子与盒子之间的间距

content: 内容区域  width和height组成

padding: 内边距(内填充)

   只写一个值: 30px(上下左右)

   只写两个值: 30px  40px(上下、左右)

   写四个值:  30px  40px  50px  60px(上右下左)

 单一样式只能写一个值:

  padding-top

 padding-bottom

 padding-left

 padding-right

margin:外边距(外填充)

        用法与padding相同

注: 1.背景色填充到margin以内的区域(不包括margin区域)

   2.文字会在content区域

   3.padding不能为负数，而margin可以为负

  box-sizing:

    盒尺寸，可以改变盒子模型的展示形态

默认值: width、height -> content

border-box: width、height-> content  padding border

使用场景:

  1.不用再去计算一值

  2.解决一些100%的问题

 盒子模型的一些问题:

1. margin叠加问题，出现在上下margin同时存在的时候，会取上下中值较大的作为叠加值。

解决方案:BFC方案/只设置一个较大的为想要的

1. margin传递问题，出现在嵌套的结构中，只针对margin-top的问题。

解决方案:BFC规范/给父容器加边框/margin换成padding

        扩展:1.margin左右自适应是可以的，上下不可以(上下自适应在第二大部分)

            2.width、height不设置的问题，对盒子模型的影响，会自动去计算容器的大小，节省代码。

16、标签分类

     按类型

        block : div、p、ul、li、h1……

              1.独占一行

              2.支持所有样式

              3.不写宽的时候和父亲的宽相同

              4.所占区域是一个矩形

        inline: span、a、em、strong、img……

              1.挨在一起的

              2.有些样式不支持，例如:width，height，margin，padding(左右支持，上下不支持)

              3.不写款的时候，宽度有内容决定

              4.所占的区域不一定是矩形

              5.内联标签之间有空息(是由换行引起的)

        inline-block : input，select……

              1.挨在一起，支持宽高

              注:布局一般用块标签，修饰文本一般用内联标签

  按内容分类:

       Flow: 流内容

       Metadata: 元数据

       sectioning: 分区

       heading: 标题

       phrasing: 措辞

       embedded: 嵌入的

       interactive: 互动的

   按显示:

       替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容。

       非替换元素:将内容直接告诉浏览器，将其显示出来。

 17、显示框类型

display: block，inline，inline-block，none

      display: none(不占空间的隐藏)

       visibility:hidden(占空间的隐藏)