FrontEnd笔记 -- CSS

文章目录

CSS基础

简介

CSS：层叠样式表，用来美化网页的，做到结构(html)和样式(css)分离。

基本语法

selector{
	property : value;
}

selector：选择器通常是需要改变样式的HTML元素

样式引用方式

行间(内联)样式：直接在标签上书写样式

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
</head>
<body>
	<div>行间样式测试</div>
	<div style="color: olive;width: 100px;border: 1px solid blue;">行间样式测试</div>
</body>
</html>

内部样式表：放置在头部中

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		p{
     
     
			background-color: #eeeeee;
			font-size: 18px;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>内部样式测试</p>
	<p>内部样式测试</p>
</body>
</html>

外部样式

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<span>外部样式测试</span>
	<span>外部样式测试</span>
</body>
</html>

<!-- style.css-->
span {
	font-size: 15px;
	color: rgba(65, 206, 110, 0.79);
}

导入外部样式：先创建一个CSS文件，再在style标签中用import导入。

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		@import "style.css"
	</style>
</head>
<body>
	<div class="box">导入外部样式测试</div>
	<div>导入外部样式测试</div>
	<span class="box">导入外部样式测试</span>
</body>
</html>

<!-- style.css-->
.box {
	font-weight: bold;
	font-size: 16px;
}

外部样式和导入外部样式的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其它事务；@import属于CSS范畴，只能加载CSS；
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载；
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持；
link支持使用Javascript控制DOM去改变样式；而@import不支持。

样式选择器

分类

选择器	说明
*	用来匹配所有的标签
标签选择器	针对指定的标签
类选择器	用来选择class命名的标签
id选择器	用来选择用id命名的标签
派出选择器	根据上下文确定要选择的标签

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>全匹配：p标签</p>
	<strong>全匹配：strong标签</strong>
	<span>标签匹配：span标签</span>
	<div class="wrapper">类匹配：div标签</div>
	<p id="content">id匹配：p标签</p>
	<ul>
		<li>li01</li>
		<li>li01</li>
	</ul>
	<ul class="list">
		<li>li02</li>
		<li>li02</li>
	</ul>
</body>
</html>

<!-- style.css-->
/* 1. * */
* {
	color: red;
}
/* 2. 标签选择器 */
span {
	display: block;
	margin-right: 20px;
	border: 1px solid gray;
}
/* 3. 类选择器 */
.wrapper {
	color: aqua;
}
/* 4. id选择器 */
#content {
	color: pink;
}
/* 5. 派出选择器：类list下的li标签 */
.list li {
	color: blue;
}

分组

让多个选择器(元素)具有相同的样式，一般用于设置公共样式。

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>h1</h1>
	<div class="box">class box</div>
	<p>p</p>
</body>
</html>

<!-- style.css-->
h1, .box, p {
	color: red;
}
p {
	width: 100px;
	background-color: #999999;
}

继承

子元素可以继承父元素的样式

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="extend">这是一段<span>继承测试</span></div>
	<div class="override">这是一段<span>覆写测试</span></div>
</body>
</html>

<!-- style.css-->
.extend {
	font-size: 28px;
}

.extend span {
	font-weight: bold;
}
.override {
	color: red;
}

.override span {
	color: blue;
}

优先级

总体：外部样式 < 内部样式 < 内联样式

样式	权重
!important	10000
内联样式	1000
id选择器	100
类、伪类选择器	10
标签选择器	1

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		p {
     
     
			color: blue;
		}
		strong {
     
     
			color: blue!important;
		}
	</style>
</head>
<body>
	<p style="color: yellow;">内联样式 &gt; 内部样式</p>
	<p>内部样式 &gt; 外部样式</p>
	<strong style="color: yellow;">!important &gt; 内联样式</strong>
	<div id="content">
		<div class="main_content">
			<h2>复杂情况需依次累加计算权重</h2>			
		</div>
	</div>
</body>
</html>

<!-- style.css-->
p {
	color: red;
}
/* 复杂情况下的优先级判断 */
#content div.main_content h2 {
	/* 权重：100+1+10+1=112 */
	color: red;
}
#content .main_content h2 {
	/* 权重：100+10+1=111 */
	color: blue;
}

字体

属性

属性	说明	设置
font-size	字号	{number+px}:固定值尺寸像素；{number+%}:其百分比是基于父对象字体的尺寸大小
font-family	字体	{Courier, “Courier New”, monospave}:第一个浏览器支持的字体生效，都不支持使用浏览器默认字体
font-style	样式	normal:正常；italic:斜体，对于没有斜体变量的特殊字体使用oblique；oblique:倾斜的字体
font-weight	加粗	bold、bolder、lighter、{100-900}:400=normal,700=bold
color	颜色	color=blue、rgb(100,14,200)、{#345678}
line-height	行高	{number+px}:指定行高为长度像素；{numer}:指定行高为字体大小的倍数
text-decration	修饰	underline(下划线)、line-through(贯穿线)、overline(上划线)
text-align	对齐	left、center、right
text-tansform	大小写	capitalize(单词首字母大写)、uppercase(全部大写)、lowercase
text-indent	缩进	{number+px}:首行缩进number像素；{number+em}:首行缩进number字符

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>十九届五中全会提出了“<span>十四五</span>”时期经济社会发展主要目标和2035年远景目标，强调中国社会主义现代化国家建设进入高质量发展的新阶段。党政领导干部是推动新目标实现的中坚力量，而政绩考核会深刻影响和塑造他们的政绩观和发展观。政绩考核同干部任用挂钩，也是领导干部最看重的评价。如果政绩考核的定位、内容和方式不转变和改进，那么就很难真正使党政领导干部树立新发展理念并推动高质量发展。因此，改进和创新考核机制，强化高质量发展的政绩导向，才能使新发展理念贯彻落实。</p>
	<div>
		Today is a good day!
	</div>
</body>
</html>

<!-- style.css-->
p {
	font-size: 20px;
	font-family: 微软雅黑,宋体;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	text-indent: 2em;
}
p span {
	font-weight: bolder;
	color: red;
	text-decoration: underline;
}
div {
	text-transform: uppercase;
}

复合属性

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

属性值的位置顺序不可颠倒
除了font-size和font-family之外，其它任何属性可以省略
font-variant：small-caps(把段落设置为小型大写字母字体)

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>Today is a good day!十九届五中全会提出了“十四五”时期经济社会发展主要目标和2035年远景目标，强调中国社会主义现代化国家建设进入高质量发展的新阶段。党政领导干部是推动新目标实现的中坚力量，而政绩考核会深刻影响和塑造他们的政绩观和发展观。政绩考核同干部任用挂钩，也是领导干部最看重的评价。如果政绩考核的定位、内容和方式不转变和改进，那么就很难真正使党政领导干部树立新发展理念并推动高质量发展。因此，改进和创新考核机制，强化高质量发展的政绩导向，才能使新发展理念贯彻落实。</p>
</body>
</html>

<!-- style.css-->
p {
	font: italic small-caps bolder 18px/1.5 宋体;
}

背景

属性	说明
background-color	背景色（transparent/color）
background-image	背景图（url）
background-repeat	背景图像铺排方式（repeat/no-repeat/repeat-x/repeat-y）
background-position	设置对象的背景图像位置{x-number/top/center/bottom} {y-number/left/center/right}
background-attachment	背景图像滚动位置（scroll/fixed）
background	复合写法：color image repeat attachment position

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>Today is a good day!十九届五中全会提出了“十四五”时期经济社会发展主要目标和2035年远景目标，强调中国社会主义现代化国家建设进入高质量发展的新阶段。党政领导干部是推动新目标实现的中坚力量，而政绩考核会深刻影响和塑造他们的政绩观和发展观。政绩考核同干部任用挂钩，也是领导干部最看重的评价。如果政绩考核的定位、内容和方式不转变和改进，那么就很难真正使党政领导干部树立新发展理念并推动高质量发展。因此，改进和创新考核机制，强化高质量发展的政绩导向，才能使新发展理念贯彻落实。</p>
</body>
</html>

<!-- style.css-->
body {
	background-color: gray;
	background-image: url(https://cn.bing.com/th?id=OHR.EsskastanieD_ZH-CN9736686128_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	height: 2000px;
	/*background: gray url(some-url) no-repeat fixed center center; */
}

伪类选择器

伪类：专门用来表示元素的一种特殊状态

伪类选择器	说明
a:link	未访问状态
a:visited	已访问状态
a:hover	鼠标悬停状态
a:active	用户激活（单击）
input:focus	表单获得焦点时触发样式
selector:first-child	选择元素的第一个子元素
selector:last-child	选择元素的最后一个子元素

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a href="#">多变的伪类选择器</a>
	<input type="text">
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</body>
</html>

<!-- style.css-->
a:link {
	color: red;
}
a:visited {
	color: blue;
}
a:hover {
	color: yellow;
}
a:active {
	color: green;
}
input:focus {
	outline: 1px solid #f00;
}
ul li:first-child {
	color: red;
}
ul li:nth-child(2) {
	color: green;
}
ul li:last-child {
	color: blue;
}

属性选择器

写法	说明
属性名	包含有指定属性名的元素
属性名=值	属性名的值为指定值的元素
属性名~=值	属性名的值包含指定值的元素
属性名^=值	属性名以指定值开头的元素
属性名$=值	属性名以指定值结尾的元素

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="content" title="内容">content0</div>
	<div class="content">content1</div>
	<form>
		<input type="text" name="account">
		<input type="text" name="usr">
	</form>
	<div class="box public">public</div>
	<div class="box private">private</div>
</body>
</html>

<!-- style.css-->
div.content[title] {
	font-weight: bolder;
}
input[name=usr] {
	background-color: #eee;
}
div[class~=public] {
	font-size: 30px;
}

关系选择器

选择器	说明
空格	后代选择器
>	只选择儿子元素
+	只选择兄弟元素

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>
		<strong>关系1</strong>
		<span>
			<strong>关系2</strong>
		</span>
	</h1>
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</body>
</html>

<!-- style.css-->
/* 后代选择器 */
h1 strong {
	color: red;
}
/* 儿子选择器 */
h1>strong {
	background-color: black;
}
/* 兄弟选择器 */
ul li+li {
	list-style-type: none;
	color: red;
}

伪元素

用于向

伪元素与伪类的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。
伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不再文档树中的元素，并为其添加样式。比如说，我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不存在于文档树中。

伪类和伪元素的特点

伪元素和伪类都不会出现在源文档或文档树中；
伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面；
伪元素名和伪类名都是大小写不敏感的
有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

伪元素的使用

伪元素	说明
::before	在元素之前添加内容
::after	在元素之前添加内容
::first-letter	在元素第一个字母前添加内容
::first-line	在元素第一行前添加内容
::selection
::placeholder
::backdrop

<!-- simwor.html-->
<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式，所以将其称为伪类。</p>
</body>
</html>

<!-- style.css-->
p::before {
	content: "Today is a good day!"
}
p::first-letter {
	font-size: 30px;
	font-family: 黑体;
	color: blue;
}
p::first-line {
	text-decoration: underline;
}
p::after {
	content: ".....";
}

小练习

练习一

目标
html

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 开发思路：先整体，再局部；从上至下开发 -->
	<div class="wrapper">
		<h1>文字翻转，一个很酷的文字工具</h1>
		<p><span class="summary">摘要</span>：文字翻转，一个很酷的文字工具，它可以把字母上下翻转180°！我们很高兴向你介绍这一款生成器，之前有些生成器只能翻转小写字母，但现在这个强大的生成器，连大写字母也可以成功翻转！</p>
		<p>文字翻转，一个很酷的文字工具，它可以把字母上下翻转180°！我们很高兴向你介绍这一款生成器，之前有些生成器只能翻转小写字母，但现在这个强大的生成器，连大写字母也可以成功翻转！文字翻转，一个很酷的文字工具，它可以把字母上下翻转180°！我们很高兴向你介绍这一款生成器，之前有些生成器只能翻转小写字母，但现在这个强大的生成器，连大写字母也可以成功翻转！</p>
		<p>文字翻转，一个很酷的文字工具，它可以把字母上下翻转180°！我们很高兴向你介绍这一款生成器，之前有些生成器只能翻转小写字母，但现在这个强大的生成器，连大写字母也可以成功翻转！</p>
		<p>文字翻转，一个很酷的文字工具，它可以把字母上下翻转180°！我们很高兴向你介绍这一款生成器，之前有些生成器只能翻转小写字母，但现在这个强大的生成器，连大写字母也可以成功翻转！</p>
		<p>文字翻转，一个很酷的文字工具，它可以把字母上下翻转180°！我们很高兴向你介绍这一款生成器，之前有些生成器只能翻转小写字母，但现在这个强大的生成器，连大写字母也可以成功翻转！</p>
		<ul>
			<li><a href="#">文字翻转，一个很酷的文字工具</a></li>
			<li><a href="#">它可以把字母上下翻转180°</a></li>
			<li><a href="#">我们很高兴向你介绍这一款生成器</a></li>
			<li><a href="#">连大写字母也可以成功翻转</a></li>
		</ul>
	</div>
</body>
</html>

* {
    
    
	margin: 0;
	padding: 0;
}
body {
    
    
	padding: 10px 0;
	font-family: 微软雅黑;
}
.wrapper {
    
    
	width: 640px;
	border: 1px solid #ccc;
	padding: 20px;
	margin: 0 auto; /* 左右居中 */
}
h1 {
    
    
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	margin: 10px 0 20px; /*上边距为10，左右为0，下边距为29*/
}
p {
    
    
	font-size: 14.8px;
	text-indent: 2em;
	margin: 1.5em 0; /* 上下边距为1.5个字符距离，左右为零*/
	line-height: 1.5em;
}
h1+p {
    
    
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
	text-indent: 0;
	color: #005fdd;
	font-size: 12px;
}
.summary {
    
    
	color: red;
}
ul {
    
    
	list-style-type: none; /* 取消列表装饰 */
	text-indent: 2em;
	font-size: 12px;
}

ul li {
    
    
	line-height: 2em;
}
a {
    
    
	color: #666;
	text-decoration: none;
}
a:hover {
    
    
	color: blue;
	text-decoration: underline;
}

练习二

效果

在这里插入图片描述

html

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 开发思路：先整体，再局部；从上至下开发 -->
	<div class="content">
		<h1>花瓣搜索</h1>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。</p>
		<section class="review">
			<h3>文章导读：</h3>
			<!-- href中的#表示锚点，实现的是页内跳转 -->
			<a href="#title1">除了上面介绍的方法之外</a>
			<a href="#title2">往往给人惊艳的感觉</a>
		</section>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。</p>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。</p>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。</p>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。</p>
		<section>
			<h2><a id="title1">除了上面介绍的方法之外</a></h2>
			<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。</p>
		</section>
		<section>
			<h2><a id="title2">往往给人惊艳的感觉</a></h2>
			<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。</p>
		</section>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。</p>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。</p>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。</p>
		<p>面对文字居多的页面，除了上面介绍的方法之外，还可以参考海报创意设计风格，通过对文字的重组排版，选择性的突出内容，往往给人惊艳的感觉。参考花瓣搜索：文字排版，里面的创意排版灵感非常不错的。</p>
	</div>
</body>
</html>

* {
    
    
	margin: 0;
	padding: 0;
}
body {
    
    
	font-family: 微软雅黑;
}
.content {
    
    
	width: 700px;
	border: solid 1px #ccc;
	margin: 10px auto;
	padding: 25px 25px 0;
	background-color: #f9fbf9;
}
h1 {
    
    
	font-size: 30px;
	margin: 25px 0 15px;
	font-family: 黑体;
	text-align: center;
}
.review h3 {
    
    
	font-size: 14.7px;
}
h2 {
    
    
	font-style: italic;
}
p {
    
    
	line-height: 1.5em;
}
h2, p {
    
    
	margin: 1.2em 0;
	text-indent: 2em;
	font-size: 14.7px;
}
h1+p {
    
    
	font-size: 12px;
	color: #666;
	line-height: 1.5em;
	border: 1px solid #ccc;
	background-color: #fff;
	padding: 7px;
	text-indent: 0;
}
h1+p::first-letter {
    
    
	font-size: 38px;
	font-weight: bold;
	float: left; /* 设置浮动 */
	clear: none; /* 不允许浮动方向*/
}
a[href^='#'] {
    
    
	line-height: 1.5em;
	font-size: 12px;
	text-decoration: none;
	color: #36f;
	display: block;
}
a[href^='#']:hover {
    
    
	color: #f60;
}

CSS浮动布局&盒模型

浮动

浮动就是让块级标签不独占一行（把块级元素排列在一行）。

浮动的原理：让元素脱离文档流，不占用标准流。

产生浮动

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	规定应从父元素继承float属性的值

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
     
     
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
		}
		.box1, .box2 {
     
     
			width: 200px;
			height: 150px;
		}
		.box1 {
     
     
			background-color: red;
			float: left;
		}
		.box2 {
     
     
			background-color: blue;
			float: right;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
</body>
</html>

消除浮动

浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。

清除浮动：让后面的元素自动掉到下一行。

方式一：添加空标签并设置样式

方法	说明
clear:left	清除左浮动
clear:right	清楚右浮动
clear:both	清楚左右浮动
clear:	左右浮动都不清除

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
     
     
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
		}
		.box1, .box2, .box3 {
     
     
			width: 200px;
			height: 150px;
		}
		.box1 {
     
     
			background-color: red;
			float: left;
		}
		.box2 {
     
     
			background-color: blue;
			float: right;
		}
		.clear {
     
     
			clear: both;
		}
		.box3 {
     
     
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<!-- 清楚浮动方式一：添加空标签 -->
		<div class="clear"></div>
		<div class="box3">box3</div>
	</div>
</body>
</html>

方式二（首选）：在要清除浮动的父级添加样式（overflow: hidden;）

overflow: hidden 超出部分隐藏

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
     
     
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
			overflow: hidden;
		}
		.box1, .box2, .box3 {
     
     
			width: 200px;
			height: 150px;
		}
		.box1 {
     
     
			background-color: red;
			float: left;
		}
		.box2 {
     
     
			background-color: blue;
			float: right;
		}
		.box3 {
     
     
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
	<div class="box3">box3</div>
</body>
</html>

在要清除的父级添加伪元素，并设定样式

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
     
     
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
		}
		/* 在要清除的父级添加伪元素，并设定样式 */
		.wrapper:after {
     
     
			content: "";
			display: block;
			clear: both;
		}
		.box1, .box2, .box3 {
     
     
			width: 200px;
			height: 150px;
		}
		.box1 {
     
     
			background-color: red;
			float: left;
		}
		.box2 {
     
     
			background-color: blue;
			float: right;
		}
		.box3 {
     
     
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
	<div class="box3">box3</div>
</body>
</html>

小练习

效果

在这里插入图片描述
2. 代码

<!-- 在线运行网站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.info-show {
     
     
			width: 600px;
			padding: 20px;
			border: 1px solid #ccc;
			margin: 100px auto;
			overflow: hidden;
		}
		.head-sculpture {
     
     
			float: left;
			text-align: center;
			margin-right: 40px;
		}
		.head-sculpture .photo {
     
     
			width: 200px;
			height: 300px;
			border: 1px solid #ccc;
			vertical-align: middle;
			background-color: #eee;
			padding: 10px 0 0 20px;
		}
		.description {
     
     
			width: 300px;
			height: 300px;
			border: 1px solid #ccc;
			float: left;
			padding: 10px 0 0 20px;
		}
	</style>
</head>
<body>
	<div class="info-show">
		<div class="head-sculpture">
			<div class="photo">头像</div>
			<div class="name">姓名</div>
		</div>
		<div class="description">描述</div>
	</div>
</body>
</html>

盒子模型

每个元素都是一个盒子，一个盒子由margin（外边距），border（边框线），padding（内边距）和content（内容）组成。

外边距：指元素边框线之外的距离，系统默认外边距为8px

属性	说明
margin-left	左边距
margin-right	右边距
margin-top	上边距
margin-bottom	下边距
margin	可以用来设置任意一个边距，可以带一到四个参数

margin	说明
margin: 10px;	表示上下左右都是边距都是10px
margin: 10px 20px;	表示上下边距为10px，左右边距为20px
margin: 10px 20px 30px;	表示上边距为10px，左右边距为20px，下边距为30px
margin: 10px 20px 30px 40px	表示上边距为10px，右边距为20px，下为30px，左为40px（顺时针上 -> 右 -> 下 -> 左）

内边距：指元素的文本内容与边框之间的距离

属性和说明与外边距类似

边框

属性	说明
border-width

、

文章目录

CSS基础

简介

样式引用方式

样式选择器

字体

背景

伪类选择器

属性选择器

关系选择器

伪元素

小练习

CSS浮动布局&盒模型

浮动

盒子模型

猜你喜欢