- 浮动
- 概念: 浮动就是让块级标签不独占一行
- 使用场景：让块级元素在排在一行
- 原理：让浮动的元素脱离标准文档流
清除浮动：
- 在浮动的元素后面添加一行多余标签，控制其样式为：
clear:both;- 给浮动的父级元素设置：
overflow: hidden;PS：该属性有两个作用，一个是超出部分隐藏，另一个是清除浮动。- 给浮动的父级元素设置伪类：
.wrapper:after {content: ''; display: block; clear:both;}
- 盒模型
概念：每个元素都是一个盒子，每个盒子都是以以下几部分组成，margin（外边距）+border（边框）+padding（内边距）+content（内容），备注：margin和padding是以border为依据进行参照，系统默认的外边距为
8px，但这不是确定的，有的浏览器会把浏览器边框线也计算进去。
- 布局方式
- 圣杯布局
- 属于三栏布局，三栏并排显示，左右两侧固定，中间自适应
左右两侧设置负margin值达到并排显示的目的- 如何保证中间部分内容不被遮挡：
首先给中间部分的容器设置左右padding，同时给左右侧的容器设置position: relative以及各自对应的left和right属性
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px;
}
.container {
overflow: hidden;
}
.left {
width: 200px;
height: 500px;
float: left;
background-color: #f00;
margin-left: -100%;
position: relative;
left: -400px;
}
.right {
width: 200px;
height: 500px;
float: left;
background-color: #0f0;
margin-left: -200px;
position: relative;
right: 400px;
}
.center {
width: 100%;
height: 500px;
float: left;
background-color: #00f;
padding-left: 200px;
padding-right: 200px;
}
</style>
</head>
<body>
<!--
圣杯布局，三栏，左右侧固定，中间自适应，并且保证
中间部分的内容放在文档流的前面，以确保优先渲染
三栏全部采用float，其中左右侧设置负margin达到
三栏并排显示
如何保证中间部分的内容不被遮挡：
中间部分给出padding-left和padding-right，
左右侧设置position:relative，以及left和right属性
保证左右侧位置不变，同时中间部分内容不被遮挡
-->
<div class="container">
<div class="center">内容</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>- 双飞翼布局
- 和圣杯布局有一部分很相似，同时采用相同的方式使得三栏并排显示
- 但是在处理中间部分内容不被遮挡的解决方案上，两者不一样，双飞翼采用在中间容器的内部再添加一个div容器包裹，然后给这个div设置左右margin值
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px;
}
.container {
width: 100%;
overflow: hidden;
}
.center, .left, .right {
float: left;
height: 500px;
}
.center {
width: 100%;
background-color: #00f;
}
.left, .right {
width: 200px;
}
.left {
margin-left: -100%;
background-color: #f00;
}
.right {
margin-left: -200px;
background-color: #0f0;
}
.main {
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<!--
双飞翼：
也属于三栏布局，左右侧固定，中间自适应
三栏采用float，左右侧采用设置负margin达到
三列并排显示
但是对于处理中间部分的内容不被遮挡的方式和
圣杯布局有所不同
双飞翼采用的是在中间的容器中添加一个div包裹
设置其margin-left和margin-right值
比起圣杯布局，多了一个div元素，但是少写了几个属性
-->
<div class="container">
<div class="center">
<div class="main">
中间
</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>- 两栏布局-左侧固定，右侧自适应
- 两栏布局-右侧固定，左侧自适应
- 三栏布局-左侧固定、中间自适应、右侧固定
- 三栏布局-左侧固定、中间固定、右侧自适应
- 三栏布局-左侧自适应、中间固定、右侧固定
- FC（Formatting Context）格式化上下文
- 概念：页面渲染中的一块区域
BFC（Block Formatting Context）块级格式化上下文 - 形成条件
- float不为none
- overflow为hidden、scroll、auto
- display为inline-block、table-cell、table-caption
- 定位元素，position为absolute、fixed
- 特性
- 内部的盒子在垂直方向上，一个个的排列
- 垂直方向上的最大距离为margin的最大值
- BFC区域不会与float元素发生重叠
- 计算BFC容器的高度时候，会把float元素的高度也计算在内
- BFC就是页面中的一块独立区域，内部的子元素不会影响到外部
- 验证特性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
.container {
width: 200px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
}
/* 解决外边距塌陷 */
.wrapper {
overflow: hidden;
}
.box1 {
width: 100%;
height: 30px;
background-color: #f00;
margin: 10px 0;
}
.box2 {
width: 100%;
height: 30px;
background-color: #00f;
margin:50px 0;
}
</style>
</head>
<body>
<div class="container">
<!-- 解决外边距塌陷 -->
<div class="wrapper>
<div class="box1">1</div>
</div>
<div class="box2">2</div>
</div>
</body>
</html>- 验证特性3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
.container {
width: 200px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
}
/* 这个时候如果不做任何处理，就会导致box2与
box1重叠，也就是box1会遮盖住box2 */
.box1 {
/* float也会触发BFC，使得box1变成一个独立的容器 */
float: left;
width: 20px;
height: 30px;
background-color: #f00;
}
.box2 {
width: 100%;
height: 50px;
background-color: #00f;
/* 添加这行代码会使得box2变成一个独立的容器，
触发BFC */
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
1
</div>
<div class="box2">
2
</div>
</div>
</body>
</html>- 验证特性4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
.container {
width: 300px;
background-color: #f00;
border: 1px solid rebeccapurple;
/* 触发BFC，变成一个独立的容器
计算BFC容器的高度时候，float元素的高度
也参与计算*/
overflow: hidden;
}
.box {
float: left;
width: 30px;
height: 59px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>- BFC的作用
- 解决margin重叠的问题（添加独立的BFC容器）
- 解决浮动的高度塌陷（给父级元素设置overflow: hidden）
- 解决侵占浮动元素的问题
IFC（行级格式化上下文）
- 形成条件
- font-size
- height
- line-height
- vertical-align
- IFC特性
- IFC的元素会在一行中从左到右的排列
- 在一行上所有的元素会形成一个区域行框
- 行框的高度包含框的高度，高度为内部最高元素的高度
- 浮动的元素不会再行框中，会缩短行框的宽度
- 行框的宽度容纳不下子元素的时候，子元素会在下一行显示，同时形成一个新的行框
- 行框内的元素遵循text-align和vertical-align
- 容器的高度height = line-height + vertical-align
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
