001-CSS

时间：2024-10-15 21:21:53

CSS

  • 一、元素类型（块和行内）
            • 1.块元素
            • 2.行内元素
            • 3.块元素和行内元素的转换
  • 二、定位
            • 1.CSS有三种基本定位机制：
            • 2.定位的含义是：
            • 3.通过使用定位属性(position)

一、元素类型（块和行内）

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>

相关文章