文章目录
1. 文档流
内联元素从左向右 块级元素从上向下 各占一行
2. 定位
position属性,有6大类
- static 默认设置,就是相对于文档流位置
- relative 相对定位,是相对于原来位置移动使用,还在文档流中
- absolute 绝对布局,是相对于最近那个position不为static为参照点布局,脱离文档流
- fixed 相对于窗口固定,脱离文档流
- sticky 它就相当于relative和fixed混合。最初会被当作是relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会被当成fixed定位,相对于视口进行定位。demo地址
3.盒模型
这是标准盒子模型,可以看到width的长度等于content的宽度;而当将box-sizing的属性值设置成border-box时,盒子模型的width=border+padding+content的总和。对于不同的模型的宽度是不同的。宽度默认的属性值是auto,这个属性值会使得内部元素的长度自动填充满父元素的width。
4.二栏布局
1.float + margin
边栏浮动,主栏留出相应的margin
<body>
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
<style>
.left{
width: 200px;
height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
</style>
2.绝对定位
左侧栏宽度固定并绝对定位在最左侧,右侧主栏设置一个margin-left为边栏的宽度
<body>
<div id = "main"></div>
<div id = "aside"></div>
</body>
<style>
#aside{
position:absolute;
left:0;
width:200px;
}
#main{
margin-left:200px;
}
</style>
3.flex布局
<div id="container">
<div id="aside"></div>
<div id="main"></div>
</div>
<style>
#container{
display:flex;
}
#aside{
flex:0 0 200px;
}
#main{
flex: 1 1;
}
</style>
5.三栏布局
1.绝对定位
左右侧栏分别用绝对定位固定在左侧和右侧,中间栏用margin-left和margin-right空出左右位置
2.浮动定位法
左侧栏和右侧栏向左和向右浮动,中间栏放在最后利用左右边距margin空出左右位置
3.圣杯布局(两边固定 中间自适应)
思想:
- 1.就是先预留左右区域,让三个div在中间的一块区域,
- 2.让他们都float起来,然后设置中间的div的width:100%,其他两个div会变到下一行
- 3.设置margin-left:-100%,让左栏浮到上面,右栏就会占据原理左栏的位置,设置margin-left:为负的右栏的宽,这样中间栏左右就被覆盖
- 4.再设置position:relative 让覆盖的部分出现
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现三栏水平布局之圣杯布局</title>
<style>
.wrap {
padding: 0 300px 0 200px;
}
.left,
.right,
.main {
min-height: 200px;
float: left;
/* 设置最小高度 */
}
.left {
background-color: green;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
background-color: red;
width: 300px;
margin-left: -300px;
position: relative;
right: -300px;
}
.main {
background-color: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.双飞翼布局
思想:与圣杯布局类似,就是多加了一个div,在左右把中间覆盖时,中间里的那个div设置margin来显示我们的内容,感觉比圣杯好
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现三栏布局之双飞翼布局</title>
<style>
.left,
.right,
.main {
float: left;
min-height: 130px;
}
.left {
background-color: red;
width: 200px;
margin-left: -100%
}
.main {
background-color: blue;
width: 100%;
}
.right {
background-color: green;
width: 300px;
margin-left: -300px;
}
.content {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
5.flex 布局
这个最好,简单易懂
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局实现两边宽度固定中间自适应的三列布局</title>
<style>
.wrap {
display: flex;
}
.main {
flex-grow: 1;
/* 自动适应 */
background-color: red;
}
.left {
flex-basis: 200px;
background-color: green;
order: -1;
/* 默认为0 值越小 越靠前 不然按从上到下解析 */
}
.right {
flex-basis: 300px;
/* flex-basis 为基准值,当其为0%时,有width也没用,这是总宽度就取决于flex-grow 所占据的值 */
background-color: hotpink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
小知识点
-
1.float的原始意义: 使文字环绕在图片周围,仅此而已。实现原理: float属性可以使图片(img)脱离文档流,但是它还占据正常文档流的文本空间,浮动后的图片可以浮在其他元素之上,但是图片不会遮挡文字,文字环绕在图片的周围。
-
2、float的2个属性①包裹性:添加了float属性的元素会自动加上一个“块级框”,即可以设置元素的宽高。 就float的包裹性而言,其实和display: inline-block;属性的效果是一样的。会在水平方向上排列,并且可以设置元素的宽高。唯一的区别就是:float是有方向性的,display: inline-block;是没有方向性的。②破坏性:float属性破坏元素的inline-box模型,使之没有line-height值(文字环绕图片、父级元素的高度塌陷 问题)