CSS样式中选择器+盒子模型+定位+浮动

一、选择器

选择器，选择你所需要修饰的HTML元素

1.通配符选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
						/*
			 * 通配符选择器：选择html文档中所有的标签
			 */
			
			*{
				color: red;
			}
		style>
	head>
	<body>
				
		<h1>一级标签h1>
		<h2>二级标签h2>
		<h3>三级标签h3>
		<h4>四级标签h4>
		<h5>五级标签h5>
		<h6>六级标签h6>
		
		<p>用真心待她人p>
		<p>做美丽的自己p>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.标签选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			/*
			 * 标签选择器
			 */
			p{
				color: red;
			}
			
			/*
			 * class选择器
			 * 注意：以.开头
			 */
			.myclass{
				color: green;
			}
			
			/*
			 * id选择器
			 * 注意：
			 * 		1.以#开头
			 * 		2.潜规则：id是唯一的
			 */
			#myid{
				color: blue;
			}
		style>
	head>
	<body>
		
		<h1 class="myclass">一级标签h1>
		<h2>二级标签h2>
		<h3 class="myclass">三级标签h3>
		<h4>四级标签h4>
		<h5 class="myclass">五级标签h5>
		<h6 id="myid">六级标签h6>
		
		<p>用真心待她人p>
		<p>做美丽的自己p>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

3.基本选择器的优先级别

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			/*
			 * 基本选择器的优先级别：ID选择器>CLASS选择器>标签选择器
			 */
			
			p{
				color: red;
			}
			
			.myclass{
				color: green;
			}
			
			#myid{
				color: blue;
			}
		style>
	head>
	<body>

		<p id="myid" class="myclass">用良心做教育p>
		
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

4.群组选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			/*
			 * 群组选择器
			 */
			
			h1,h3,h5,p{
				color: red;
			}
		style>
	head>
	<body>
		
		<h1>一级标签h1>
		<h2>二级标签h2>
		<h3>三级标签h3>
		<h4>四级标签h4>
		<h5>五级标签h5>
		<h6>六级标签h6>
		
		<p>用真心待她人p>
		<p>做美丽的自己p>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

5.派生选择器/上下文关系选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			/*
			 * 派生选择器/上下文关系选择器
			 * 
			 * 	后台选择器
			 * 		ul a{
						color: red;
					}
					
				子代选择器
					li>a{
						color: red;
					}
					
				相邻兄弟选择器
					注意：效果作用于后者
					a+a{
						color: red;
					}
			 */

		style>
	head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1a>
			li>
			<li>
				<a href="#">超链接2a>
			li>
			<li>
				<a href="#">超链接3a>
			li>
		ul>
		
		<ul>
			<li>
				<a href="#">超链接4a>
			li>
			<li>
				<a href="#">超链接5a>
			li>
			<li>
				<a href="#">超链接6a>
			li>
			<li>
				<a href="#">超链接7a>
			li>
		ul>
		
		<a href="#">超链接8a>
		<a href="#">超链接9a>
		<a href="#">超链接10a>
		<a href="#">超链接11a>
		<a href="#">超链接12a>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

6.属性选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			/*
			 * 	属性选择器 --- 单个属性
			 * 		input[placeholder]{
						color: red;
					}
				
				属性选择器 --- 单个属性+值	
					input[type=password]{
						color: red;
					}
					
				属性选择器 --- 多个属性
					input[type][placeholder]{
						color: red;
					}
					
				属性选择器 --- 多个属性+值
					input[type=password][name=repassword]{
						color: red;
					}
			 */
			
			
			
		style>
	head>
	<body>
		
		<form action="服务器地址" method="post">
			
			账号：<input name="username" type="text" placeholder="请输入账号"/><br />
			密码：<input name="password" type="password" placeholder="请输入密码"/><br />
			确认密码：<input name="repassword" type="password" placeholder="请输入确认密码"/><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbys" value="football"/>足球
				<input type="checkbox" name="hobbys" value="basketball"/>篮球
				<input type="checkbox" name="hobbys" value="shop"/>购物
				<br />
			籍贯：
				<select name="province">
					<option value="sc">四川option>
					<option value="hn" selected="selected">湖南option>
					<option value="hb">湖北option>
				select>省
				<select name="city">
					<option value="cs">长沙option>
					<option value="yy">岳阳option>
					<option value="xy" selected="selected">襄阳option>
					<option value="ld">娄底option>
					<option value="yz">永州option>
				select>市
				<br />
			
			<input type="submit" value="注册" />
			
		form>
		
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

7.样式的优先级别

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		
		
		
		<style type="text/css">
			p{color: red;}
		style>
		
		
		<link rel="stylesheet" href="../css/new_file.css" />
	head>
	<body>
		
		
		<p style="color: blue;">用良心做教育p>
		
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

8.锚伪类

9.常用属性

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			p{
				font-family: "微软雅黑";/*字体*/
				font-size: 30px;/*大小*/
				/*
				 *    ---- normal标准样式
                      ---- italic斜体
                      ---- oblique倾斜
                      ---- inherit从父类继承的字体样式
                 */     
				font-style: oblique;/*风格*/
				 /*
				      ----normal标准样式
                      ----bold粗体
                      ----bolder更粗
                      ----lighter更细
                  */       
				font-weight: bolder;/*字体加粗*/ 
				
				letter-spacing: 20px;/*字符间隔*/
				text-decoration: underline;/*添加划线*/
				text-align: center;/*字体居中*/
				
				background-color: red;/*背景*/ 
				color: white;
				
				/*
				 * 边框
			                               属性名称
			                   border-bottom
				                 solid(实线)
				                 dashed(虚线)
				                 double(双实线)
				*/                 
				border:orange 10px solid;/*边框：颜色、粗细、实线*/
				
			}
			
			
		style>
	head>
	<body>
		
		<p>用良心做教育p>
		
		
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

二、盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			div{
				width: 200px;
				height: 200px;
				border: red 1px solid;
				
				/*padding: 50px;设置上下左右内边距*/
				/*padding-top: 20px;设置顶部内边距*/
				/*padding-bottom: 20px;设置底部内边距*/
				/*padding-left: 20px;设置左边内边距*/
				/*padding-right: 20px;设置右边内边距*/
				
				/*margin: 50px;设置上下左右外边距*/
				margin-top: 20px;/*设置顶部外边距*/
				margin-bottom: 20px;/*设置底部外边距*/
				margin-left: 20px;/*设置左边外边距*/
				margin-right: 20px;/*设置右边外边距*/
                
                /*margin: 0 auto;水平居中*/
			}
			
		style>
	head>
	<body>
		
		<div>
			<span>元素span>
		div>
		
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

三、定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

1.相对定位

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				margin-top: 50px;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: relative;/*相对定位：保留原来的位置，相对于原来的位置进行位移*/
				left: 30px;
				top: 30px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
			
		style>
	head>
	<body>
		
		<div id="manager">
			<div id="box01">div>
			<div id="box02">div>
			<div id="box03">div>
		div>
		
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2.绝对定位

绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。

并且绝对定位不会保留原有的位置空间。

z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				margin-top: 50px;
				
				position: relative;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: absolute;/*绝对定位：不保留原来的位置，向上去找寻父级标签，查看父级标签是否有position属性，如果有就按照父级标签位置进行位移，如果没有就继续向上找寻，直到body位置*/
				left: 30px;
				top: 30px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
			
		style>
	head>
	<body>
		
		<div id="manager">
			<div id="box01">div>
			<div id="box02">div>
			<div id="box03">div>
		div>
		
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

3.固定定位

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#top{
				position: fixed;/*固定定位*/
				top:70%;
				left: 90%;
			}
		style>
	head>
	<body>
		
		<a id="top" href="#new01">☝a>
		
		<a href="#new01">法制a>
		<a href="#new02">国际a>
		<a href="#new03">教育a>
		<a href="#new04">娱乐a>
		
		
        <a name="new01">a>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<h1>法制新闻h1>
		<a name="new02">a>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<h1>国际新闻h1>
		<a name="new03">a>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<h1>教育新闻h1>
		<a name="new04">a>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		<h1>娱乐新闻h1>
		
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

四、浮动

浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

解决办法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div

.clear{clear:both;}

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				width: 80%;
				margin: 0 auto;
				padding: 5px;
			}
			
			#box01{
				border: orange 1px solid;
				
				width: 100%;
				height: 150px;
			}
			
			#box02{
				border: orange 1px solid;
				
				width: 25%;
				height: 200px;
				
				float: left;
			}
			#box03{
				border: orange 1px solid;
				
				width: 45%;
				height: 200px;
				
				float: left;
			}
			#box04{
				border: orange 1px solid;
				
				width: 25%;
				height: 200px;
				
				float: left;
				
			}
			
			.myclear{
				clear: both;
			}
			
			
		style>
	head>
	<body>
		
		<div id="manager">
			<div id="box01">div>
			<div>
				<div id="box02">div>
				<div id="box03">div>
				<div id="box04">div>
				<div class="myclear">div>
			div>
		div>
		
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

五、扩展

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			body{
				background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;
			}
			
			input{
				width: 100px;
				height: 50px;
				color: white;
				font-weight: bolder;
				background-color: orange;
				border-radius: 15px;/*圆角属性*/
				box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
				text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
			}
			
		</style>
	</head>
	<body>
		
		<input type="button" value="普通按钮" />
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

六、新增语义化标签

标签	描述
	头部标签
	导航标签
	内容标签
	块级标签
	侧边栏标签
	尾部标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<style type="text/css">
            header,nav,article,aside,footer,section{
                background-color: #87A442;
                text-align: center;
                border: black 1px solid;
                border-radius:20px;
                margin: 10px;
                padding: 10px;
            }

            header{
                height: 120px;
            }

            nav{
                height: 50px;
            }

            article{
                width: 46%;
                height: 120px;
                float: left;
            }

            aside{
                width: 46%;
                height: 120px;
                float: right;yu
            }

            footer{
                clear: both;
                height: 120px;
            }

            section{
                height: 70px;
            }
		
	style>
	<header>头部标签 - headerheader>
	<nav>导航标签 - navnav>
	<div>
		<article>内容标签 - article
			<section>块级标签 - sectionsection>
		article>
		<aside>侧边栏标签 - asideaside>
	div>
	<footer>尾部标签 - footerfooter>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

相关阅读:
Redis官方开源的可视化管理工具 - RedisInsight
十四、W5100S/W5500+RP2040树莓派Pico＜NetBIOS＞
助推智慧民航，美创亮相全国民航“互联网+”智慧机场建设发展高峰会
 数据结构-----排序的概念、常见排序的实现以及排序算法的特点、非比较排序、排序相关例题
 LeetCode第20题：有效的括号
 短视频配音原来如此简单
 m序列生成器
 Linux基础内容（11）—— 进程理解
 前端面试题集锦（1）
Node.js的安装
原文地址：https://blog.csdn.net/GL280599ZL/article/details/127837958