这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
布局元素类型转化
块元素
块元素在页面中以区域块的形式出现，每个块元素通常都会独自占据一整行或多个整行、可以对其设置宽度、高度、对齐等属性。常见:元素有<h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
行内元素
行内元素也称为内联元素或内嵌元素， 一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、 <a>、<span>等， 其中<span>标记是最典型的行内元素。
块元素与行内元素的转换
使用display属性对元素的类型进行转换。 display属性常用的属性值及含义： （1）inline：此元素将显示为行内元素(行内元素默认的display属性值)。 （2）block:此元素将显示为块元素(块元素默认的display属性值)。 （3）inline- block: 此元素将显示为行内块元素，可以对其设置宽度、高度和对齐等属性，但是该元素不会独占一行。 （4）none:此元素将被隐藏，不显示，也不占用页面空间，相当于垓元素不存在。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<style type="text/css">
p{
background-color: pink;
display: inline;
}
ol{
background-color: red;
display: inline;
}
span{
background-color: yellow;
display: block;
}
i{
background-color: #cff;
}
div{
background-color: #ffc;
display: inline;
}
</style>
</head>
<body>
<p>p--标记 ------------块元素</p>
<ol>ol--标记----------块元素</ol>
<span>span标记---------行内元素</span>
<i>i标记---------行内元素</i>
<div>div标记--------块元素</div>
</body>
</html>
定位
定位通过属性position进行定义，分别为static (静态定位)、relative (相对定位)、absolute (绝对定位)、fixed(固定定位)。
- 静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性( top、 bottom、left或right )来改变元素的位置
- 相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。
- 绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。
- 固定定位是绝对定位的一种特殊形式， 是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
定位中z-index的使用
多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。 z-index属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为数，则离用户更近，为负数则表示离用户更远。即拥有z-index属性值大的元素放置顺序在上。 注意：元素可拥有负的z-index属性值、而且z-index仅能在绝对定位元素(例如position:absolute;)上起作用。
代码实例
div{
width: 100px;
height: 100px;
position: absolute; /*使用绝对定位，z-index才起作用*/
top: 0px;
left: 0px;
background: yellow;
z-index: 2;
}
#two{
left: 10px;
top: 10px;
background: gray;
z-index: 1;
}
#three{
top: 20px;
left: 20px;
background: pink;
z-index: 0;
}
效果图如下（z-index的数值越大，呈现的越靠前）
浮动
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。
浮动float
在CSS中， 通过float属性可以实现元素的浮动，而且可以定义是向哪个方向浮动。 在CSS中任何元素都可以浮动，开且浮动元素会生成一个块级框，而不论本身是何种元素。
浮动clear
clear属性规定元素的哪一侧不允许出现浮动元素。在CSS中是通过自动为清除元素(即设置了clear属性的元素)增加上外边距实现的。
简单来说就是当前div元素允许其他元素的float：left覆盖到div的区域上面
溢出与剪切
- visible: 当开发人员将矩形对象的overflow属性设置为visible时， 如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之外显示完整的子矩形对象。
- hidden:当开发人员将矩形对象的overflow属性设置为hidden时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会显示内容区域之内的子矩形对象，超出内容区域的则不显示。
- seroll: 当开发人员将矩形对象的overflow属性设置为scroll时， 如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象，并且显示预设滚动条;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能够通过滚动条浏览完整的子矩形对象。
- auto: 当开发人员将矩形对象的overflow属性设置为auto时， 如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能够通过滚动条浏览完整的子矩形对象。
