2020年2月15号–CSS定位与布局学习笔记（五）
- display属性
display: block
网页上的每个元素都是一个盒模型。display属性决定了盒模型的行为方式。block(块元素)是占用最大可用宽度的元素，前后有换行符。
以下示例中的样式规则将内联<span>元素显示为块级元素。
<span>First w3cschool.</span>
<span>Second w3cschool.</span>
<span>Third w3cschool.</span>
<span>Fourth w3cschool.</span>
<span>Fifth w3cschool.</span>
span {
display: block;
}
display: inline
inline元素只占用尽可能多的宽度，并不强制换行。
设置元素的display属性只会改变元素的显示方式，而不会改变元素的类型。
所以，带有display: block的内联元素不允许在其中包含其他块元素。
display:none
display:none 隐藏一个元素，所以它不占用任何空间。 该元素将被隐藏，在页面显示时不会展现出来，就好像该元素不存在一样。
display还有很多其他的参数值，比如list-item，table，table-cell，table-column，grid等等。
visibility属性
visibility属性用于指定元素是可见的还是隐藏的。 最常见的值是visible和hidden。
可以通过将display属性设置为“none”或者将visibility属性设置为“hidden”来隐藏元素。
注意，这两种方法会产生不同的结果：
visibility:hidden隐藏了一个元素，但是它仍然占据与之前相同的空间。 该元素将被隐藏，但仍然会影响布局：
HTML代码：
<h1>w3cschool</h1>
<div class="hidden">
我被设置了visibility: hidden
</div>
<p>
上方div的位置变成了空行，因为
div元素被设置了visibility: hidden
</p>
CSS代码：
div.hidden {
visibility: hidden;
}
display:none隐藏一个元素，没有为该元素保留一个位置。
将visibility: hidden改为display:none会产生以下效果：
div.hidden {
display: none;
}
2. position属性
position属性的值可以为：
absolute（绝对定位）
fixed（固定定位）
relative（相对定位）
static（默认值，无定位）
inherit（继承父级定位）
position:static (静态定位)
HTML元素默认为静态。 静态定位元素总是按照页面的正常流动进行定位。
HTML代码：
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p class="position_static">我用了静态定位</p>
CSS代码：
p.position_static {
position:static;
top: 30px;
right: 5px;
color: red;
}
静态定位元素不受top, bottom, left, 和right属性的影响。
position:fixed（固定定位）
能使具有固定位置的元素相对于浏览器窗口被定位，并且即使窗口被滚动也不会移动。
可以使用top, right, bottom, 和left的一个或多个属性来指定位置。
position:absolute（绝对定位）
生成绝对定位的元素，相对于static定位（默认定位值，即没有定位）以外的第一个父元素进行定位。
可以使用top, right, bottom, 和left的一个或多个属性来指定位置。
CSS代码：
p.position_fixed {
position: fixed;
top: 30px;
right: 5px;
color: red;
}
fixed参数能把元素从正常的顺序中拉出。可以无视其他元素的定位。 设置了fixed的元素可以重叠在其他元素上。
position:relative （相对定位）
元素的定位是相对其正常位置。
可以使用top, right, bottom, 和 left的属性来指定呈现的元素将如何移动。
HTML代码：
<html>
<body>
<p>w3cschool</p>
<div>
<span>w3cschool</span>
<span>w3cschool</span>
<div>
</body>
</html>
CSS代码：
p {
width: 350px;
border: 1px black solid;
position: fixed;
}
span {
background: green;
color:white;
position: relative;
top: 150px;
left: 50px;
}
relative定位的元素的内容可以移动并与其他元素重叠，但是元素的保留空间在正常流程中仍然保留。
在table中设置position:relative是无效的。
absolute绝对定位
绝对位置元素相对于具有非静态位置的第一个父元素进行定位。 如果找不到这样的元素，则针对的是。
绝对定位的元素将从正常流程中移除。 文档和其他元素的行为像绝对定位的元素不存在。
- z-index属性
z-index属性指定元素的堆栈顺序（通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面）。
HTML代码：
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="blue">blue (w3cschool)</div>
<div class="red">red (w3cschool)</div>
</body>
</html>
CSS代码：
.blue {
background-color: #8EC4D0;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
}
红框与蓝框重叠，红框会位于蓝框上方，因为红框是后加载的。 设置z-index属性可以改变这个顺序。
指定z-index属性
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="blue">blue (w3cschool)</div>
<div class="red">red (W3c School)</div>
</body>
</html>
.blue {
background-color: #8EC4D0;
position: relative;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
z-index: 3;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
z-index: 2;
}
z-index仅适用于定位元素（position:absolute，position:relative 或 position:fixed）。
- float属性
使用CSS中float，可以将元素向左或向右推，以允许其他元素环绕它。
float通常与图像一起使用，但在处理布局时也很有用。
float属性的值是left，right，和none。
left，right会使元素向左或者向右浮动。none能确保元素不会进行浮动。
HTML代码：
<p><img src="https://7nsts.w3cschool.cn/images/w3c/header-logo.png" />
This paragraph has an image that is floated to the <strong>right.</strong>
It is highly recommended to add a margin to images so that the text does
not get too close to the image. If you want your text to be easily read, you
should always add a few pixels between words and borders, images,
and other content.
</p>
CSS代码：
img {
float: right;
}
- 清除float
元素设置了float属性后会使后面的元素都受其影响，将环绕在其周围。为了避免这种情况，请使用clear属性。
clear属性指定某个元素不受其他设置了float属性的元素的影响。
HTML代码：
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
这段落在div元素之上
不受浮动属性的影响。
<br /><br />
<div class="floating">
<img src="https://7nsts.w3cschool.cn/images/w3c/index-logo.png" />
</div>
这段落在div元素之后
受浮动属性的影响。
<br /><br />
<div>
这一段也是在div元素之后
受浮动属性的影响。
</div>
<br /> <br />
</body>
CSS代码：
.floating {
float: right;
}
- 使用clear属性
clear属性可以使用right，left和both来指定某一个元素不受其他浮动元素的影响。
默认值是none，它允许在两边都有浮动元素。
HTML代码：
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
该段落位于div上方，不受div的float属性影响。
<br/><br/>
<div class="floating">
<img src="https://7nsts.w3cschool.cn/images/w3c/index-logo.png" />
</div>
该段落位于div下方，受到div的float属性影响。
<br/>
<div class="clearing">
该段落由于清除了float，所以不受div的float属性影响。
</div>
<br/>
</body>
</html>
CSS代码：
.floating {
float: right;
}
.clearing {
clear: both;
}
2. overflow属性
如前所述，页面上的每个元素都是一个盒子。如果没有设置盒子的高度，那么盒子的高度将随着所需的内容的增大而变大。
HTML代码：
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div>
这个文本在div元素里面，它有一个蓝色的
背景颜色，并浮动到左侧。 我们设定一个具体的
div元素的高度和宽度，正如你所看到的，这样会导致文本内容溢出。
</div>
</body>
</html>
CSS代码：
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
}
3. overflow属性值
overflow属性有四个值：visible（默认值），scroll，hidden和auto。
scroll值能阻止内容溢出，但会增加出滚动条，通过拉动滚动条可以浏览所有内容。
CSS代码：
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
overflow: scroll;
}
4. auto 和 hidden值
auto - 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。
hidden - 隐藏掉内容溢出的部分，溢出的内容将不可见。
CSS代码：
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
overflow: hidden;
}
** overflow的默认值是visible**
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
