为什么要学习CSS

CSS学习是前端工程师必备的技能之一，可以用来设置HTML页面的样式和布局123。CSS学习需要掌握基本的使用方式、选择器、属性、层叠性、权重、盒子模型、浮动、定位、弹性盒子等知识点

什么是CSS

1.CSS指层叠样式表 (Cascading Style Sheets)：后面定义的样式重写前面定义的同类样式 2.样式定义如何显示 HTML元素 3.样式通常存储在样式表中 4.把样式添加到HTML4.0中，是为了解决内容与表现分离的问题 5.外部样式表可以极大提高工作效率 6.外部样式表通常存储在 CSS文件中 7.多个样式定义可层叠为一个

CSS的优点

1. ​节省时间​：可以编写一次CSS，然后在多个HTML页面中通过外部引入多次​重复使用​ ​2.页面加载速度更快​​：通过使用CSS，就不需要每次都编写HTML标记属性，只需要编写一个标记的CSS规则，并将其应用于该标记的所有实例，因此代码大大减少也就意味着下载时间短。 ​3.易于维护​​：如果要进行全局更改，则只需​更改样式​，所有网页中的所有元素都将会自动更新。 4.​多设备兼容性​：样式表允许针对多种不同类型的设备进行优化内容。 5.浏览器在样式表中​从上到下​读取样式定义。这也说明我们在样式表中定义的样式将覆盖样式表中先前定义的任何先前样式，不过我们可以在后面的元素中重新定义则不会被覆盖。

CSS的特点

1.减少网页的体积 2.便于页面风格的统一 3.便于页面的修改

使用CSS样式

CSS特性

1.层叠

CSS选择器

一、基本选择器 1.元素选择器 标签{} 2.通配符选择器 {} 3.id选择器 #id{} 4.类选择器 .class{} 5.属性选择器 div[title]、div[title="c"]、div[title^="c"]、div[title$="c"]、div[title="c'] 二、复杂选择器 1.派生选择器/上下文选择器

• a. 后代选择器(所有后代):aa div p / h1 p
• b.子元素选择器(儿子):p>a
• c.相邻兄弟选择器(同级兄弟):p+div 3.伪类选择器(元素状态): a:link,a:hover,a:visited,div:first-child,:lang 4.伪元素选择器(无名标签):p:first-letter、p:first-line

提示：

1. 选择器尽量少用id
2. 尽量不要用 !important
3. 自己的样式加载在引用库样式的后面

2.继承

CSS的值和单位

盒模型

CSS盒子模型（框模型，Box Model），包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。默认width、height设置影响的是content区域的尺寸

<!-- 三角形 -->
<div class="triangle-bottom"></div>

.triangle-bottom{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

<!-- 固定比例矩形 -->
<div class="ratio-box"></div>

.ratio-box{
    /* 新特性写法 */
    /* aspect-ratio: 4 / 3;
    background-color: greenyellow; */
    
    background-color: cadetblue;
    width: 100%;
    height: 0;
    padding: 0;
    /* 是父元素宽度的75% */
    padding-bottom: 75%;
}

<!-- 水平居中 -->
    <div class="wrap">
        <div class="h-center"></div>
    </div>
    
.wrap{
    width: 100%;
    height: 100%;
    border: 1px dashed grey;
}
.h-center{
    width: 100px;
    height: 50px;
    background-color: navajowhite;
    /* 使用auto将左右2侧的剩余空间均分 */
    margin: 10px auto;
}

<!-- 渐变边框-->
<div class="awesome-border"></div>

.awesome-border{
    width: 150px;
    height: 100px;
    border: 8px solid transparent;
    border-radius: 12px;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: linear-gradient(to right,#fff,#fff),linear-gradient(135deg,#e941ab,#a557ef);
}

CSS外边距属性：

围绕元素四周的额外“空白”区，透明，呈现父元素背景色

CSS内边距属性：

CSS外边距属性

CSS边框属性

布局

概述

常规流布局

弹性盒子布局

CSS轮廓属性

CSS布局属性

1. float：控制元素是否浮动且如何浮动，行内元素/块级元素设置float属性是，都按块级元素处理（display:block）,属相取值：none（默认）、left、right
2. clear：用于设置元素的哪一侧不允许出现浮动元素，可取值：none（默认）、left、right,both; $\color{red}{注意}$：clear属性只影响元素本身，不影响其前后元素的float属性
3. clip：控制元素的裁剪，元素必须绝对定位（position:absolute），默认值auto，表示不裁剪，rect(top right bottom left)表示按矩形区域裁剪，矩形右上角（right,top）、左下角（left,bottom）
4. vbility：设置元素是否显示，默认值visible，hidden隐藏，但占显示空间；
5. overflow：用于设置元素不够容纳时的显示方式，属性值：

• visible：默认值，超出的内容显示在元素区域之外，无滚动条；
• hidden：会自动将超出的内容裁剪，且裁剪掉的内容不可见；
• scroll：一直出现滚动条；
• auto：依据内容多少决定是否出现滚动条；
• inherit：从父元素继；

6. display：属性规定元素应该生成的框的类型，主要属性值：

• none：该元素显示，不占显示空间；
• block：该元素将显示为块级元素，元素前后会带有换行符；
• inline：默认，该元素会被显示为内联元素，元素前后没有换行符；
• inline-block：显示为行内块，有block元素特性（可设宽高）,但不换行；
• list-item：该元素会作为列表显示；
• table：按块级表格显示（类似 表格前后带有换行符）；
• inline-table：按内联表格来显示（类似
表格前后没有换行符）；
• inherit：规定应该从父元素继承 display 属性的值；

CSS 定位属性

CSS定位主要用于设置目标组件的位置，如元素是否漂浮在页面之上，常用定位属性：

1. position：用于设置元素的定位方式，可设属性值：
• static：默认，粘性定位，元素按普通文档流模式布局，此时忽略 top, bottom, left, right 或者 z-index 声明；
• $\color{red}{fixed}$：固定定位，相对于浏览器窗口左上角位置定位；
• $\color{red}{absolute}$：绝对定位，相对父元素进行定位；
• $\color{red}{relative}$：相对定位，相对其正常位置（static模式）进行定位
2. 定位位置：通过left、top、right、bottom 4属性控制，值可取正负，left与right同设，left优先，top和bottom同时设置，top优先
3. z-index
4. z-index用于设置目标对象的定位层序，数值越大，等级越高，覆盖在其他层级之上，该属性仅在定位设置position：absolute时有效，默认auto，层级与父元素相同

小结：

本章主要介绍了CSS的历史，需要重点掌握CSS选择器，包括元素选择器、通配符选择器，属性选择器，派生选择器，id选择器、类选择器、伪类和伪元素选择器，同时需要重点掌握CSS的属性，包括背景、字体、文本、尺寸、列表、表格等，同时要求重点掌握盒模型和布局方面的一些属性

变形、过渡、动画



transform变形3D



transform过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

div{
	transition:<property><duration><timing-function><delay>;
	}



animation动画

• @keyframes 关键帧用来定义动画过程中出现的关键样式
• anmation-*相关属性 用来为元素添加动画 $\color{skyblue}{animtion-name}$:定义好的关键帧的名字 $\color{skyblue}{animtion-duration}$:动画时长 $\color{skyblue}{animtion-timing-function}$:动画节奏 $\color{skyblue}{animtion-delay}$:延时开始的时间 $\color{skyblue}{animtion-iteration-count}$:执行次数 $\color{skyblue}{animtion-direction}$:是都反向或交替 $\color{skyblue}{animtion-fill-mode}$:动画执行前后的样式采用 $\color{skyblue}{animtion-play-state}$:动画运行状态

@keyframes fadeInDown{
			from{
				opacity: 0;
				transfrom:translate3d(0,-100%,0);
			}
			to{
				opacity: 1;
				transfrom:translate3d(0,0,0);
			}
		}
		.fadeInDown{
			animation-name:fadeInDown;
			animation-duration: 1s;
			animation-fill-mode: both;
		}

transform、transition、animation——性能相关

如何写动画性能更好？

1. 尽量不用触发reflow的属性
2. 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
3. 尽量使用transform和opacity去写动画

响应式设计

相对长度的使用

1. em

.font-small{
				font-size: 12px;
			}
			.font-large{
                font-size: 20px;
            }
			.paragraph{
				padding: 1em;
				border-radius: 0.5em;
				line-height: 1.5em;
			}

		<div class="font-small paragraph">
			文字较小时候的段落呈现
		</div>
		<div class="font-large paragraph">
            文字较大时候的段落呈现
        </div>

2. rem **rem:**根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局

3. vw和wh **vw：**视窗宽度的1%
   **vh：**视窗高度的1%。同样，vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。

语言增强：预处理器、后处理器

CSS预处理器

变量：以less为例

@primary-font-size:24px;/*定义变量*/
			@primary-blue:#245bdb;/*定义变量*/
			@width:50px;
			@height:@width+10px;/*使用变量，和逻辑语句*/
			.title{
				width: @width;/*使用变量*/
				height:@height;
				font-size:@primary-font-size;
				color:@primary-blue;
			}

嵌套、作用域：以less为例

//css
			.container{
				width: 100px;
				height: 100px;
			}
			.container .container-title{
				font-size: 24px;
			}
			.container .container-desc{
				font-size: 12px;
			}

			//less
			.container.container-desc{
                font-size: 12px;
            }
			.container{
				width: 100px;
				height: 100px;
				.&-title{
					@font-size: 24px;
					font-size:@font-size;
				}
				.&-desc{
					@font-size: 12px;
                    font-size:@font-size;
				}
			}

mixins：以less为例

.special-border{
				border-top: dotted 1px black;
				border-bottom: solid 2px black;
			}
			.title-1{
				color: #111;
				.bordered();
			}
			.title-2{
				color: #red;
				.bordered();
			}

自定义函数：以Scss为例

//计算单列的单个宽度
			@function column-width($col,$total){
				@return percentage($col/$total)
			}
			//一个列宽
			.col-1{
				width:column-width(1,10);
			}
			//三个列宽
			.col-3{
				width:column-width(3,10);
			}

//编译为
			.col-1{
				width:10%
			}
			.col-3{
				width:30%
			}

scss、less、stylus简单对比