目录
- CSS布局常见元素
- display
- visibility
- float
- 常见的float浮动布局
- 清除浮动clear属性
- 定位postion属性
- position:static
- position:relative
- position:absolute
- position:fixed
- position:sticky
CSS布局常见元素
display
display 属性规定元素应该生成的框的类型。
每个HTML元素都有属于自己的默认display属性值。
可以通过display去更改HTML 行内元素（inline element） 和 HTML 行内元素（inline element） 的默认值。 在我之前的HTML文档介绍中有解释两者的区别。
display:inline;
通过该属性值可以让块级元素以行内元素显示。
display:block;
通过该属性值可以让行内元素以块级元素显示。
例如：
<style>
div {
display: inline;
background-color:lightblue;
}
span{
display:block;
background-color:lightcoral;
width: 150px;
height: 150px;
}
</style>
<body>
<div>div1:是块级元素，但是现在以行内元素显示</div>
<div>div2:是块级元素，但是现在以行内元素显示</div>
<hr>
<span>span是行内元素，但是现在以块级元素显示</span>
</body>
行内元素：
-
不可以设置宽高度
-
不可以设置上下 margin
-
可以设置左右 margin
但如果将行内元素设置为块级元素，上面的不可以就可以了。
display还有以下常用属性值
- none 此元素不会被显示。
- flex 此元素将显示为弹性盒容器。
- grid 此元素将显示为栅格容器。
- inline-block 此元素将显示为行内块元素。
使用inline-block需要注意的是
-
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top
-
需要设置每一列的宽度
-
如果 HTML 源代码中元素之间有空格，那么列与列之间会产生空隙
flex和grid比较重要，后面再写，待续。
visibility
visibility 属性规定元素是否可见。
它有以下属性值
- visible 默认值。元素是可见的。
- hidden 元素是不可见的。
display:none 和 visibility:hidden都可以让元素不可见，但是是有区别的：
-
display:none 元素消失，在页面中不占据空间
-
visibility:hidden 元素消失，在页面中仍占据空间
<div>
<strong>给元素设置display:none样式</strong>
<p>A元素</p>
<p style='display:none;'>B元素</p>
<p>C元素</p>
</div>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<p>A元素</p>
<p style='visibility:hidden;'>B元素</p>
<p>C元素</p>
</div>
float
浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置。
属性值有
- none 默认值。元素不浮动。
- left 元素向左浮动。
- right 元素向右浮动。
常见的float浮动布局
- 两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双列布局</title>
<style type="text/css">
.left {
width: 50%;
background-color: pink;
height: 400px;
float: left;
box-sizing: border-box;
padding: 20px;
}
.right {
width: 50%;
background-color: lightblue;
height: 400px;
padding: 20px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
- 三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双列布局</title>
<style type="text/css">
div {
height: 300px;
}
.left {
background-color: pink;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
}
.middle {
background-color: cornsilk;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
}
.right {
background-color: lightblue;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>
其中浮动是讲究一个先来后到的顺序。
清除浮动clear属性
浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响
可以使用clear属性消除浮动。
- left：清除左侧的浮动影响
- right：清除右侧的浮动影响
- both：清除左右两侧的浮动影响
设置 float会影响其他相邻元素；
设置 clear 只会影响自身，不会对其他相邻元素造成影响。
定位postion属性
position 属性规定元素的定位类型。
position:static
static 是 position 属性的默认值。
- static 定位所导致的元素位置，是浏览器自主决定的，所以这时 top、bottom、left、right 这四个属性无效。
position:relative
相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。
- 搭配 top、bottom、left、right 这四个属性一起使用
<style type="text/css">
.top{
background-color: lightblue;
width: 100px;
height: 100px;
}
.bottom{
background-color: lawngreen;
width: 150px;
height: 150px;
/* position: relative;
top: 20px;
left: 30px; */
}
</style>
<body>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
当给代码添加定位代码时,效果为
position: relative;
top: 20px;
left: 30px;
当给top元素加float:left;让top元素脱离正常文档流时，bottom就以正常的文档流位置进行定位偏移。
.top{
background-color: lightblue;
width: 100px;
height: 100px;
float: left;
}
.bottom{
background-color: lawngreen;
width: 150px;
height: 150px;
position: relative;
top: 20px;
left: 30px;
}
position:absolute
absolute 表示，相对于上级元素（一般是父元素）进行偏移，定位基点是父元素。
重要的限制条件：
定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html
- 搭配 top、bottom、left、right 这四个属性一起使用。
修改上面的代码,去除top浮动属性，并且将bottom的position属性值由relative改成absolute。
.top{
background-color: lightblue;
width: 100px;
height: 100px;
}
.bottom{
background-color: lawngreen;
width: 150px;
height: 150px;
position: absolute;
top: 20px;
left: 30px;
}
效果为
absolute 定位的元素会被"正常页面流"忽略。
-
在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
-
绝对定位的元素的位置是相对于最近的父元素而言的
-
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index 的值越高，它显示的越在上层
- z-index属性默认值是0；
position:fixed
fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
position:sticky
sticky 跟前面四个属性值都不一样，它会产生动态效果。
- 一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。
- 必须搭配top、bottom、left、right这四个属性一起使用，不能省略。
可以用这个属性做到手机的电话簿字母处的效果。
