寒假作业13

最新推荐文章于 2024-07-31 15:50:06 发布

BAILI18

最新推荐文章于 2024-07-31 15:50:06 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/BAILI18/article/details/87270528

本文深入讲解网页布局的基础概念，包括标准文档流、display属性、浮动(float)及其清除方法，对比inline-block与float的区别，帮助读者掌握网页布局的核心技巧。

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

第七章
1.网页布局
标准文档流
指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成

块级元素（block）
<h1>…<h6>、<p>、<div>、列表
内联元素（inline）
<span>、<a>、<img/>、<strong>...

2.display属性
值说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示
3.浮动(float)属性
值说明
left 左浮动
right 右浮动
none 不浮动
4.清除浮动
clear属性
值说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
解决父级边框塌陷的方法
浮动元素后面加空div

div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
  <div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

设置父元素的高度

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

父级添加overflow属性

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

overflow属性

属性值说明
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
父级添加伪类after

<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}

解决父级边框塌陷的方法的优缺点
浮动元素后面加空div
简单，空div会造成HTML代码冗余

设置父元素的高度
简单，元素固定高会降低扩展性

父级添加overflow属性
简单，下拉列表框的场景不能用

父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用

5.inline-block和float的区别
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持

float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式