HTML + CSS - 网页布局之一般布局&浮动布局

1. 一般布局

1.1 一般布局相关参数

元素内容常常可以想像为放在一个盒子里，然后在周边加上内边距，边框和外边距，是盒子模型

默认一个块级区域会填充父类所有的行向空间，并且沿着块伸长容纳其内容，可以为块状体设置某些参数以此满足形状上的要求

例如：

• height

设置块状体的高度

• width

设置块状体的宽度

• border

设置块状体边框的样式，颜色

• padding

定义元素内容与其边框之间的内边距（空白区域）。换句话说，它是在元素的内容区域和边框之间添加的空间，内部距离。

单个值：意味着上、右、下、左的内边距都是 20px

两个值：第一个值用于上下方向的内边距，第二个值用于左右方向的内边距。

css 复制代码

padding : 20px 10px 30px 5px;

一般布局是一套浏览器视口内组织元素如何放置的系统，默认块级元素按照父类的书写模式

每个块状元素会在上一个元素处另起一行。当块状体中内部文本超过块状体大小，则会自动空行。若相邻元素都设置外边距且接触，保留大的外边距。

1.2 外部设置

margin: 设置元素的外边距，即元素与其他元素之间的空间。它可以控制元素周围的空白区域，从而调整元素在页面中的布局

css 复制代码

margin:<top><right><bottom><left>;

单一值：四个方向的外边距都相同。一般默认为靠顶部，靠左的距离

两个值：一般默认为靠顶部，靠float设定的距离的距离；

或者直接指定margin：margin-right，margin-left，margin-top，margin-bottom

可自定义选择数值大小，或者使用'auto'网页自动对齐

2. 浮动布局（Float Layout）

2.1 float

用于使元素浮动，可以实现简单的两栏或三栏布局。

float : left; float : right;将元素分别向左对齐与向右对齐。

css 复制代码

<style>
    float:left;
</style>

设置成功后该元素会脱离正常的文档布局，吸附在父容器设定处。在正常布局中位于该元素之后的内容，此时会围绕浮动元素，填满空间。但与浮动元素同等级别的元素仍然保持正常布局（类似于无视了这个浮动元素）

浮动元素的margin设置对于正常元素与浮动元素之间的距离大小

html 复制代码

<style type='text/CSS'>
.container{
    background-color:lightgray;
}
.float-box {
    float:left;
    width:100px;
    height:100px;
    margin-right:10px;
}
.clearfix::after{
    content:"";
    display:table;
    clear:both;
}
</style>
<body>
    <div class="container clearfix">
        <div class="float-box"></div>
        <div class="float-box"></div>
        <div class="float-box"></div>
    </div>
</body>

浮动元素外元素背景

浮动元素对于在其之下的元素进行吸附。

目标元素的行内盒子被缩短，所以文字会排布在浮动元素周围；但浮动元素从正常文档流移出，故段落的盒子仍然保持原有大小。

css 复制代码

<!DOCTYPE html>
<head>
	<title>This is a new</title>
	<style type="text/css">
	body
	{
		margin:auto;
		width:70%;
		max-width: 800;
	}
	.box
	{
		float:left;
		background-color: #ADD8E6;
		height:100px;
		width:300px;
		margin: 10px;
	}
	.speical
	{
		background-color: #429FFF;
		height:50px;
	}
	.cleared
	{
		clear: left;
	}
	</style>
</head>
<html>
	<body>
	<h1>Welcome to my news</h1>
	<div class='box'>Float
	</div>
	<div class='speical'>haahahahahhahah</div>
	<p class='cleared'>
		说起写作文，也许有的同学把它当作一种负担，每当一个新的题目出现在他的眼前时，就头疼不已。
		可是在我看来，写作文是一种快乐，它是生活中的乐趣。一个新的题目出现了，我的小脑袋会跟着这个题目不停地转动，
		在我小时侯刚开始学写作文时，也曾经有过两眼望青天，不知如何下笔，脑袋里一片空白的经历。
	</p>
	<p>
		记得那是我上二年级的时候，老师让我们回家写一篇作文，题目自定。放学了，我闷闷不乐地回到了家里，一屁股坐在小书桌前发起了呆，一个半小时过去了，我才像挤牙膏一样挤出了一篇作文。我兴冲冲地跑进厨房，高兴地对妈妈说："我作业写完了，您看！"
		妈妈把我的作文拿来一看，什么也没说，只是让我休息。
	</p>
	<p>
		不一会，饭熟了，晚餐可真丰富呀，其中有我最爱吃的炒牛肉，我拿起筷子，往嘴里塞了一大块牛肉，哟，这是啥味呀，妈妈平时炒的牛肉可好吃了，今天怎么搞的，一点味也没有，真难吃！
		妈妈笑着对我说："怎么样，难吃吧？你今天写的作文就像这盘菜一样，一点味道都没有，一篇精彩的作文，就如同一道精美的菜肴，不仅好吃，还耐人寻味。"我迷惑不解地问道："妈妈，那我怎样才能写出精彩的文章呢？"妈妈听了，耐心地跟我讲解："要想写好作文，必须牢记这四个字------'两多三勤'。两多就是多阅读，多积累；三勤就是勤观察、勤思考、勤练笔。
		要是能坚持做好"两多三勤'，以后一定能写出精彩的文章来！"
	</p>
	</body>
</html>

2.2 浮动元素的清除

在浮动元素之后的元素中添加新的类别：cleared

css 复制代码

<style>
    .cleared
    {
        clear:left/right/both; /*停止哪一边的浮动元素*/
    }
</style>

该类别设置后，后续元素均变回正常布局。

2.3 浮动元素的父类处理

浮动元素默认父容器高度坍塌，即调整了子元素元素浮动靠左，默认换行靠左

后续元素操作依然会受到浮动元素的影响

html 复制代码

	.wrapper
	{
		background-color: #000000;
		color:white;
	}
	</style>
</head>
<html>
	<body>
	<h1>Welcome to my news</h1>
	<div class='wrapper'>
	<div class='box'>Float</div>
	<p>It's OKokokookokokokookokokoko
	kokokokokokokokokokokokokokokokok</p>
	</div>

解决方法是使用clearfix技巧

clearfix

当使用float属性让元素浮动时，父容器可能无法正确包含浮动的子元素，导致布局紊乱。

由于float嵌套在父类元素中，所以脱离正常布局，而父类仍然是正常布局。

想要将父类完全显示：

clearfix就是解决这种问题的技巧。

其原理在于，向包含浮动内容及其本身的盒子后方插入一些新的生成内容，并将生成的内容用于清除浮动效果。

css 复制代码

.wrapper::after /*最后进行添加*/
{
    clear:both;
    display:block; 
    content:'';     /*没有内容填充*/
}

html 复制代码

	.wrapper::after
	{
		content:'';
		clear:both;
		display:table;
	}
	</style>
</head>
<html>
	<body>
	<h1>Welcome to my news</h1>
	<div class='wrapper'>
	<div class='box'>Float</div>
	<p>It's OKokokookokokokookokokoko
	kokokokokokokokokokokokokokokokok</p>
	</div>