CSS复习总结_css复习计划-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44031282/article/details/118581950

本文详细介绍了CSS的基本概念、语法、选择器（包括简单选择器、组合选择器、伪类选择器和伪元素选择器）、盒子模型、浮动、定位、清除浮动、弹性布局（flex布局）和Grid网格布局。涵盖了CSS布局的关键技术和实例应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

CSS是一种描述HTML文档样式的语言，CSS描述了应该如何显示HTML元素;CSS意为层叠样式表(cascading style sheets)描述了如何在屏幕纸张挥着其他媒体上显示HTML元素，CSS的运用节省了大量的工作。它可以同时控制多张网页的布局，一般外部样式表都存储在CSS文件中。

CSS语法

· 语法
css规则集(rule-set)由选择器和声明块组成，如图：
CSS基本结构
选择器是选择需要添加对应样式的HTML元素。声明块；包含了一条或几条用分号隔开的描述语句(声明)，每条声明都包含了一个CSS属性名和对应的属性值，属性名和属性值之间使用冒号分隔开。声明与声明之间使用分号隔开，所有从属于同一个选择器的声明使用大括弧括起来。例如：设定html中的<p>标签。

p{ 
	color : black;						/* 字体颜色为黑色 */
	fount-family ; "mecrosoft yahei";	/* 字体种类：微软雅黑 */
}

CSS选择器

什么是选择器

CSS选择器就是用于查找(选取)要设置样式的HTML的元素。CSS的选择器大致可以分为五类：
①、简单选择器: 根据名称、id、类来选取对应的元素。
②、组合器选择器：根据类名，id和名称之间的特定关系来选取元素。
③、伪类选择器：根据被选择元素的特定状态来选取元素。
④、伪元素选择器：选取元素的一部分并设置样式。
⑤、属性选择器：根据属性或属性值来选取元素

简单选择器

· 元素选择器
元素选择器根据元素名称来选择HTML元素如上面的p标签选择器。

· css的id选择器
id选择器使用HTML元素的id来选择特定元素。元素的id在页面中是唯一的，所以，id选择器可以选择一个唯一的元素，使用方法：#+特有的id名。
注意： id名不能以数字开头。

· css类选择器
类选择器，用于选定特有的含有class类名的HTML元素。使用方法：" . "+被选元素特有的类名。一个html元素可以拥有多个类，类执行的优先级和引入顺序无关。
注意：同样的，类名也不可以以数字开头。

· 分组选择器
分组选择器的分组原则：具有相同样式定义的html元素为一组。这样可以简化代码，每个HTML元素之间使用" , " 隔开。上代码帮助理解：

/* 简化前,h1 h2 p标签的样式都一样 */
h1{
	text-align: center;
	color: black;
}
p{
	text-align: center;
	color: black;
}
h2{
	text-align: center;
	color: black;
}
/* 分组简化后 */
h1,h2,p{
	text-align: center;
	color: black;
}

通过上面的例子不难看出，一个好的分组选择器，可以最大程度的缩减代码。

组合选择器

组合选择器是解释选择器之间关系的某种机制。组合选择器可以包含在多个简单选择器，再简单选择器之间使用一些特殊符号构成组合器
①、后代选择器( 加空格 )
②、子代选择器( > )
③、相邻兄弟选择器 ( + )
④、通用兄弟选择器( ~ )

· 后代选择器
用来匹配指定元素的所有后代元素。

· 子代选择器
用来匹配只当元素的所有自代元素。

· 相邻兄弟选择器
用来匹配与选中元素的同级元素；值得注意的是，这里的同级元素必须具有相同的父级元素，而相邻，则是紧随其后，

· 通用兄弟选择器
通用兄弟选择器用来匹配和当前指定元素同级的所有元素。

举个栗子：

/* 1.通配符选择器:*:所有标签   */
			*{
				border: 2px solid red;
			}
			
			/* 2.标签选择器 */
			h2{
				border: 2px solid red;
			}
			
			/* 3.类选择器:class------引用:  .classname    */
			.second{
				border: 2px solid red;
			}
			
			/* 4.ID选择器:id-------引用: #idname:在同一个页面中,id不允许重名*/
			#third{
				border: 2px solid red;
			}
			
			
			/* -------------------------复合选择器------------------------------- */
			
			/* 5兄弟选择器: 基本选择器,基本选择器,基本选择器..*/
			.second,#third,h2{
				border: 2px solid red;
			}
			
			/* 6.扩展：后一个兄弟选择器: 基本选择器 + 基本选择器 */
			#third+div{
				border: 2px solid red;
			}
			
			/* 7.扩展：后边所有兄弟选择器: 基本选择器 ~ 基本选择器 */
			#third~*{
				border: 2px solid red;
			}
			
			/* 8.子代所有选择器:基本选择器 （空格） 基本选择器 */
			.second span{
				border: 2px solid red;
			}
			
			/* 9.亲儿子选择器:基本选择器>基本选择器 */
			.second>span{
				border: 2px solid red;
			}
			
			/* 10.易错点区分:
				div.second 和 div .second
				
			 */
			
			div.second {
				border: 2px solid red;
			}
			
			div .second{
				border: 2px solid red;
			}
			
			
			/* 
				class和id起名字：
				1.不要和标签重名
				2.不要使用html和css的标点符号.
				3.不要以数字开头
				4.不要写中文
				5.最好的是英文或者是拼音有意义的名字,区分大小写
			 */

<div class="A">div1</div>
		<div class="second">div2
			<span>第一代的span</span>
		
			<p class="second">
				<span>第二代的span</span>			
			</p>
			
			<h2 class="a">
				<span>第二代的span</span>
			</h2>
			
			<ul>
				<li><span>第三代的span</span></li>
			</ul>
		
		</div>
		<div id="third">div3</div>
		<div>div4</div>
		<p>p</p>
		<h2>h2</h2>

** ·下面这个是属性选择器**
属性选择器有多种表现形式：
①、在元素后使用"[]"进行过滤元素，可以进行多层过滤
②、可以通过[属性名=“属性值”]的方式进行过滤
③、结合正则表达式可以更方便，准确的进行过滤操作
1）[attr ^= value] 表示 attr 属性值需要以value开头
2）[attr $= value] 表示 attr 属性值需要以value结尾
3）[attr *= value] 表示匹配属性attr的属性值为 value 的字列表
3）[attr ~= value] 表示匹配属性attr的属性值为 value 的词列表
举个栗子：

/* 匹配 a 标签中同时具有 target 和 name 属性的元素 */
a[target][name]{
	color: gold;
}
/* 匹配 a 标签中 target 属性值为 "_self" 的元素 */
a[target=_self]{
	color: gold;
}
/* 匹配 a 标签中 href 的值 以 abd 开头的元素 */
a[href^=abd]{
	color: gold;
}
/* 匹配 a 标签中 href 的值 以pdf  j结尾的元素可用于文件筛选  */
a[href $= pdf]{
	color: gold;
}
/* 匹配 a 标签中 name 的值含有 "h" 的元素 */
a[name *= ”h“]{
	color: gold;
}
<a href="02_CSS 选择器.html" target="_self" name="zhangsan">2-link</a>

/* 匹配 a 标签中 name 的值有 goudan 这一属性的元素 */
a[name *= ”goudan“]{
	color: gold;
}
<a href="http://www.baidu.com" target="_blank" name="link goudan">1-link</a>

· css3中的后代选择器
CSS3 作为CSS的发展衍生，自然时增加了一些好用的后代选择器，话不多说直接从案例中理解他们的作用。

/* child 类 */

			/* 第一个：first-child
			 最后一个：last-child
			 */
			/* ul li:first-child{
				color: red;
			}
			 */
			/* 第几个：nth-child(n)
			ul li:nth-child(3){
				color: gold;
			} */
			/* 	3、两个关键字   ——关键
				偶数：even
				奇数：odd
			  ul li:nth-child(even){
				color: gold;
			} */
			/* 4、支持简单表达式 */
			/* ul li:nth-child(-n+3){ /* n的取值大于等于0
				color: gold;
			} */
			/* 5.倒数第N个 */
			ul li:nth-last-child(2) {
				color: gold;
			}
			//* 6 下列代码是错误的html的三个span不是直接的父子关系，
			也不是直接的兄弟关系  */
			ul li span:nth-child(2) {
				color: red;
			}

· nth-of-type 选择器
type类选择器和child后代选择器类似，或者说，使用方式时一样的。不同的时它们的运作方式：
child类，先看序列，再看累心给，如果类型不对，一概不作选择，适用于子代都是同一类型的情况。
type类，先看类型，重新排序，按序选择，超出不选。适用于子代元素不同的情况。
举个栗子：

/* div:nth-child(6){
				color: red;
			} */
			/* type 类的写法和child的写法时一样的 */
			/* div:first-of-type{
				color: green;
			} */
			
			div:nth-of-type(6){ /* 6超出了div的实际个数,不做选择. */ 
				color: red;
			}
			p:nth-of-type(3){
				color: gold;
			}
			/* 
				child类,先看序列,再看类型,类型不对,一概不选.适用于子代都是同意类型的情况
				type类,先看类型,重新排序,按序选择,超出不选.适用于子代元素不同的情况.
			*/

CSS伪类选择器

伪类：用于定义元素的特殊状态，它可以用于，①、鼠标悬停在元素上的样式；②、为已经访问和为访问的链接设置不同过的样式；③、设置元素获得焦点是的样式。

· 锚伪类
锚伪类是描述超链接伪类的一种方式：链接的不同状态可以有不同的效果展示；
举个栗子：

/* 对于为访问的链接 */
a:link {
	color: red;  /* 显示红色 */
}
/* 已经访问的链接 */
a:visited {
	color: green; /* 显示为绿色 */
}
/* 鼠标悬停时 */
a:hover{
	colot:purple; /* 显示紫色 */
}
/* 已选择的链接 */
a:active{
	color: blue; /* 显示蓝色 */
}

注意：以上的链接顺序不可以颠倒。否则可能造成应当实现的效果无法实现。伪类名称对大小写不敏感；

· 伪类放在div上面

<style>
        div {
            background-color: #fff;
        }

        div:hover {
            width: 200px;
            height: 300px;
            background-color: blue;
        }
    </style>
    
     <div>
        鼠标扫过观察效果
    </div>

· CSS - :frist - chils 伪类
:first-child伪类与指定的元素匹配：该元素是一个元素的第一个子元素。匹配首个<p>元素。
举个栗子：

	p:first-child {
            color: blue;
            background-color: gold;
        }    /* 将会选中任何元素中的第一个<p>子元素*/
        
	<div>第一个div
        <p>第一个div的第一个p元素</p>
        <p>第一个div的第二个p元素</p>
        <p>第一个div的第三个p元素</p>
    </div>
    <div>第二个div
        <p>第二个div的第一个p元素</p>
        <p>第二个div的第二个p元素</p>
        <p>第二个div的第三个p元素</p>
    </div>

这是码的运行结果
代码运行结果
· 匹配所有首个p元素中的所有 i 元素
直接上案例

	p:first-child i {
            color: blue;
            background-color: gold;
    }

· CSS - lang伪类
:lang伪类，允许不同的语言定义特殊的规则。

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
	<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
/* 这个伪类还存在疑问，暂时无法解答，后续补上 */

· 所有css伪类(我已知的)

选择器	栗子	描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的input元素
:empty	p:empty	选择没有子元素的`<p>`标签
enable	input:enable	选中每个已经启用了的`<input>`元素
:first-child	p:first-child	选择作为父元素的`<p>`的第一个子元素
:last:child	p:last-child	选择作为父元素的`<p>`的最后一个子元素
:first-of-type	p:first-of-type	选中作为父元素的p标签的每个p元素
:focus	input:focus	选中焦点元素`<input>`元素
:hover	a:hover	选中鼠标悬停的元素。
:in-range	input:in-range	选择指定范围内的input的元素。
:invalid	input:invalid	选中具有无效值得`input`元素
:link	a:link	选中未被访问过得链接

更多内容请复制链接：
https://www.w3school.com.cn/css/css_pseudo_classes.asp

·所有CSS伪元素

选择器	栗子	描述
::after	p::after	在每个`<p>`元素之后插入内容
::befor	p::befor	在每个`<p>`元素之前插入内容
::first-letter	p::first-latter	选择每个`<p>`元素的首字母
::first-line	p::first-line	选择每个`<p>`元素的首行
::selection	p::selection	选择用户选择的元素部分

举个栗子：

/* 向文本的首行添加样式 */
        /* ::first-line伪元素只能应用于块级元素 */
        p::first-line {  
            color: red;
            font-variant: small-caps; /* 把段落设置为小型大写字母题 */
        }

        /* 想问文本的首字母添加样式 */
        /* ::first-letter伪元素也只能应用于块元素 */
        div::first-letter{
            color: green;
        }
        
        /* 在元素内容之前插入一些内容 */
        .aft::before{
            content: url("img/eg.jpg");
            
        }
        /* 在指定元素之后插入一些内容 */
        .aft::after{
            content: url("img/eg2.0.jpg");
        }
        .aft{
            vertical-align: top;/* 基线对齐方式 */
        }

	 <p>
        这是第一行文本<br>
        这是第二行文本<br>
        这是第三行文本<br>
        这是第四行文本
    </p>
    <div>为第一个字符添加样式</div>

    <div class="aft">h3之前要插入一个图片</div>

这是代码运行结果：
伪元素代码运行结果

CSS 的盒子模型

①、CSS的背景属性用于定义HTML元素的背景效果，背景可以纯色的，使用"background-color"指定某一元素的背景色。也可以使用图片作为某一元素的背景，设置方法：background-image:url()"引入。在css中可以为任何一种HTML元素设置背景。
②、透明度/不透明度，透明度在CSS中一般使用opacity进行设定，取值范围是0~1，其中0为全透明，1为不透明。
注意：使用 opacity 属性为元素设置透明度背景时，它的子元素会继承相同的透明度，若透明度设置过小，则可能导致元素内的文难以阅读。在使用纯色背景时，可以使用RGBA来进行透明度设置。

· 背景图片
在CSS中可以使用background-image属性，引入背景图片。默认情况下，图像会以重复的方式覆盖整个元素。
注意：在使用背景图的时候，不要使用对文本阅读有干扰的图像。在简写CSS背景属性时属性值的顺序

background: background-color
			background-image
			background-attachment  /* scroll - 滚动 / fixed - 固定 */
			background-repeat /* 重复方式（no-repeat 不重复）spest-x, spest-y */
			backgroudn-pusition/background-size /* 位置(Ax / By ) / 大小 */
			backgroudn-origin(clip)

注意：在进行CSS背景的简写时，属性值的缺失并不影响CSS样式的表现，只要其他的值按照正常的顺序即可。
· 所有的CSS背景属性

属性	描述
background	这个背景的声明中，所有的背景属性时简写属性。
background-color	设置背景的颜色
background-image	设置元素的背景图像
backfround-position	规定背景图像应该摆放的位置。
background-repeat	设置背景图片是否重复，以及重复的方式。
backgroudnd-size	用于设置背景图片的大小(尺寸)

还有一些比较不常用的背景标签，直接距离说明：

/* background-attachment 用于设置是否跟随页面滚动 */
div{
            width: 400px;
            background-image: url(./img/eg2.0.jpg);
            background-attachment: fixed;  /* fixed (不滚动) / scroll (默认滚动) */
            background-attachment: scroll; /* 设置背景图片位置 单词，数字，百分比都可以。*/
            background-repeat: no-repeat;
            opacity: 0.6;
        }
/* 更多内容请前往 https://www.w3school.com.cn/css/css_background_shorthand.asp */

· CSS的边框属性
CSSborder属性允许指定元素边框的样式、宽度和颜色。边框也可以时包围的，也可以时不包围的，可以四边颜色相同也可以四边的颜色不同。
举个栗子：

div{
            height: 20px;
            width: 200px;
        }
        .box1{
            border: 2px solid black;
        }
        /* 定义一个只有底部边线的盒子 */
        .box2{
            height: 20px;
            border-bottom-style: solid;
            border-bottom-color: red;
            border-bottom-width: 2px;
            margin-top: 10px;
        }
        .box3{
            border-style: solid double none none; /* 简单写法的顺序：上右下左 */
            border-width: 2px;
            border-color: greenyellow;
            margin-top: 10px;
        }
        .box4{
            border: 4px double purple;
            border-radius: 8px; /* border-radius 用来设置圆角边框，属性值可以时像素，百分比等*/
            margin-top: 20px;
        }
        .box5{
            border: 3px dashed green; /* 定义了一个虚线边框 */
        }
        .box6{
            border: 4px dotted red; /* 定义了一个点线边框 */
        }
        
	<div class="box1">所有的边都有框存在</div>
    <div class="box2">这是只存在下边框的盒子</div>
    <div class="box3">这是一个半包围盒子</div>
    <div class="box4">这是一个圆角盒子</div>
    <div class="box5">这是一个虚线边框</div>
    <div class="box6">这是一个点线边框</div>

代码运行效果：
代码运行校效果
· CSS外边距
CSS中的margin属性用于在网页的任何地方，为当前元素周围创建空间。通过外边距属性可以完全控制外边距，可以设置元素 (上、右、下和左) 的外边距。在使用时，可以搭配不同过的后缀实现指定的外边距效果。( -top 上边距，-right 右边距，-bottom 底边距，-left左边距 ) ，外边距的属性值可以是：
①， auto - 浏览器根据窗口计算外边距，
②，length-单位像素等单位指定外边距。
③，百分比，
④，inherit - 指定应从父元素继承外边距。margin是允许负值。
margin可以在一个属性中指定所有的外边距属性。margin:top right bottom left。
matgin也可以指定三个属性值，分别指代margin:top left/right bottom。
margin设置两个属性也可以，分别指代 margin:top/bottom left/right。

· CSS外边距合并
外边距合并指的是，当两个垂直外边距相聚时，他们将合并成一个外边距，合并后外边距的高度等于发生和并后的外边距的高度较大者。
直接举例子：

div {
				width: 300px;
				height: 300px;
				float: left;
			}
			
			.box1{
				background-color: red;
				/* margin-right: 40px; */
				/* margin-bottom: 20px; */
				margin-right: -100px;
			}
			.box2{
				background-color: gold;
				/* margin-left: 60px; */
				/* margin-top: 40px; */
				
				/* 
					总结; 	1、块级元素产生距离只能使用 margin
							2、块级元素的上下margin如果产生叠盖，距离会曲最大值
							3、块级元素左右margin如果产生叠盖，距离会取二者之和
							4、margin可以取负值，如果有元素重叠，永远是后写覆盖先写
						
				 */
				 
			}
			div{
				font-size: 0;
			}
			img {
				width: 300px;
				height: 300px;
			}

			.box1 {
				/* margin-right: 40px; */
				/* margin-bottom: 40px; */
				padding-bottom: 40px;
				
			}

			.box2 {
				/* margin-left: 60px; */
				/* margin-top: 60px; */
			}
				/* 
					总结：
						1、行内块与行内内快上下左右的margin都是累加的
						2、行内块与行内块默认间隙使用 font-size:0;解决
						3、行内块与行内块也可以使用padding拉开距离，效果与margin类似。但会撑大盒子
				 */
	div {
				font-size: 0;
			}

			span {
				width: 300px;
				height: 300px;

				font-size: 16px;
				padding: 0 60px;
			}

			.box1 {
				background-color: gold;
				/* margin-right: 40px; */
				/* margin-bottom: 40px; */
			}

			.box2 {
				background-color: purple;
				/* margin-left: 60px; */
				/* margin-top: 60px; */
			}

			/* 
					总结：
						1、行内元素的左右margin时候累加的，上下margin是无效的。						
				 */

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。margin不会导致盒子扩张。

·CSS内边距
CSSpadding属性用于在任何定义的边界元素内生成空间。通过CSS可以完全控制内边距( 填充 )。参照外边距，一样可以为元素的每一侧设置内边距。

· 内边距和元素宽度
CSSwidth睡醒指定的是元素内容区域的宽度，有内容的区域是指元素( 盒子模型 ) 的内边距、边框和外边距的部分。如果某个元素拥有指定的宽度，那么如果增加了内边距，则会添加这个内边距到元素总宽度中，使用时要留意。

注意：值得注意的是height和width的属性不包括内边距，边框或者外边距。二、关于外边距的计算其中差异点比较大，要多多注意。

盒子的宽与高

盒子的width和height属性用于设置元素的宽度和高度，width和height属性不包括内边距，边框，外边距的区域。
· max-width和max-height
max-width和max-height分别用于设定元素的最大宽度及高度。下面直接举个例子方便理解：

	 div {
            width: 600px; /* width 的存在会覆盖max-width的运行效果 */
            max-width: 800px;
            height: 100px;
            background-color: powderblue;
        }
        
	<div> 这是可变宽度的盒子 </div>
    <p>可以通过调整浏览器窗口查看效果。</p>

运行效果对比：
可变宽高盒子不可变宽高的盒子
对比发现，可变宽度的盒子在小于合资的宽度是将不会产生滚动条。可变高度同理。

盒子的框模型

所有的HTML元素都可以视为方框，在CSS中，在设计布局的时候经常会使用盒模型和框模型；框模型在本质上就是一个包含了每个HTML元素的框，这个框包含了：外边距，内边距，边框和实际内容。
框模型允许在元素周围添加边框，并定义元素之间的空间。
注意的： CSS中width和height都是只得内容区域得宽度和高度。增加宽高，增加内边距和边框不会都不会影响内容区域的尺寸，但这回增加元素边框的总尺寸。
举个栗子：

div{
	width: 100px;
	margin: 20px;
	padding: 10px;
	border: 2px solid black;
}
/* 这样的一个盒子的属性：实际宽高均为 124px  而框的宽高是 134px */

元素内容的宽度计算：
元素的总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度和可以参照元素的总宽度计算。

盒子的轮廓

CSS的轮廓由outline属性进行绘制，配合不同的单词组合，可以生成不同的轮廓效果。
注意：轮廓和边框不同，轮廓是在元素的边框之外绘制的，且可以和其他的内容重叠；同样的，轮廓也不是边框尺寸的部分，不参与元素尺寸的计算，也就是说，元素的总宽度和高度不受轮廓线宽高的影响。

· css轮廓样式
CSS的轮廓样式由outline-style进行指定：

属性值	对应样式
dotted	定义了一个点状轮廓
dashed	声明了一个虚线轮廓
solid	定义了一个实线边框
double	生成一个双实线边框
groove	定义一个3D的凹槽轮廓
ridge	定义一个3D的凸轮廓
inset	定义了一个3D凹边轮廓
outset	定义了一个3D凸边轮廓
none	定义无轮廓
hidden	定义隐藏的轮廓。

直接上代码和截图：

p {
            height: 50px;
            width: 500px;
            outline-color: red;
            outline-width: 5px;
            line-height: 50px;
        }

        p.dotted {outline-style: dotted;}
        p.dashed {outline-style: dashed;}
        p.solid {outline-style: solid;}
        p.double {outline-style: double;}
        p.groove {outline-style: groove;}
        p.ridge {outline-style: ridge;}
        p.inset {outline-style: inset;}
        p.outset {outline-style: outset;}
        <h3>outline-style 属性</h3>
    <p class="dotted">点状轮廓</p>
    <p class="dashed">虚线轮廓</p>
    <p class="solid">实线轮廓</p>
    <p class="double">双线轮廓</p>
    <p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
    <p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
    <p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
    <p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>

运行效果

盒子的浮动问题

在CSS中使用float属性规定元素的浮动方式，同时使用clear属性来清除属性浮动对其他元素的影响。

· float的属性
float属性用于定位和格式化内容，例如：让图像向左浮动，让文字置于图像右侧。
float属性值有四个，他们分别是：
· left——元素浮动到其父元素的左侧
· right——元素浮动到其父元素的右侧
· none (默认值) —— 元素不会浮动，将会遵循默认文档六，出现在应该出现的位置
· inherit —— 元素继承其父级的float值。
最简单的用法 float属性可以实现报纸上的文字保卫图片的效果

常用的清除浮动的方法

关于CSS我们已经知道可以通过float属性来设置元素的浮动，同样的，CSS也为我们提供了清除浮动的方式clear.,他的属性值有五个分别指的是：
· none(默认值) —— 允许选中元素的左右出现浮动元素
· left —— 规定选中元素的左侧不允许出现浮动元素
· right —— 规定选中元素的左侧不允许出现浮动元素
· both —— 选中元素的左右两侧均不允许出现浮动元素。
· inherit —— 元素的清除浮动的方式继承父级的clear值。

注意：
①，使用clear属性的常见使用方法是在兄弟使用了float之后；
②，在清除浮动的时候应注意，应对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧浮动，被清除浮动的元素仍会向左浮动，但会出现在指定元素的下一行。

· clearfix Hack
如果一个元素比包含它的元素更高，便并且它是浮动的，他将会溢出到容器之外，可以使用，overflow: auto;进行解决。
举个栗子：

div {width: 500px;border: 3px solid #4CAF50;padding: 5px;
        }

        .img1 {float: right;}

        .clearfix {overflow: auto;}

        .img2 {float: right;}
       
<div>
        <img class="img1" src="./images/member_140x145.jpg" alt="W3School" width="180" height="167">
        这个框明显没有使用 clearfloat:auto ; 这里的图片就溢出了盒子的范围
    </div>

    <div class="clearfix">
        <img class="img2" src="./images/member_140x145.jpg" alt="W3School" width="180" height="167">
        这个框有使用 clearfloat:auto ; 这里的图片就包含在了盒子的范围内
    </div>

这是代码运行效果
这是运行效果

CSS中盒子的定位

浮动与定位是CSS3中两个重要的页面布局的方式，在CSS3中使用position属性应用与选定元素的定位。他们有五个不同的位置值。分别是
① static(默认) —— 静态定位，静态定位的元素不受top、botton、left和right的影响，且元素不会以是任何特殊方式定位，指挥根据页面的正常流程进行定位，（遵循默认文档流）
② relative —— 相对定位，行对定位的元素会根据元素默认位置相对的进行定位，相对定位的元素受到left，right、top等值的影响，并根据相应的属性值，相对正常位置进行偏移，但，偏移不会对其余内容进行调整，来适应元素留下任何空间。
③ fixed —— 固定定位，固定定位元素是根据浏览器视口进行定位的，也就是说即使页面滚动与否，选中元素都会停留在同一位置，固定元素一般不会占用页面空间。
④ absolute —— 绝对定位，选定的元素相对于最近的已定位的祖先元素定位，如果祖先元素没有定位，那么它将相对文档主体body进行定位，并随页面一起滚动。
⑤ sticky —— 粘性元素，粘性元素在没有到达用户设定的位置时，会随页面一起滚动，一旦到达页面的指定位置，会像固定定位一样，固定在页面的莫伊位置，不同的时这个固定会占用一部分页面空间。
举个栗子“：

div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #d142a6;
        }
        <div class="sticky">我是有粘性的！</div>

    <div style="padding-bottom:2000px">
        <p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p>
        <p>向上滚动以消除粘性。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
        <p>这是一些文本用来撑开页面。</p>
    </div>

盒子内容的溢出处理

在网页的布局排版的时候常常会遇到文字或者图片等元素过大，导致容器无法装下而溢出的问题，这里CSS为我们提供了overflow这一属性控制排版溢出的问题，overflow 处理溢出的属性值有四个，他们分别是：
①、visible( 默认 ) —— 溢出的部分不会被裁剪，在边框 (容器) 外进行渲染。
②、hidden —— 溢出的部分被裁剪，使溢出的部分不可见，且不占用容器外部空间。
③、scroll —— 溢出部分被裁剪，但是添加了一个滚动条马，帮助查看其余内容。
④、auto —— 和scroll类似，但仅在溢出这种必要的时候添加滚动条。

注意： ①、overflow 这一属性只适用于高度一定的块级元素。
②、在overflow后面加上后缀可以规定该属性是仅水平或是仅垂直的更改溢出的内容。

css的布局模型

flex布局

CSS的flex布局有时候也被成为是弹性盒布局，使用弹性盒布局，可以轻松的设计灵活的响应式布局结构，无需再进行浮动或定位。
要想使用flex布局，首先，需要定义flex布局的容器也就是’盒子‘。
举一个简单的例子

.wrap{
				width: 1000px;height: 500px;
				border: 2px solid black;
				background-color: pink;
				margin: 50 auto 0;
				/* 弹性盒属性 */
				display: flex;
				/* display: inline-flex; */
				/* 盒子方向 */
				/* row:行（默认） column: 列 "-reverse"后缀代表反向 */
				flex-direction: row; 
			}
			.wrap div{
				width: 200px;
				height: 200px;
				background-color: blue;
				border-radius: 30px;
				border: 2px solid red;
				box-sizing: border-box;
				font: 50px/4 arial;
				text-align: center;
				/* 当父盒子设为flex布局之后，子元素的float, position布局将失效 */
			}
			<div class="wrap">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>

== 注意 == 应当引起注意的是，要想对多个元素使用弹性盒布局，这个display: flex;属性应当加到这个元素的父盒子中，而且父盒子不能有浮动或者定位，否则弹性盒模型也将失效。

flex弹性盒的各种属性

容器属性

flex布局的容器属性多种多样

属性	取值	作用
flex-direction	cloumn (竖直) / row (水平)	表示元素堆叠方向, `-reserve`表示反序
flex-wrap	wrap / no-wrap	规定元素是否换行排列，默认`nowrap`
flex-flow	cloumn / row + wrap / nowrap	这个属性是`-direction` 和 `-wrap` 的缩写

上面表格中属性只是简单属性，下面是重要且复杂的属性。

justify-content属性
这个属性主要是用来水平对齐项目的。

属性值	效果
center	将项目在容器的中心对齐
flex-start	把容器中的项目左对齐(开头对齐) 默认值
flex-end	把容器中的项目右对齐 (末尾对齐)
apace-around	把容器中的额项目分散对齐，且空隙保持一致
space-between	把容器中的左右两个项目顶格，中间保证间隙一致
apace-evenly	把容器中的项目等距分布

举个栗子：

.wrap{
				width: 1000px;height: 500px;
				border: 2px solid black;
				background-color: pink;
				margin: 50 auto 0;
				
				/* 弹性盒属性 */
				display: flex;
				/* display: inline-flex; */
				
				/* 项目的水平对齐 */
				/*  6个值，值与align-content一致
					flex-start
					center
					flex-end
					
					space-around:
					space-betown: 
					space-evenly: 等距分布
				 */
				justify-content: space-evenly;
				
				/* 项目垂直对齐 */
				/* 
					flex-start：居顶
					center：居中
					flex-end：居底
				 */
				align-items: center;		
			}		
			.wrap div{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				border-radius: 30px;
				box-sizing: border-box;				
				font: 50px/4 arial;
				text-align: center;
				/* 当父盒子设为flex布局之后，子元素的float, position布局将失效 */
			}


		<div class="wrap">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>

align-items 属性
这个属性用来把项目在竖直方向上对齐。

属性值	效果
center	将容器中的项目在容器中间对齐
flex-start	把项目在容器的顶部对齐
flex-end	把项目在容器的底部对齐
stretch	拉伸容器中的项目使之充满容器
baseline	将容器中的项目参照基线对齐

举个栗子：

.wrap {
   			width: 1000px;
   			height: 500px;
   			border: 2px solid black;
   			background-color: pink;
   			margin: 50px auto 0;
   			/* 弹性盒属性 */
   			display: flex;
   			/* 项目垂直对齐 */
   			/* 
   				align-items
   				flex-start：居顶
   				center：居中
   				flex-end：居底
   			 */
   			align-items: flex-end;
   		}
   		.wrap div {
   			width: 200px;
   			height: 200px;
   			background-color: skyblue;
   			border-radius: 30px;
   			box-sizing: border-box;

   			font: 50px/4 arial;
   			text-align: center;
   			/* 当父盒子设为flex布局之后，子元素的float, position布局将失效 */
   		}
   		
   		<div class="wrap">
   		<div>1</div>
   		<div>2</div>
   		<div>3</div>
   	</div>

align-content属性
这个属性用来对齐弹性线（轴线）用于解决容器内多行项目的行与行之间的间隙问题

属性值	效果
space-between	使项目的前后两行顶格，轴线之间有相等的间距，
apace-around	使容器项目的轴线前后之间的间隙保持一致
stretch	拉伸项目，让项目垂直方向上充满整个容器 ( 默认值 )
flex-start	将项目的第一行居顶，其他行依次叠加
flex-end	将项目的最后一行于底部对齐，其他行依次叠加。
center	将项目以中线对齐方式向上下两方向叠加。

补充 — 完美居中
在进行网页编写的时候，往往会遇到将项目在一个容器中完美居中的问题，完美居中的方式多种多样，这里可以结合justify-content 和 align-items 的居中属性解决。
具体实现方法：

.wrap {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
}

.wrap div {
  background-color: #fff;
  color: white;
  width: 100px;
  height: 100px;
}

<div class = wrap>
	<div></div>
</div>

子元素 ( 项目属性 )

如果对HTML的某一父元素设为flex容器，那么这个元素的子元素会自动的变成弹性项目。
弹性项目和弹性容器一样也具有多重属性：

order属性
用来规定弹性项目的顺序，而且order属性值必须为数字，默认是0；

flex-grow属性
flex-grow属性主要用于规定某个弹性项目相对于其他项目占用弹性容器的空间，该值也必须是数字，数字越小占用占用越大，默认是0；

flex-shrink属性
flex-shink属性规定了弹性项目相对于其他元素占用弹性容器大的空间，该值必须是数字，数字越大，占用越小，默认是 0；

flex-basis属性
flex-basis属性用于描述弹性项目的初始长度。

flex属性
flex这个属性是flex-grow，flex-shrink和flex-basis的简写属性，第一个属性值是增长（flex-grow），第二个属性值收缩（flex-shink）第三个属性值项目初始长度（flex-basis）

align-self属性
align-self属性规定了弹性容器内部的项目对齐的方式。而且align-self属性将会覆盖容器自身align-items属性设置的对齐方式。

Grid网格布局

CSS的网格布局模块提供了带有行和列的计语网格的布局系统，它让网页的设计变得更加容易，无需使用浮动和定位。
网格的构成是由一个父元素以及其内的多个子元素构成。
举个简单的栗子：

		.con{
				width: 600px;
				height: 600px;
				border: 2px solid black;
				margin: 0 auto;
				/* 容器属性 */
				display: grid; /*  */
				/* 规定行高 */
				grid-template-rows: 200px 200px 200px;
				/* 规定列宽 */
				grid-template-columns: 200px 200px 200px;
			}
			.con div{
				font-size: 50px;
				text-align: center;
				border: 1px solid red;
				box-sizing: border-box;
			}

		<div class="con">
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
			<div>08</div>
			<div>09</div>
		</div>

运行结果：网格布局结果

网格布局的各种属性

和弹性盒flex布局相类似，也是对父元素(容器)设置display: grid || inline-grid属性。将父元素设置成网格容器，网格布局的属性也分为容器属性和项目属性。

网格布局的容器属性

grid-template-clumns 和 grid-template-rows属性
grid-template-clumns属性定义了网格布局中的列的个数grid-template-rows定义了网格容器中行的个数。他们都拥有一个或多个属性值，代表将容器分为若干行和若干列。
网格容器有关行，列的属性值很多：
举栗说明：

/* 定义四行四列，等宽的网格容器  */
div{
	display: grid;
	grid-template-rows: auto auto auto auto;
	grid-template-columns : auto auto auto auto;
	/* 直接使用 auto 关键字，实现行，列宽度的自动分配 */
}
div{
	display: grid;
	grid-template-rows: repeat(1, 150px,150px,150px,150px)
	grid-template-colums: repeat(1,150px,150px,150px,150px)
	/* 使用repeat(重复次数， 参数1， 参数2，参数3……) 重复函数定义 */
	/* repeat()重复函数重复次数还有"auto-fill"关键字，即自动排版行*/
}
div{
				display: grid; /*  */		
				/* 使用auto-fill自动排版行 */
				/* 规定列宽 */
				grid-template-columns: repeat(auto-fill,100px);
				/* 规定行高 */
				grid-template-rows: repeat(3,200px);
			}
}
div{
			display: grid; /*  */
			/* 使用fr自动排版行,意为每个项目占用容器的高宽比重 */
			/* 规定列宽 */
			grid-template-columns: repeat(3,1fr); 
			/* 规定行高 */
			grid-template-rows: repeat(1,1fr 2fr 1fr);
}
div{
			display: grid;
			/* 列宽使用auto可以自动分配空间，方便缩放兼容 */
			/* 列宽 */
			grid-template-columns:[c1]300px [c2] auto [c3]300px;
			/* 行高 */
			grid-template-rows: 100%;
	}
	/* "auto" 这个属性既可以重复使用平均分配网格大小，也可以作剩余空间填充 */

justigu-content 属性
和flex布局一样，网格布局也存在容器内项目的水平对齐属性，且他们的属性值及其作用页基本和弹性盒一样。都实现了对容器内项目左右之间的空隙操纵和对其
不同的是：网格内部项目的宽度之和必须小于容器的总宽度，这样 justify-content 属性才能生效
align-centent 属性
和flex布局一样，用来控制容器内项目的垂直对齐属性，且属性值及其作用基本一样，都实现了对容器内项目上下之间的间隙操纵和对齐。
不同的：网格内部项目的高度之和要小于容器的高度，这样align-content属性才会生效

子元素（项目）属性

网格容器内一般都包含多个网格项目，默认情况下，容器内每一行的每一列都有一个网格项目，可以改变项目的属性，对项目之间的间隙调整和项目合并。

grid-gap 属性
这个属性规定了项目之间的间距问题，该属性可以有一个或两个属性值，为一个属性值的时候，间距是相等的，为两个属性值是，第一个规定了上下间距，第二个规定了左右两边的间距，
应当注意：这个间距属性是项目间的属性，和容器的间距无关，所以，在没有容器属性的限制下，项目都是紧贴项目容器的

grid-auto-flow 属性
网格的项目在默认情况下都是按水平方向排列的，而grid-auto-flow这一属性可以项目在容器中的排列方式，row 意为水平排列（默认）column 垂直排列。
举个例子：

.con{
			width: 600px;
			height: 600px;
			border: 2px solid black;
			margin: 0 auto;	
			/* 容器属性 */
			display: grid;
			/* 规定行高 */
			grid-template-rows: repeat(3,1fr);
			/* 规定列宽 */
			grid-template-columns: repeat(3,1fr);
			/* 添加间距 */
			grid-gap: 20px 30px;
			/* 使容器中的项目竖直排列 */
			grid-auto-flow: column;
}
<div class="con">
		<div>01</div>
		<div>02</div>
		<div>03</div>
		<div>04</div>
		<div>05</div>
		<div>06</div>
		<div>07</div>
		<div>08</div>
		<div>09</div>
</div>

代码演示结果
grid-template-areas 属性
这个属可以为每个网格项目命名，命名顺序从左到右，从上到下依次命名，而且如果出现了相邻的两个相同的名字的项目，那么这两个两项目会合并网格。表格命名还有一些有趣属性，这里直接举例说明：

.con{
				width: 600px;
				height: 600px;
				border: 2px solid black;
				margin: 0 auto;
				display: grid; 
				grid-template-rows: 200px 200px 200px;
				grid-template-columns: 200px 200px 200px;
				grid-template-areas: "a b c"
									 "d e f"
									 "g h i";
				/* 这里如果两个名字使一样的，则相应的两个单元格会进行合并 */
				/* 而且为了方便理解记忆，最好最好按照网格排列方式排列*/
			}
			.con div:nth-child(3){
				background-color: green;
				/* 通过命名调整3的位置到5 */
				grid-area: e;
			}
			.con div:nth-child(5){
				background-color: lightcoral;
				/* 通过命名调整5的位置到3 */
				grid-area: c;
			}
/* 上面的通过改变已经命名过的项目的名字，可以实现项目的顺序变更 */

网格项目交换
** grid-row 和 grid-column 属性 **
在一些实际的项目里，容器的内容分布往往是大小不一的，这就需要将部分网格进行合并，而grid-row 和 grid-column 就可以实现网格的合并。关于网格的合并也有几种不同方式，直接举例演示：

.con{
				width: 600px;
				height: 600px;
				border: 2px solid black;
				margin: 0 auto;
				
				/* 容器属性 */
				display: grid; 
				grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
				grid-template-columns: 200px 200px 200px;
			}
			.con div:nth-child(1){
				background-color: red;
				/* 合并单元格:按照指定分割线进行合并 */
				/* 可以使用指定的分割线的名称合并不包含最后 */
				grid-column: 1 / 3;
				/* 可以使用span关键字进行合并包含最后 */
				grid-row: 1 / span 2;
/* 除了使用分割线合并，还有之前的通过网格命名来合并网格 */
			}
<div class="con">
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
		</div>

网格合并结果

css补充

CSS图像精灵

图像精灵是单个图像中包含的图像集合，可以通过控制图像显示位置的宽高和图像的位置来达到显示指定图像的目的
width和height可以控制图片显示区域的大小，这个区域根据想要显示图片的大小指定。通过控制图片相对于显示区域的位置可以实现相应的图标显示效果。
举个栗子：

div {
				width: 74px;
				height: 74px;
				/* overflow: hidden; 没有overflow 图片将会全部显示*/  
				border: 2px solid gold;
				position: relative;
				margin: 10px auto 0;
			}
			p{
				font-size: 32px;
				font-weight: bold;
				margin-top: 100px;
				text-align: center;
			}
			div img{
				position: absolute;
				left: -74px;
				top: 0;
			}
			
			<p>这个框将用来显示一幅精灵图中的不同位置的图像</p>
		<div>
			<img src="img/coll-li.png" >
		</div>

下面是代码运行结果，不含overflow：
不含overflow的效果，所有精灵图标都将显示

CSS 表单样式

HTML的表单某一些时候显得死板，从而与页面之间出现断层，格格不入。通过CSS可以有效的改善这种现状。
简单的，可以把表单元素理解为一个盒子<div>，可以为其设置宽高width & height，怪异盒模型box-sizeing: border-box、圆角边框border-rudio、下边框border-bottom、彩色边框等border-color。同样的，可以效仿a标签那样，为表单元素添加合适的伪类:focus，做出一些相应的动画效果transition : attribute time methode。
为了更好的展示效果，直接举个栗子：

input{
   			width: 300px;
   			height: 30px;
   			/* 去掉输入框获得焦点的时候的黑色边框 */
   			outline: none; 
   			/* 怪异和模型，使盒子大小符合设定大小 */
   			box-sizing: border-box;
   			
   			font-size: 24px;
   			
   			/* 设置内边框可以实现更好表单体验 */
   			display: block;
   			padding: 6px 3px;
   			margin: 20px;
   			
   		}
   		.ipt1{
   			border: 2px solid gold;
   			color: red;
   		}
   		.ipt2{
   			border: 2px solid skyblue;
   			/* 设置阴影，第一个颜色，第二个左位移，第三个下位移，第四个模糊像素 */
   			box-shadow: blue 4px 3px 6px;
   		}
   		.ipt3{
   			background-color: #eea;
   			border: 2px solid gold;
   			border-radius: 8px;
   		}
   		.ipt4{
   			height: 50px;
   			border-radius: 5px;
   			border: none;
   			background-color: #EEEEAA;
   		}
   		.ipt4:hover{
   			background-color: #eeeecc;
   		}

请添加图片描述