001-CSS
一、元素类型（块和行内）
1.块元素
块元素在页面中以区域块的形式出现，它们通常被用来创建页面中的结构和布局，每个块元素通常都会独自占据一整行或多个整
行、可以对其设置宽度、高度、对齐等属性。并且可以包含其他块元素或行内元素。此外，块元素还可以用来创建网页中的一些特殊效果，如弹出框、模态框等。
常见元素有：
h标签、p标签、div标签、列表标签（ul标签、ol标签、li标签）等，其中div标签是最典型的块元素。
2.行内元素
行内元素也称为内联元素或内嵌元素，是指在HTML中用来定义文本或者图片等内容的标签， 一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。因此适合用于排版文本、链接和图像等内容
常见的行内元素有 strong标签、b标签、em标签、i标签、del标签、s标签、ins标签、 u标签、a标签、span标签、img标签等， 其中 span 标签是最典型的行内元素。这些标签可以组合使用，形成更加复杂的结构和样式。
3.块元素和行内元素的转换
使用display属性对元素的类型进行转换。
常用的display属性值及含义如下：
- block：元素将被显示为块级元素，即独占一行，可以设置宽度、高度、内外边距等属性。
- inline：元素将被显示为行内元素，即与文本在同一行，不可设置宽度、高度、上下内外边距等属性。
- inline-block：元素将被显示为行内块级元素，即与文本在同一行，可以设置宽度、高度、内外边距等属性。
- none：元素将不被显示，但仍占据HTML文档中的位置和空间。
- flex：元素将被显示为弹性盒子，可以通过设置弹性盒子属性来控制子元素的排列方式。
- grid：元素将被显示为网格容器，可以通过设置网格容器属性来控制子元素的排列方式。
- table、table-cell、table-row等：元素将被显示为表格元素，可以通过设置表格属性来控制子元素的排列方式。
二、定位
1.CSS有三种基本定位机制：
·普通文档流：普通文档流中元素的位置由元素在HTML中的位置决定
·浮动
·定位
1.块元素之间的垂直距离是由元素的垂直外边距计算出来的。
2.行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整各框之间的间距。
3.由一行形成的水平框称为行框，行框的高度足以容纳所包含的所有行内框，设置行高可以增加这个框的高度。
2.定位的含义是：
允许定义某个元素脱离其原来在普通文档流应该出现的正常位置，而是设置其相对于父元素、某个特定元素或浏览器窗口本身的
位置。利用定位属性，可以建立列式布局，将布局的一部分与另一部分重叠，这种方法可以完成原来需要使用多个表格才能完成的任务，这种使用CSS定位的好处是可以根据浏览器窗口的大小进行内容显示的自适应。
3.通过使用定位属性(position)
可以选择4种不同类型的定位，但这会影响元索的显示位置定位属性的取值可以是
static (静态定位)、relative (相对定位)、absolute (绝对定位)、fixed(固定定位)。
- 静态定位
静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性(top、 bottom、left或right)来改变元素的位置。
<!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{
border: solid 5px blue;
text-align: right; /* 右对齐 */
width: 110px;
height: 20px;
}
</style>
</head>
<body>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>
</html>
- 相对定位
相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素
的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。
<!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{
border: solid 5px blue;
text-align: right; /* 右对齐 */
width: 110px;
height: 20px;
}
p.relative{
position: relative; /*选定元素为相对定位*/
top: 20px;
left: 50px;
background: blue;
color: white;
}
</style>
</head>
<body>
<p>hello world</p>
<p class="relative">hello world</p>
<p>hello world</p>
</body>
</html>
- 绝对定位
绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位
并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#box{
theight: 200px; /*块元素高度为200像素*/
width: 300px;
background: red;
position: relative; /*块元素使用相对定位*/
margin: 0 auto; /*块元素自动居中*/
}
#box p{
text-align: center;
border: solid 5px blue;
width: 100px;
height: 15px;
background: pink;
}
#box p.absolute{
background: yellow;
position: absolute; /* 使用绝对定位方式*/
top: 10px;
left: 40px;
}
</style>
</head>
<body>
<div id="box">
<p>hello world</p>
<p class="absolute">hello world</p>
<p>hello world</p>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/xiaogang1226/article/details/142763394
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！