实战网页布局心得（一）

最新推荐文章于 2020-11-03 10:41:35 发布

耐耐~

最新推荐文章于 2020-11-03 10:41:35 发布

阅读量1.4k

点赞数 3

分类专栏： # HTML(停更) 文章标签： CSS HTML

本文链接：https://blog.csdn.net/f156207495/article/details/78797080

版权

HTML(停更) 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实战心得：

1.父元素不能撑起浮动子元素带来的影响

在没有实战之前，经常会看到书里讲到浮动元素带来的影响，其中之一就是父元素不能撑起子元素，书里经常会举这个例子

然后书上就会介绍如何清除浮动来让父元素撑起子元素了，但是当不设置父元素的高度时，页面就只会显示这两个子元素，看起来好像达到了我们想要的效果，

那为什么还要清除浮动呢？？父元素没有包裹子元素其实还是会有影响的，会对父元素的兄弟元素的布局会有影响。看个例子

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <meta charset='utf-8'>
  <style>
    #wrapper{
      width: 400px;
    }
    #test_float1{
      width:50px;
      height: 50px;
      float: left;
      background-color: blue;
    }
    #test_float2{
      width: 50px;
      height: 50px;
      float: right;
      background-color: red;
    }
    #special{
      width:400px;
      height:200px;
      background-color: yellow;
    }
  </style>
  <body>
    <div id='wrapper'>
      <div id='test_float1'>子元素1</div>
      <div id='test_float2'>子元素2</div>
    </div>
    <div id='special'>
      这个元素不会按照正常布局位于wrapper元素的下面，而是会和wrapper的子元素重叠在一起
    </div>
  </body>
</html>

显示结果：

我们预期的结果是黄色区域位于wrapper的下面，可是显然黄色区域与wrapper重叠了。

所以我们给wrapper一个高度让它能够包裹起来子元素（这只是一种清理浮动的方法）

#wrapper{
    height:100px;
}

然后就会达到预期效果了

2.float元素的宽度和高度

当一个元素设置为float时，只要其值不为none，它就变成了block元素，即块级方框，但是它和块级元素略有区别。

一般块级方框默认的width为一整行，而float元素的尺寸与内容的大小相同，内容的宽度即为float元素的宽度，内容的高度即为float元素的高度，看一个例子：

<style>
span{
			display: block;
			background-color: yellow;
		}
	</style>
<body >
		<span>文字</span>
	</body>

它的效果图是：

然后看一下float的：

<style>
ul{
			height:50px;
			list-style: none;
			background-color: blue;
		}
	li{
			float: left;
			padding:5px 10px;
			margin-left: 10px;
			background-color: yellow;
		}
	</style>
	<body >
		<ul>
			<li>首页</li>
			<li>第一</li>
			<li>第二</li>
			<li>第三</li>
		</ul>
	</body>