HTML布局与浮动

最新推荐文章于 2022-05-18 19:31:39 发布

云巅有间小卖部

最新推荐文章于 2022-05-18 19:31:39 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_43229826/article/details/121108710

版权

本文详细介绍了HTML布局中的显示框、浮动以及元素定位，特别是浮动带来的边框塌陷问题和解决方案，包括添加空div、设置父元素高度、使用overflow和伪类after。此外，还探讨了相对定位、绝对定位和固定定位的特点。文章最后深入讲解了Flex弹性布局的概念、优势以及相关属性，如flex-direction、justify-content和align-items，帮助理解如何实现更灵活的网页布局。

摘要由CSDN通过智能技术生成

布局

文档流:

元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。

显示框：display属性

block       块元素默认值，元素显示为块级元素（独占一行）

inline      内联元素默认值，元素显示为内联（多行元素在一行时，会自动换行）

inline-block 行内块元素 具有 内联和块元素的多种特性

none        元素不会被显示（隐藏）
        -与display:none相似的有一个visibility: hidden; 隐藏内容，但原位置保留，不影响布局

浮动：float

left     左浮动
right    右浮动
none     默认值，不会浮动

设置浮动后，div边框会塌陷，原因是设置浮动会脱离文档流。若要清除浮动则可以设置 clear 属性值但会造成代码冗余

clear：
        -left   在左侧不允许浮动
        -right  在右侧不允许浮动
        -both   在两侧不允许浮动
        -none   默认值，允许两侧浮动

2.可以为div父元素设置高度解决塌陷；但是元素固定高会降低扩展性

3.溢出：overflow 在解决塌陷时下拉列表框的场景不能用。

    visible     默认值，内容不会被修剪，会在盒子外

    hidden      内容被修剪，其余内容不可见

    scroll      内容被修剪，会以滚动条形式查看其余内容

    auto        如果内容被修剪，浏览器会显示滚动条

4.给父级元素添加伪类after，写法较复杂，但没有其他影响，比较推荐使用

// after{

// content: " "; 在浮动元素后添加内容为空。

// display：block；将添加内容设置为块级元素

// clear：both；清除元素两边浮动

}

总结：

清除浮动，防止父级边框塌陷的四种方法

1. 浮动元素后面加空div

简单，空div会造成HTML代码冗余

2. 设置父元素的高度

简单，元素固定高会降低扩展性

3. 父级添加overflow属性

简单，下拉列表框的场景不能用

4. 父级添加伪类after

写法比上面稍微复杂一点，但是没

最低0.47元/天解锁文章