当前位置:   article > 正文

CSS_自适应_表格表单_css表格自适应

css表格自适应

 1.伪元素选择器

        追加进来的内容属于行内元素

           可以理解成:假的元素选择器===给他创造一个元素/标签

          1) 匹配第一行的伪元素选择器

           :first-line  这里的冒号可以使用::  : 双冒号和单冒号 为了解决兼容问题

             div::first-line{}

          2)匹配第一个字符的伪元素选择器

            :first-letter 这里的冒号可以使用::  : 双冒号和单冒号 为了解决兼容问题

          3)向元素内部的正前方插入内容

             :before  双冒号可以直接简写成:  为了解决兼容问题

             伪元素选择器实现效果:向前追加内容

             div::before{

                 content:柠檬养乐多

             }

             通过伪元素添加的内容 是不占页面元素的

             语法:

             元素:before{

                 content:"文本"

                 样式规则

             }

          4)向元素内部的正后方添加内容

            :after 双冒号可以直接简写成:  为了解决兼容问题

            语法:

             元素:after{

                 content:"文本"

                 样式规则

             }

        2.高度塌陷(面试题)

             高度塌陷:父元素里面有子元素,父元素不设置高度,并且,

             父元素的高度是被子元素撑开的

                 当给其中的一个或者是多个子元素添加浮动的时候,会让父元素的高度降低,这一情况被称值为=====高度塌陷

             高度塌陷解决:

              1)给父元素添加一个最小高度(为啥:如果你后面继续补内容或者元素的话,日语超出,显示溢出效果) 添加最小高度是为了解决自适应的问题

              2)本质原因:

              由于前面的元素浮动,导致后面的元素上去补位置,由于他上去补位置,导致父元素高度降低,并且,后面的所有的布局都上去了

              解决:可以给后面的补位元素清除浮动带来的影响

              clear:both 针对左浮动就是  clear:left  可以一对一  或者一对多清除浮动

              3)如果没有补位元素的话,父元素里面只有一个子元素,子元素浮动,产生了高度塌陷如果解决

                a.可以自己给浮动父元素添加一个overflow属性:hidden

                  除了有溢出隐藏的作用:触发BFC,并且让浮动的元素继续参与高的计算

                  用来解决父元素的高度塌陷

                b.你可以自己悄悄的在浮动的元素后面补一个元素,补位的元素必须是一个块级元素  

                  如果你非得补一个行内元素,你需要转换元素类型(不可取 会占页面元素) 但是这种方法是不可取的,原因:因为你自己悄悄补上的元素,占页面的位置

               4)最优化的方法

                万能清除法

                 .wannengqingchu:after{

                     必须的属性和内容====配套出现的

                     content:"";

                     因为你补位的元素是行内元素,需要转换成块级元素,才能清除浮动

                     display:block;

                     转换成块级元素之后,清除浮动带来的补位影响

                     clear:both

                     为了解决在ETC(杠精)的问题=====非得在content里面添加内容

                     需要把你content里面的内容隐藏掉

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/812281
推荐阅读
相关标签
  

闽ICP备14008679号