Html和CSS提问记录

目录

1.css选择器及其优先级

   css选择器有哪些？

     基础选择器

      组合选择器

      关系选择器：

    伪元素伪选择器：

    属性选择器：

 选择器优先级：

2.浮动

     什么是浮动：

      为什么要使用浮动

        浮动特点：

    浮动引起的高度塌陷

    清除浮动的方式

   3.BFC(box formating context)

 开启BFC方式:

 开启BFC后特点：

4.position属性：

   absolute的 top right根据什么确定偏移？

---

1.css选择器及其优先级

   css选择器有哪些？

     基础选择器

        1.元素（标签）选择器：根据标签名来选择

        2.id选中，id不能重复，只能选中一个元素

        3.类选择器，class

        4.通配符选择器，* 表示选择页面所有元素     

      组合选择器

         交集：div .red 

         并集：div,span 

      关系选择器：

         1.后代选择器

           .box .x{}       

        2.子类选择器

           div .box> span

       3.兄弟选择器

              + 表示找紧挨着下一个

              ~选择下边所有兄弟元素

    伪元素伪选择器：

         伪类选择器：

            选择第几个子元素，被点击的元素，鼠标移入的元素

            :first-child

            :last-child

           :nth-child()选择第n个元素

      根据所有元素来排序，只要是子元素就会排序

        :first-of-type

       这几个是在同类型中排序

       伪元素选择器：

      不存在的元素，一些特殊不真实存在的元素（特殊位置）

：：first-line, first-letter before在元素的开始 after 在元素的最后 

          before after必须结合content属性来使用

    属性选择器：

        <p title="">

        p[title] p元素，且有title的属性

        p[title=属性值] 等于这个属性值被选中

       p[title=^属性值],选择以属性值开头的元素

       p[tittle=$属性值]结尾

       p[.....*属性值]有就行 

 选择器优先级：

    内敛样式   1000

    id选择器  100

    类和伪类选择器 10

   元素选择器 1

比较优先级时，需要将所有选择器优先级相加，高的起效 div #box1 要加起来 但不会超过最高的优先级

span,div 时需要单独计算

如果优先级相同，则优先使用后面出现的

统配选择器 优先级为0 继承样式无优先级

  继承发生在后代元素，继承父元素的样式

2.浮动

     什么是浮动：

           可以使元素相对父元素左右移动

           float :none left right

      为什么要使用浮动

           元素设置浮动以后，水平布局的等式不必要满足，

          可以使元素水平排列

        浮动特点：

          1 .元素设置浮动以后，元素会从文档流中脱离，不再占据文档流里位置，下面的元素会直接依次补上来 

          2浮动元素不会从父元素中移出

          3.设置浮动后会向父元素的左侧或右侧移动

          4.浮动元素浮动时，不会超过他前边的浮动元素

          5.如果浮动元素上边是一个没有浮动的元素，不会上移

          6.浮动元素不会超过他上边的兄弟元素，最多和他一样高

        脱离文档流特点：不再区分行内和块元素

    浮动引起的高度塌陷

             父级元素无法被撑开，影响与父元素同级元素的，父元素高度丢失引起高度塌陷

          但是一旦此种高度塌陷影响到别人，就要做处理

    清除浮动的方式

          1.给父级元素定义高度，写死

          2.给父级元素标签加上overflow:hiddlen auto

          3.clear ：both 加一个空的div标签 

          4.使用:after伪元素。

         5.clearfix可以解决高度塌陷和外边距重叠

       

   3.BFC(box formating context)

          BFC 块级格式化上下文，布局过程中生成块级容器盒子的区域，也是浮动元素和其他元素交互的限定区域。

        通俗来讲，BFC是一个独立的布局环境，可理解为一个容器，在这个容器中按照一定规则摆放物品，并且不影响盒子外的物品。如果触发BFC条件，BFC中的元素布局不受外部影响,隐含属性，需要间接开启

 开启BFC方式:

           1.float 父元素 但此时会脱离文档流，对其他元素有影响

           2.display 值为：inline-block table-cell table-caption flex 设置为行内块元素，但行内块不适合做外部

           3.overflow值为：hidden,auto,scroll

  搞这三种可以开启父元素的BFC

 开启BFC后特点：

       1.BFC不会被浮动元素覆盖 

       2.子元素和父元素外边框不会重叠

       3.BFC可以包含浮动的子元素

4.position属性：

   absolute relative  fixed 

    absolute:

      1.元素从文档流中脱离

      2.绝对定位会改变元素的性质，

      3.绝对定位会提高元素层级

   absolute的 top right参考什么确定偏移？

     浏览器，会一层层的找,直到找到relative/absolute/fixed设置的元素

5.flex布局

     flex:1表示什么

       

 

 6.设置居中

    绝对定位：    transform :translate(x,y) transform 水平与垂直方向的偏移量

                          margin:负值

                          margin:auto  (一般情况下margin:auto margin:0 auto 没啥区别，只会计算左右的，只能实现水平居中，但是有了绝对定位后，margin-top和margin-bottom 的值就不是0了，也是通过计算所得。所以能实现垂直居中。)

                        flex布局