（一）CSS样式
1.基础选择器
| 选择器 | 写法 |
|---|---|
| 标签选择器 | 标签名{...} |
| 类选择器 | class="类名" .类名{...} |
| id 选择器 | id="id名" #id 名{...} （一次选一个，只能调用一次） |
| 通配符选择器 | *{...} （选全部） |
备注：
1.可直接body{...}。
2.可把共同部分放到一个类里，方便调用。
3.可以多类名：.box{...} .red{...} class="box red"
2.字体
| 样式 | 含义 |
|---|---|
| font-style:normal/italic | 是否倾斜 |
| font-weight：400(normal) / 700(bold) | 是否加粗 |
| font-size:100px | 字体大小 |
| font-family："Microsoft Yahei" | 字体 |
备注：
1.可复合为 font：font-style font-weight font-size font-family （要按顺序写，字体大小和字体必须有）
2.font:16px/28px 指的是大小16px，行高28px。
3.文本
| 样式 | 含义 |
|---|---|
| text-align：center/left/right | 对齐方式 |
| text-decoration：none/underline(下划线) / overline (上划线) / line-through(删除线) | 修饰 |
| text-indent：2em | 首行缩进 |
| line-heigh：20px | 行间距、行高 |
备注：行间距包括字的上间距和下间距。
4.快写
div*3 ul>li div+p .类名 #id名 w200 .类名&*5（自增，按顺序排列） div{...}*5 div{$}*5
备注：按住鼠标中间滑轮往下拖可以连续选中。
5.复合选择器
| 选择器 | 含义 |
|---|---|
| 后代选择器 (所有后代都可以) | ul li{...} (ul 的所有 li) ul li a{...} |
| 子元素选择器（只能最近一级子元素） | .nav>a{...} (父>子{...}) |
| 并集选择器（多组） | ul , .pig li{...} |
| 伪类选择器（特殊效果） | a:hover{...} a:first-child{...} |
| 链接伪类选择器 | a:link（未访问链接） a:visited（已访问链接） a:hover(鼠标经过) a:active（按住不放） |
| :focus 伪类选择器（针对表单） | input:focus{...}（获取光标） |
备注：
1.后代选择器的后代可以是任意基础选择器。
2.链接伪类选择器必须按照LVHA的顺序。
3.想要链接a改变样式，必须单独指定，不能直接body{...}。
4.一般为a:{...} 然后a:hover{...}。
6.元素显示模式
| 模式 | 特点 |
|---|---|
块元素：<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>,<hr>,<dl>,<form>,<table> | 独占一行，高度、宽度（默认 100%）、外或内边距都可以控制，是容器，可放行内或块级元素。（文字类元素例如<p>、<h>内不可放块元素） |
行内元素：<a>,<strong>,<h>,<em>,<i>,<del>,<s>,<ins>,<u>,<span> | 一行可放多个，无法设置高和宽（默认本身内容宽度），只能容纳文本或其他行内元素。 |
行内块元素：<img/>,<input/>,<td> | 一行可放多个，高度、宽度（默认内容宽度）、外或内边距、高度宽度都可以控制。 |
| 转换为 | 代码 |
|---|---|
| 转换为块元素 | display:block; |
| 转换为行内元素 | display:inline; |
| 转换为行内块元素 | display:inline-block; |
备注：1.<a>里面可以放块级元素。
文字在盒子内垂直居中：line-height=height，一般和水平居中：text-align:center一起用。若行高偏小，则偏上。
7.背景
| 样式 | 含义 |
|---|---|
| background-color:transparent（默认透明）/ rgba(0,0,0,0.3)（0.3 为透明程度，越小越透明） | 背景颜色 |
| background-image:none（默认）/ 地址url(...) | 背景图片 |
| background-repeat:repeat（默认纵横平铺）/no-repeat(不平铺)/repeat-x（横）或 repeat-y（纵） | 背景摆放 |
| background-position:x坐标 y坐标（x 为左右，y 为上下，可以为数值/百分比/方位top/center/left/bottom/right） | 背景位置 |
| background-attachment:scroll（不固定,默认滚动）/ fixed（固定） | 背景是否固定 |
备注：
1.可复合为 background：background-color background-image background-repeat background-attachment background-position 。
2.小的图片一般用背景。
3.背景位置可以混合单位（20px center）。
4.若位置只指定一个方位/数值，则另一个默认居中（right即right center）。
８.三大特性
（１）层叠性（即给相同选择器设置相同样式，则采用就近原则）
div {
color: red;
font-size: 12px;
}
div {
color: pink;
}
备注：虽然color执行下面的pink，但是上面的font-size仍然生效。
（２）继承性（子承父性，继承跟文字相关的text-、font-、line-、color）
div {
color: pink;
font-size: 14px;
}
<div>
<p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
</div>
备注：
1.儿子p会继承父亲div。
2.可直接给body指定，然后body里面就全都继承。
（３）优先级
| 样式 | 权重 |
|---|---|
| !important | 无穷（+∞） |
| 行内样式：style=“ ” | （１，０，０，０）=1000 |
| id 选择器 | （０，１，０，０）=100 |
| 类/伪类选择器 | （０，０，１，０）=10 |
| 元素选择器 | （０，０，０，１）=1 |
| 继承选择器/* | （０，０，０，０）=0 |
备注：
1.比较权重大小时，从左到右比较。
2.!important加在后面，即color：pink!important
3.如果一个盒子既有left（top）属性也有right（bottom）属性，则执行left（top）。
9.边框
| 样式 | 含义 |
|---|---|
| border-width | 宽度 |
| border-style | 样式，可以是 none/solid（单实线）/dashed（虚线）/dotted（点线） |
| border-color | 颜色 |
| border-collapse:collapse; | 合并相邻边框 |
备注：
1.复合写法：border：1px solid red;
2.border-left/top...必须写在 border 下面。
3.直接给一个盒子加边框会加大盒子大小，解决方法：
（1）测量时不量边框；
（2）width/height减去边框宽度。
4.表格边框设置：每个单元格都设置边框
table,
td, th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
10.内边距padding（边框与内容的距离）
| 设置 | 结果 |
|---|---|
| padding:5px; | 上下左右 |
| padding:5px 10px; | 上下 左右 |
| padding:5px 10px 20px; | 上 左右 下 |
| padding:5px 10px 20px 30px; | 上 右 下 左（顺时针） |
备注：
1.padding-left/right/bottom/top
2.内边距会撑大盒子，width和height要减去padding；若盒子本身没指定width或者height，则不会撑大盒子大小。
11.外边距margin（盒子与盒子的距离）
| 设置 | 结果 |
|---|---|
| margin:5px; | 上下左右 |
| margin:5px 10px; | 上下 左右 |
| margin:5px 10px 20px; | 上 左右 下 |
| margin:5px 10px 20px 30px; | 上 右 下 左（顺时针） |
备注：
1.margin-left/right/bottom/top
2.让块级盒子居中：指定宽度，左右外边距为 auto，例如margin：0 auto
3.让行内（块）盒子居中：给其父元素添加text-align：center。
外边距合并：
1.相邻块元素垂直外边距的合并
若上下两个盒子分别有下外边距和上内边距，则取两个里面的最大值。所以尽量只给一个盒子添加margin值。
2.嵌套（父子）块元素垂直外边距的塌陷：父子都有上外边距，则父亲会塌陷较大外边距。
解决：
1.为父元素定义上边框（border:1px solid transparent)
2.为父元素定义上内边距（padding：1px）
3.为父元素添加 overflow:hidden
备注：
1.行内元素一般只设置左右内外边距，不要设置上下，不过可以转换为块级或者行内块。
2.清除浏览器默认内外边距：*{padding：0；margin：0；}，放在CSS里面第一句。
12.圆角边框
border-radius(外边框圆角):length即半径(数值或百分比)
border-radius:10px 5px 10px 5px(左上 右上 右下 左下）
border-top-left-radius:...
备注：
1.若要全圆，则length为高或宽的一半，或者直接50%。
2.圆角矩形：length为高度的一半。
13.盒子阴影box-shadow
| 属性 | 含义 |
|---|---|
| h-shadow | 水平阴影（有正负值，越大越往右/下) |
| v-shadow | 垂直阴影 |
| blur | 模糊距离（越大越模糊） |
| spread | 尺寸（影子的大小） |
| color | 颜色一般用rgb（0，0，0，0.3） |
| inset | 内部阴影(默认outset，不过outset不能写出来) |
备注：
1.盒子阴影不占空间。
2.复合：box-shadow : h-shadow（必须） v-shadow（必须） blur spread color inset；
3.text-shadow（文字阴影）: h-shadow v-shadow blur color;
14.网页布局三大方式
三种方式：标准流、浮动、定位
备注：
1.标准流就是块级元素占一行，从上往下；行内元素从左到右，碰到边缘换行。
2.第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。（先用标准流的父元素排列上下位置，然后内部子元素浮动排列）
15.浮动float
1.定义：
浮动就是创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含或另一个浮动框的边缘，使得多个块级元素一行排列显示。
2.写法：
float:none/left/right（先用标准流父元素排列上下位置，再用内部子元素浮动排列左右位置）
3.特点：
（1）脱离标准流的控制移动到指定位置（脱标）。
（2）浮动的盒子不再保留原先位置。
（3）浮动的元素会一行内显示且顶部对齐，一行内装不下会另外起一行。
（4）浮动元素有行内块特性，给行内元素或块级元素加浮动之后不用再转换为行内块元素。
备注：
1.浮动的盒子不会有外边距合并的问题。
2.先设置大小，再设置位置。
3.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
4.一浮全要浮。
4.清除浮动：
1.问题：
父亲盒子不方便给高度，孩子浮动，脱离原文档流位置（父亲高度为 0，下盒子移到下侧），对后面的排版有影响。
2.本质：
（1）清除浮动元素的影响；
（2）若父盒子有高度，则不需要清除浮动；
（3）子盒子会变化，所以父盒子不方便给高度，所以要清除浮动，父亲会根据浮动的子盒子自动检测高度，则不会影响下面的标准流。
2.清除浮动方法：
clear:left/right/both（一般都用both）
1.额外标签法（隔墙法）：
策略：闭合浮动，即在浮动元素末尾添加空标签（必须是块级元素）
.clear {
clear: both;
}
<div class="clear"></div>
2.父级添加 overflow:hidden/auto/scroll
3.:after 伪元素法
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4.双伪元素法
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
备注：导航栏可以用ul包含li和链接a的做法，可以不给宽度，要给a加padding值。
16.页面布局思路
1.思路
-
确定页面版心（测宽）
-
分析行模块及行中列模块
-
列模块浮动布局，先确定每列大小，再确定列的位置
-
Html
-
布局结构
2.css书写顺序
-
布局定位属性：display/position/float/clear/visibility/overflow
-
自身属性：width/height/margin/padding/border/background
-
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
-
其他：content/curson/border-radius/box-shadow/text-shadow/background
17.定位position
1.定义：
让盒子自由在某个盒子内移动位置或者固定在某个位置，且压住其他盒子。
定位（position）=定位模式+边偏移（top/bottom/left/right)
2.定位种类
| 方式 | 写法 | 含义 |
|---|---|---|
| 静态定位 | position：static | 无定位，标准流 |
| 相对定位 | position：relative | 相对于它原来的位置，原来在标准流的位置继续占有，不脱标 |
| 绝对定位 | position：absolute | 相对于最近一级的有定位的父元素位置，不占原位置 |
| 固定定位 | position：fixed | 以可视窗口为准移动，页面滚动不变，不占原位，跟父盒子无关 |
| 粘性定位 | position：sticky | 以可视窗口为准，占原位，必加 top/bottom/right/left其中一个 |
备注：
1.相对定位：top：80px即为距离父元素顶部80px，也就是反向移动。
2.绝对定位：脱标，会飘起来，会被其他盒子占用；若无祖先，则以浏览器为准。
3.绝对定位：子绝父相（子使用绝对定位（可放父盒子任何一个地方，不影响其他兄弟），父亲需要相对定位才能让子在父亲里面）（子不占原位，父站原位）
4.固定定位要固定在版心右侧的算法：left:50%，然后margin-left:版心宽度的一半
5.固定定位是一种特殊的绝对定位。
6.粘性定位是相对定位和固定定位的混合。
3.定位叠放次序
（1）问题：
盒子重叠，可用z-index控制盒子前后次序。
（2）语法：
选择器{ z-index:1;}
备注：
1.数值可以是正整数、负整数或者0，不能加单位，默认是auto，数字越大，盒子越靠上。
2.若z-index相同或者没有指定时，则按书写顺序，后来者居上。
3.只有定位的盒子才有z-index属性。
4.拓展
1.绝对/固定定位的盒子居中，不能通过margin：0 auto水平居中。
水平居中的算法：left：50% margin-left：负的盒子宽度的一半
垂直居中的算法：top：50% margin-top：负的盒子高度的一半
2.浮动只会压住下面标准流盒子，不会压住盒子里面的文字和图片，以为浮动的目的是文字环绕。绝对定位或固定定位会压住下面标准流所有内容。
18.元素显示与隐藏
举例：网站的广告，点击关闭就没有，一刷新就重新出现。
| 类型 | 含义 |
|---|---|
| display | 显示隐藏元素，不保留位置 display:none;(隐藏） display:block;(显示) |
| visibility | 显示隐藏元素，保留位置 visibility:visible;(可视) visibility:hidden;(隐藏) |
| overflow | 溢出显示隐藏，只对溢出部分处理 |
备注：
1.overflow(溢出时会怎样)：
| 样式 | 含义 |
|---|---|
| visible | 不切内容不加滚动条 |
| hidden | 不显示超出内容 |
| scroll | 一直有滚动条 |
| auto | 超出有滚动条，不超出没有 |
2.一般不让溢出内容显示，但如果有定位的盒子，慎用overflow：hidden（会隐藏多余部分）。
19.精灵图sprites
1.用处：
主要用于背景图片，把多个小背景图片整合到一张大图片，减少服务器接收和发送请求的次数，提高页面加载速度。
2.做法：
先量要的小图的大小，确定盒子的大小，然后left、top移动。
background: url(images/sprites.png) no-repeat -155px -106px;（一般为负值，往左/上为负值，往右/下为正值）
备注：移动背景图片位置，用background-position，移动距离为目标图片的x和y坐标。
20.字体图标iconfont
网站：icomoon/iconfont
本质：字体，文本
21.鼠标样式 cursor
cursor：default（默认三角）/pointer（小手）/move（移动即十字架）/text（文本I）/not-allowed（禁止）;
22.轮廓线outline和防拖拽文本域 resize
input, textarea {
/* 取消表单轮廓，去掉默认表单蓝边框 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
<!-- 1. 取消表单轮廓 -->
<input type="text">
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
23.vertical-align
作用：设置图片或者表单（行内块元素）和文字垂直对齐，去掉图片底侧空白。
| 属性 | 含义 |
|---|---|
| baseline | 默认，放基线 |
| top | 与最高元素顶端对齐 |
| middle | 放父元素中间 |
| bottom | 与最低元素对齐 |
备注：只对行内（块）元素有效。
24.溢出的文字省略号显示
1.单行：
/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
2.多行：
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
25.三角做法和巧用
1.三角做法
盒子宽高为0，给4条边框transparent，再给其中一条加颜色。大盒子装小盒子，绝对定位。
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
<div class="jd">
<span></span>
</div>
2.三角巧用
想做直角三角形，且两条直角边不一样长。
先把左边和下边的边框宽度设为0，再把上边框宽度加大。
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
}
</style>
26.其他巧用
1.margin负值的巧妙运用
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* ul li:hover {
1. 如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
备注：
1.解决两边框1+1=2的问题，给每个盒子加margin-left：-1px（border宽度）
2.若要实现鼠标每经过每个盒子时，盒子四条边都变色鼠标经过提高当前盒子层级，若盒子无定位，则加相对定位，若有定位，则加z-index。
2.文字围绕浮动元素的妙用
在一个大盒子中，把图片浮动放进去，文字只需要标准流就可以自动围绕着图片。
3.行内块的巧妙运用
给父亲添加text-align：center，则父亲所有的行内（块）元素都会水平居中。
（二）CSS3新增
1.属性选择器
| 书写 | 含义 |
|---|---|
| input[value]{...} | 选具有 XX 属性的 E 元素 |
| input[type=text]{...} | 选具有 XX 属性且值=XX 的 E 元素 |
| div[class^=icon]{...} | 选具有 XX 属性且值以 XX 开头的 E 元素 |
| div[class$=data]{...} | 选具有 XX 属性且值以 XX 结尾的 E 元素 |
| div[class*=icon]{...} | 选具有 XX 属性且值含有 XX 的 E 元素 |
2.结构伪类选择器
| 选择器 | 含义 |
|---|---|
| ul li:first-child/first-of-type{...} | 选父元素里第一个子元素 |
| last-child/last-of-type{...} | 选父元素里最后一个子元素 |
| nth-child(n){...} | 把所有排序号再选第几个（n=2,3,...第 n 个） |
| nth-of-type(n){...} | 只选指定的盒子排号（n=2,3,...第 n 个） |
| nth-child(even/odd/n/2n/2n+1/5n/n+5/-n+5){...} | 偶数/奇数/全部/偶数/奇数/5 的倍数/第 5 个开始到最后/前 5 个 |
3.伪元素选择器（权重为 1）
帮助我们利用CSS创建新标签元素，而不需要HTML标签。
| 样式 | 含义 |
|---|---|
| div::before{...（必有 content 属性）} | 行内元素，在父元素内部内容的前面插入内容 |
| div::after{...（必有 content 属性）} | 行内元素，在父元素内部内容的后面插入内容 |
备注：行内元素可以转化为行内块，才能改变大小。
4.盒子模型box-sizing
box-sizing:border-box（盒子大小就为 width）（无须减边框）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
5.过渡 transition
transition：过渡属性（all 所有） 时间（s） 运动曲线（默认 ease） 何时开始（s）；
学习CSS是非常重要的:
-
响应式设计：CSS能够实现响应式设计，让网页在不同的设备和屏幕尺寸下都能够良好地显示。如果不学习CSS，网页可能无法适应不同的屏幕尺寸，导致视觉效果不佳或者无法正常显示。
-
样式规范：CSS是一种样式表语言，用于定义网页元素的样式属性，例如颜色、字体、大小、位置和布局等。遵循统一的样式规范可以让网页拥有一致的外观和感觉，提高用户体验。
-
性能优化：CSS可以优化网页的性能，例如减少页面加载时间、提高页面渲染效率等。学习CSS可以帮助前端工程师优化网页的性能，提高用户体验。
-
交互设计：CSS可以用于实现网页的交互效果，例如鼠标悬停、点击等。学习CSS可以帮助前端工程师实现更加流畅、易用的交互效果，提高用户体验。
-
与后端交互：前端工程师需要与后端工程师协同工作，将网页呈现给用户。学习CSS可以帮助前端工程师更好地与后端工程师进行交互，实现更加稳定、高效的网页交互。
