浮动元素的自适应 after first-letter first-line display: none；与 visibility: hidden；的区别

最新推荐文章于 2024-09-05 23:48:57 发布

六行代码

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量63

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_55751104/article/details/127651929

版权

父元素不写高度的时候，子元素写了高度，父元素就会发生高度塌陷。

比如当黄色盒子浮动在表单下方时，便会挡住下拉框的显示。为了满足，盒子浮动在表单下方的同时，下拉框还可以正常显示内容。要解决浮动元素自适应问题。

解决办法如下：

方法1：设置一个盒子，框住所有的元素，但这样页面可以写的浮动元素就少了浮动元素一旦过多，换行的时候，就会出现问题

.box{
    height:100px;
}

方法2：增加空标签，可以实现浮动元素的自适应


  <body>
      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
       <!-- 空标签 -->
        <div style="clear: both;"></div>  
    </div>

方法3：设置一个溢出隐藏，缺点是文字内容过多之后，会自动裁剪掉，无法完整显示出来。

  .box{
       overflow: hidden;   
     }

方法4：清除浮动的方法

after { content：“ ” ；clear：both；display：block；height：0；visiblility: hidden；/overflow：hidden；}

方法5：伪元素 （最好用的）
1) :after(与content属性一起使用，定义在对象后的内容。)

dispaly是将行元素转化为块级元素，因为我们默认的元素是行内的时候，就要进行转化，否则黄色盒子里的文字又会跑到表单那一行

clear：both 清除浮动

这样可以既可以解决content导致的浏览器性能降低问题，又可以解决 overflow: hidden;溢出隐藏的问题（表单的下拉框内容无法显示的问题）

  <style>
     .box::after{
           content: " ";
           clear: both;
           display: block;
        }
  
  </style>

    <body>
        <div class="content">1111111111</div>
    </body>

如果想在content里面写东西，可以加上0的宽和高，这样content的内容就不会跑到盒子外边了。

  .box::after {

           content: "咕咕咕咕";
           clear: both;
           display: block;
           height: 0;
           width: 0;
 }

2) ：before:与content属性一起使用，定义在对象前的内容。如：div:before(content:"在其前放内容”；
3)：first-letter:定义对象内第一个字符的样式。
4)：first-line:定义对象内第一行文本的样式

display: none；与 visibility: hidden；的区别

display: none；是不占位隐藏

visibility: hidden；是占位隐藏

六行代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动元素的自适应 after first-letter first-line display: none；与 visibility: hidden；的区别

浮动元素的自适应 after first-letter first-line
复制链接

扫一扫