章十七、CSS —— 选择器、标签分类、display、div和span、盒子模型、文档流、浮动、定位

三木几

于 2024-06-02 17:37:01 发布

阅读量747

点赞数 17

文章标签： css 前端

本文链接：https://blog.csdn.net/king_faner/article/details/139217215

版权

一、 css概述

级联样式表（Cascading Style Sheets）简称CSS

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

● 关系

HTML是网页内容

CSS定义页面的样式

二、基本语法

● 行内样式表

行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

CSS<br/>
		 
		 <a href=""><font color="red">百度</font></a>
		 <a href="" style="color:red;font-family: 楷体;">新浪微博</a>

● 内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				color: green;
				font-size: 24px;
				font-family: 楷体;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<!-- 
		 CSS 是一种样式表语言，为html标签修饰定义外观，分工不同
		 html是网页的内容
		 css是网页的样式
		 -->
		 CSS<br/>
		 
<!-- 		 <a href=""><font color="red">百度</font></a>
		 <a href="" style="color:red;font-family: 楷体;">新浪微博</a> -->
		 
		 统一修饰<br/>
		<a href="" class="p1">新浪</a>
		 <a href="" class="p1">新浪</a>
		 <a href="" class="p1">新浪</a>
		 <p class="p1">三生三世</p>
		 
	</body>
</html>

● 外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

● 行内、内嵌和外部的区别

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制整个站点（多）

三、选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

● 常用的选择器

• 标签选择器

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 { }

• 类选择器

类选择器：通过标签的class属性值选中一组标签

语法：.class属性值{ }

• id 选择器

id 选择器：通过标签的id属性值选中唯一的一个标签

语法： #id属性值 { }

• 通配选择器

通配选择器:可以用来选中页面中的所有的标签

语法：*{ }

四、文本

● color：字体颜色

● font-size：字体大小

● font-family：字体

● text-align：文本对齐

● text-decoration:line-through：定义穿过文本下的一条线

● text-decoration:underline：定义文本下的一条线

● text-decoration:none：定义标准的文本

● font-style: italic;斜体文本

● font-weight:字体粗细

● line-height:设置行高

● letter-spacing可以指定字符间距

● text-indent用来设置首行缩进

五、背景

● background-color背景颜色

● background-image背景图片

● background-repeat背景重复

● background-size背景尺寸

● background- position 背景位置

六、 CSS 列表

● CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

● list - style-image 将图象设置为列表项标志。

● list-style-position 设置列表中列表项标志的位置。

● list-style-type 设置列表项标志的类型。

● list-style 简写属性。

七、伪类

● CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

● 伪类的语法：

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				color:gold;
			}
			/* <!-- 当鼠标移入到对应标签上时,自动切换到此样式 --> */
			a:hover{/* 鼠标移入的状态 */
				color: red;
			}
			a:active{/* 被点击的状态 */
				color: blue;
			}
			/* 也可以直接伪默认样式改变触发结果 */
			.btn:hover{
				background-color: gold;
			}
			.btn:active{
				background-color: greenyellow;
			}
			input:focus{/* 为拥有键盘输入焦点的标签添加样式 */
				background-color: aqua;
			}
			
		</style>
	</head>
	<body>
		<a href="">百度</a><br />
		<input type="button" class="btn" value="保存"><br />
		<input type="text" class="">
		
	</body>
</html>

八、透明

定义透明效果的属性是 opacity

opacity 属性设置标签的不透明级别值为 1。

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				opacity: 0.5; /* 透明度为0.5 */
			}
			img:hover{ /* 移入后透明度改变 */
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<img src="img/baidu.ico" alt="" />
	</body>
</html>

九、块级、行级、行级块标签

● 块级标签

块级标签：无论内容多少都会独自占据一行的。（可以设置宽高）

例如<p>、<h1>、<ul>、<ol>、<hr/> 等

有一个纯净的块标签：<div>

<!-- 块级标签（无论内容多少 都会独自占据一行的）：
		例如<p>、<h1>、<ul>、<ol>、<hr/> ,div>等 -->
		<!-- 块标签是可以设置宽高 -->
		<p>无论内容都占一行</p>
		<p style="height:200px;width:200px">主要用于网页布局</p>
		<!-- 纯净的，没有任何默认修饰的块标签 -->
		<div style="margin-top:10px;">div是一个纯净版的块级标签</div><!-- margin-top:间距 -->

● 行级标签

行级标签：只占自身大小的标签，不会占一行。（无法设置宽高）

例如<font>、<b>、<i>、<a> 等

还有一个纯净的行标签：<span>

<!-- 行级标签（只占自身大小的标签，不会占一行）：
		例如<font>、<b>、<i>、<a> 等 -->
		<a style="">主要用于网页的文字修饰</a>
		<a style="width:200px;height:200px">百度</a><!-- 只占内容大小，设置宽高也无效 -->
		<a>aaa</a><b>b标签</b>
		<br/>
		<!-- 纯净的，没有任何默认修饰的行标签 -->
		<span style="text-decoration:underline">span是纯净的行标签</span>

● 行级块标签

行级块标签：既不占一行，又可以设置宽高的标签

例如 <input/> <img> 等

		<!-- 行级块标签：例如 <input/> <img> 等 -->
		<input type="text" style="width:200px"/>
		<img src="img/baidu.ico" alt="" />

十、 Display

通过display样式可以修改标签的类型。

可选值：

block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 通过display样式可以修改标签的类型。
		
block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失） 
		-->
		<b style="display: block;">b原本为行标签</b>
		<b>通过改变display为block可以改变标签类型</b>
		<br /><br />
		<div style="display: inline;">div原本为块标签</div>
		<div style="display: inline;">通过改变为inline变为行标签</div>
		<br /><br />
		<div style="display:inline-block">inline-block改变为行级块标签</div>
		<br /><br />
		<div style="display:none">隐藏块标签</div><!-- 不显示也不可被选中 -->
		<span style="display:none">隐藏行标签</span>
		
	</body>
</html>

十一、 div和span

● div标签

div是块级标签，可以放置任何标签。

div没有任何附加功能，给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

		<div>div是一个纯净版的块级标签</div>

● span标签

span是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span标签被用来修改选中文档中的文字。

		<span style="text-decoration:underline">span是纯净的行标签</span>

十二、盒子模型(box-model)

● CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。

● 如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。

● 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

● 一个盒子我们会分成几个部分

–内容区(content)

–内边距(padding)

–边框(border)

–外边距(margin)

● 内容区

内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。

通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。

width和height属性适用于块标签。

● 内边距

内边距指的就是标签内容区与边框以内的空间。

内边距会影响整个盒子的大小。

使用padding属性来设置标签的内边距。

例如：

padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px

这样会设置标签的上、右、下、左四个方向的内边距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				background-color: azure;
			}
			.box{
				height:100px;
				width:100px;
				background-color: lightskyblue;
				/*设置内边距 */
				/* padding-top:10px;--上
				padding-bottom: 10px;--下
				padding-left--左
				padding-right--右
				 */
				/* 或 */
				padding:10px;/*全部*/
				/* padding:10px 20px 30px 40px; */上右下左(顺时针)
			}
		</style>
	</head>
	<body>
		<h1 align="center">网页</h1>
		
			<h3>●  内容区</h2>
			<p>
			内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
			<br />
			通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
			<br />
			如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
			<br />
			width和height属性适用于块标签。
			<br />
			</p>
			
			<h3>●  内边距</h2>
			<p>
			内边距指的就是标签内容区与边框以内的空间。
			<br />
			内边距会影响整个盒子的大小。
			<br />
			使用padding属性来设置标签的内边距。
			<br />
			例如：<br />
			
			padding-left:10px;
			<br />
			padding-right:10px;
			<br />
			padding:10px 20px 30px 40px
			<br />
			这样会设置标签的上、右、下、左四个方向的内边距。<br />
			
		</p>
		<!-- 内容区 -->
		<div>这是正常的</div>
		<div>这是正常的</div>
		<div class="box">仅仅只是设置内容区的大小</div>
		<div>而不是标签的大小</div>
		
		<!-- 外框 -->
		
		
		<!-- 外边距 -->
		
		
	</body>
</html>

● 边框

可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框可以设置样式：

dotted（点线） dashed（虚线） solid（实线） double（双线） groove（槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

注：如果设置了边框之后，发现边框的粗细不符合实际设计，请看这篇css_解决浏览器显示盒子的实际像素和你设置的像素不一致的问题

● 外边距

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的。

margin-top/right/bottom/left

margin的值可以为负值。

margin的值还可以为 auto（自动），设置外边距为最大值，当将左右外边距设置为 auto时，浏览器会将左右外边距设置为相等（即随着网页大小变化保持居中）

垂直设置为auto时值为0，所以水平居中也可以简写为 margin:0 auto

● 外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				/* 去掉body标签的外边距 */
				/* margin: 0%; */
				
			}
			.box{
				height: 100px;
				width: 200px;
				background-color: aqua;
				
				
				/* 边框 */
				
				/* 				
				设置上边框
				border-top-width: 2px;
				border-top-color: red;
				border-top-style: solid; */
				border: 4px red solid;
				
				/* 为边框设置为圆角 */
				border-radius: 25px;
				
				/* 外边距 */
				margin-left: auto;/*设置左侧的外边距自动*/
				margin-right: auto;/*设置右侧的外边距自动*/
				/* 当两侧都设置自动时，内容会随着网页变化保持居中 */
				
			}
			.txt{
				/* 500*50 的框 */
				height: 26px;
				width: 466px;
				padding: 10px 15px;
				border: 2px gainsboro solid;
				/* 圆角 */
				border-radius: 8px;
			}
			.txt:hover{
				border: 2px gray solid;
			}
			.txt:focus{
				border: 2px black solid;
			}
			.ZhuMing{
				size:26px;
				padding: 2px;
			}
		</style>
	</head>
	<body>
		<h1 align="center">边框和内边距</h1>
		<div class="box">
			内容
		</div>
		<span class="ZhuMing">用户:</span>
		<input class="txt" type="text" display="inline">
		<br />
		<span class="ZhuMing">密码:</span>
		<input class="txt" type="password">
	</body>
</html>

十三、清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding都去掉。

*{

margin: 0;

padding: 0;

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0%;
				padding: 0%;
			}
		</style>
		
	</head>
	<body>
	</body>
</html>

十四、文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。

这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

这个时候就需要浮动和定位来打破默认的文档流规则。

十五、浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。 使用float属性。

可选值：

        none ：不浮动

        left ：向左浮动

        right ：向右浮动

当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

● 当一个标签浮动以后，其下方的标签会上移

浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,这时不会再影响父标签的高度 , 也就是浮动标签不会撑开父标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				background-color: azure;
			}
			.nav{
				background-color: aquamarine;
				float: left;
				padding: 10px 30px;
				border: 2px grey solid;
				border-radius: 8px;
			}
			
		</style>
	</head>
	<body>
		<h1 align="center">浮动</h1>
		<p> 
		所谓浮动指的是使标签脱离原来的文档流，<br />
		在父标签中浮动起来。<br />
		使用float属性。 <br />
		可选值：<br />
        none ：不浮动<br />
        left ：向左浮动<br />
        right ：向右浮动<br />
当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。
		</p>
		
		<div class="nav">新闻首页</div>
		<div class="nav">体育新闻</div>
		<div class="nav">科技前沿</div>
		<div class="nav">娱乐快报</div>
		<div>本应该在下一行的</div>
		<div>这是一行的</div>
		<div>这是下一行的</div>
	</body>
</html>

● 清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				background-color: aquamarine;
				float: left;
				padding: 10px 30px;
				border: 2px grey solid;
				border-radius: 8px;
				margin-left: auto;/*浮动后自动居中就不能用了*/
				margin-right: auto;/*这个时候就需要盒子套盒子，使外面的盒子居中*/
			}
			.nav-box{
				/* 512*45 */
				width:512px;
				height:55px;
				padding: 5px;
				margin:auto;
				background-color: beige;
			}
			.body-box{
				width: 800px;
				height:600px;
				margin:auto;
			}
			.body-left{
				float: left;
				background-color: red;
				height:400px;
				width: 200px;
			}
			.body-center{
				float: left;
				background-color: yellow;
				height:400px;
				width: 400px;
			}
			.body-right{
				float: left;
				background-color: blue;
				height:400px;
				width: 200px;
			}
			.body-bottom{
				clear: left;
				background-color: chartreuse;
				height:200px;
				width: 800px;
			}
			.Zi{
				color: green;
				font-size: 36px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
			<div class="nav-box">
				<div class="nav">新闻首页</div>
				<div class="nav">体育新闻</div>
				<div class="nav">科技前沿</div>
				<div class="nav">娱乐快报</div>
			</div>
			<div  class="body-box">
				<!-- 1825 686 -->
				<div class="body-left">
					<div class="Zi">左</div>
				</div>
				<div class="body-center">
					<div class="Zi">中</div>
				</div>
				<div class="body-right">
					<div class="Zi">右</div>
				</div>
				<div class="body-bottom">
					<div class="Zi">底</div>
				</div>
			</div>
			
	</body>
</html>

十六、 CSS 定位(Position)

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

● 相对定位(relative)

相对定位是一个非常容易掌握的概念，相对于它的起点进行移动，移动后原来的位置还被占用。

通过position:relative; 开启相对定位， left、right、top、bottom四个属性来设置标签的偏移量。

相对定位的特点

当标签的position属性设置为relative时，则开启了标签的相对定位

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height:100px;
				position: relative; /* 开启相对定位 */
				/* 只开启相对定位，不设置偏移值，则无效果 */
				left:100px;/* 相对定位是相对于它自身进行偏移的，不会脱离文档流 */
			}
			.box2{
				background-color: blue;
				width: 100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			div1
		</div>
		<div class="box2">
			div2
		</div>
	</body>
</html>

● 绝对定位(absolute)

绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。

可以通过position: absolute; 开启绝对定位，left、right、top、bottom四个属性来设置标签的偏移量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height:100px;
				position: absolute; /*开启绝对定位后，立即脱离文档流 */
				left:100px;
				top:100px;
				/* 绝对定位默认情况的参照物：
				 离他最近的，开启了定位的父级标签，
				 如果所有父级标签都没有开启定位，则以浏览器的边框为参照物
				 */
			}
			.box2{
				background-color: blue;
				width: 100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			div1
		</div>
		<div class="box2">
			div2
		</div>
	</body>
</html>

绝对定位的特点

1、开启绝对定位，会使标签脱离文档流

2、开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

3、绝对定位是相对于离他最近的开启了定位的父级标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）如果所有的父级标签都没有开启定位，则会相对于浏览器窗口进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				background-color: red;
				width: 100px;
				height:100px;
				position: absolute; /*开启绝对定位后，立即脱离文档流 */
				left:100px;
				top:100px;
				/* 绝对定位默认情况的参照物：
				 离他最近的，开启了定位的父级标签，
				 如果所有父级标签都没有开启定位，则以浏览器的边框为参照物
				 */
			}
			.box2{
				background-color: blue;
				width: 100px;
				height:100px;
			}
			.fbox1{
				width: 200px;
				height:200px;
				background-color: antiquewhite;
				position: relative;/* 必须开启定位，且一般开启相对定位 */
			}
		</style>
	</head>
	<body>
		<div class="fbox1">
			<div class="box1">
				div1
			</div>
		</div>
		<div class="box2">
			div2
		</div>
	</body>
</html>