前端页面布局相关问题

原创于 2019-08-20 15:01:05 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

前端笔记专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解了CSS中解决常见布局问题的四大技巧：清除浮动、让宽度包含内边距和边框、使文字居中显示。通过实际代码示例，帮助读者掌握如何优化网页布局，提升网站视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

清除浮动：

1.给父元素添加 clear:both;

2.在浮动元素后面添加一共空白元素：
<div style="clear:both;"></div>
3.给父元素添加 overflow:hidden/auto;

4.添加给父元素添加after伪元素：
.content:after{
         content:".";
         display:block;
         height:0;
         visibility:hidden;
         clear:both;
     }
.content{zoom:1;}

让宽带width包含内边距和边框：
.box{
    box-sizing: border-box;
}

让文字居中显示

.text{
    text-align: center;/*水平居中*/
    ine-height: 30px;/*设置和容器一页靠度-垂直居中*/
}