一、选择器
1.基础选择器
（1）通用选择器：*
（2）类选择器：class
（3）id选择器：id
（4）标签选择器：标签
2.复合选择器
（1）后代选择器：空客
（2）子代选择器：大于
（3）并列选择器：逗号
（4）交集选择器：相同标签或者有相同名字的标签
（5）伪类选择器：link没有点击；visited访问过；hover经过时；active正在访问时。
二、引入方式
1.行内样式表（行内式）：在标签里面直接写；
2.内部样式表（内嵌式）：在<head 里面的style标签里面写；
3.外部样式表（链接式）：在head标签写入<link rel=“stylesheet” htef=“css文件”;
三、文字属性
1.font-family：字体样式；
2.font-size：字体大小；
2.font-weight：字体粗细
（1）400，normal：正常
（2）700，bold：加粗
3.font-style：字体倾斜
（1）normal 正常;
(2) italic 斜体
（3）oblique 倾斜
CSS样式
字体样式
- font-style：设置字体样式 ——italic代表斜体、normal代表正常
- font-weight：设置字体粗细。400（normal）代表正常，700（bold）代表加粗
- font-size/line-height：设置字体大小/设置行高
- font-family：指定字体。注意：需要查看浏览器是否支持对应的字体，字体样式用双引号包含。
字体样式简写
如下所示：简写时书写顺序必须按照上面的1234书写。
font: normal 400 16px/32px "Microsoft YaHei";
注意：简写时必须有size和family两个属性值。
文本样式
color：设置文本颜色
red 直接写颜色单词，多用于测试
#ff0000 十六进制色，每两位代表一个颜色，前后顺序是红绿蓝
rgb(255,0,0) rgb写法，三个数值分别代表红、绿、蓝色
text-align：设置文本的水平对齐方式 ——left、center、right
text-decoration：装饰文本
none 文本无装饰
underline 文本添加下划线
overline 文本添加上划线
line-through 文本添加删除线
text-indent：文本缩进。10px首行缩进10px，2em 首行缩进2字符。
line-height：行间距（行高）。当行高等于父盒子height时，实现垂直居中。
CSS三种引入方式
外部引入：
<link rel="stylesheet" href="文件名.css">
内部引入：
<style>
input:focus {
background-color: pink;
}
</style>
行内引入：
<p style="color:pink;">段落</p>
注意：如果三种引入方式出现相同权重的样式冲突，则采用：就近原则。
emmet语法
HTML语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cv4TE0dc-1608271584386)(C:\Users\tian\AppData\Roaming\Typora\typora-user-images\image-20201016192505890.png)]
CSS语法
输入CSS样式属性的首字母，例如：tdn相当于text-decoration：none；
标签元素的显示样式
理解：为了便于页面布局，W3C联盟给定了一些标签的特性，随着这些标签和对应样式的丰富，可以极大的提高人机互动能力（提高计算机的能力）。
元素按显示模式分类
块元素：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4iYSyfT-1608271584400)(C:\Users\tian\AppData\Roaming\Typora\typora-user-images\image-20201016194245776.png)]
行内元素：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrtMXAp0-1608271584404)(C:\Users\tian\AppData\Roaming\Typora\typora-user-images\image-20201016194318101.png)]
行内块元素：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hLJQnX0c-1608271584408)(C:\Users\tian\AppData\Roaming\Typora\typora-user-images\image-20201016194337697.png)]
模式的转换
- display：inline 转换为行内元素
- display：block 转换为块元素
- display：inline-block 转换为行内块元素
CSS背景
background-color:
transparent透明/color
背景颜色
background-image:
none/url(url)
背景图片
注意：一般用于网页超大图片，或者网页中的小图片标签，背景图片会压住背景颜色。
background-repeat:
repeat 默认平铺
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
（重点）background-position:x y;
背景图片定位
可以使用方位名词 或者 精确单位。
如果只指定了一个方位，则另一个方位默认是居中
如果只指定了一个精确数值，那么它一定是x轴的参数，y轴则默认居中
方位值和精确值可以混合使用
background-attachmet:
scroll背景图滚动/fixed背景图固定
（重点）背景简写
background: 颜色、地址、平铺、滚动、位置
记忆：cirap
背景半透明
background:rgba(255,0,0,0.3)
注意：最后一位是透明度，01：透明不透明
CSS三大特性
层叠性
相同级别选择器设置同一元素属性值冲突时，执行就近原则
继承性
子标签会继承父标签的部分属性：text-,font-,line-,color
注意：当父元素行高为1.5倍时，子元素继承后行高为子元素字体大小的1.5倍
（重点）选择器权重
选择器 权重
继承或* 0,0,0,0
元素选择器 0,0,0,1
（伪）类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
！important ∞
注意：权重叠加时，四个数字不会进位。
盒子模型
盒子分为四大部分：
1.content
2.padding
3.border
4.margin
（重点）border边框
border:width style color
style: solid实线 dashed虚线 dotted点线
合并相邻的边框
border-collapse:collapse;
（重点）padding内边距
padding:5px 10px 20px 30px 上右下左
注意：padding会撑大盒子
注意：如果盒子没有设置宽高，不会撑开盒子
注意：子元素没有设置宽高的时候，如果给子盒子设置padding，不会出现子盒子超过父盒子大小的情况。
（重点）margin外边距
设置盒子与盒子之间的距离
外边距合并：
1.相邻块元素垂直外边距合并问题：取相邻两个外边距的最大值来使用，避免设置这种样式
2.嵌套的块元素垂直外边距塌陷问题：父元素和子元素同时设置上外边距，那么父元素会选择较大值进行整体下移。一般给父元素添加边框或给父元素添加内边距，或给父元素添加overflow:hidden
页面中元素居中的方法：
1.文本水平居中：text-align:center
2.文本垂直居中：line-height:height
3.块元素水平居中：margin:npx auto。必须给盒子先指定宽度
4.行内元素、行内块元素水平居中：给父元素设置text-align:center
(重点)清除外边距
在CSS文件第一句书写：
* {
margin: 0;
padding: 0;
}
注意：不要给行内元素设置上下内外边距，会有兼容问题。
圆角边框
border-radius:length;
length可以是长度或者百分比。
盒子阴影
box-shadow:
h-shadow水平阴影位置，必写，可负
v-shadow垂直阴影位置，必写，可负
blur模糊距离px（模糊程度）
spread阴影尺寸px（阴影大小）
color阴影颜色rgba
inset转变为内部阴影（outset不能写）
影子不占用布局空间
文字阴影
text-shadow:
h-shadow水平阴影位置，必写，可负
v-shadow垂直阴影位置，必写，可负
blur模糊距离px（模糊程度）
color阴影颜色rgba
字体阴影不能设置阴影大小和内外阴影
网页布局
CSS三种传统（PC端） 布局方式：
- 标准流
- 浮动
- 定位
（重点）浮动
使用行内块来做多个盒子在一行内显示，盒子与盒子中间会默认有空隙，使用浮动做中间不会有空隙。
纵：多个块级元素纵向排列找标准流，
横：多个块级元素横向排列找浮动。
定：先定义盒子大小，再定位盒子位置
选择器 {
float:left/right/none
}
（重点）浮动元素特性：
1.脱离标准文档流
2.不保留原先位置，具有文字环绕的特性（不会压住下面盒子里面的文字）
3.浮动的元素具有行内块元素相似特性
4.浮动元素经常和标准流的父亲结合使用
5.一个盒子浮动了 ，它的兄弟一般都要浮动
6.浮动的盒子只会影响它后面的盒子
（重点）清除浮动
当子盒子浮动，而父盒子不方便给高度的时候 ，需要给父盒子消除浮动。
目的：为了不影响父盒子下面的盒子布局。
本质：清除浮动元素脱标造成的影响
策略：闭合浮动，在最后一个浮动元素后面添加一个块元素并使其清除浮动效果
方法： 1.额外标签法；2.父元素添加overflow:hidden/auto/scroll；3.：after伪元素法；4.双伪元素法
1.额外标签法：
在父元素内部的最后添加一个块元素，并使其清除浮动效果
.lastdiv {
clear:both;
}
2.overflow法：
给父元素添加属性overflow
.father {
overflow:hidden;
}
这个方法清除浮动有缺陷，无法显示溢出的部分
3.::after伪元素法
.clearfix::after {
content:".";
visibility: hidden;
clear: both;
display: block;
height: 0;
font-size:0;
}
.clearfix {
*zoom:1;
}
注意：*zoom样式是为了照顾IE7/IE6浏览器的兼容性
4.双伪元素法
在父元素首尾两个位置分别使用一次伪元素法。
.clearfix::before,.clearfix::after{
content:"";
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
*zoom:1;
}
（重点）定位
定位=定位模式+边偏移
定位模式：position
值：static静态定位——不常用
relative相对定位——不脱标——相对自己原来的位置——保留原位置
absolute绝对定位——脱标，不占原位置，比浮动高——子绝父相——相对于最近的有定位的父级盒子来定位，如果没有这样的父元素则以浏览器为准
fixed固定定位——脱标，不占原位置，比浮动高——以浏览器可视窗口为准——可与版心对齐：选择器 {left：50%；margin left：一半版心的px；}
sticky粘性定位——以可视窗口为准——占有原先位置——必须添加边偏移才有效果——效果：当页面中的元素移动到指定好的TOP位置（相对于浏览器可视窗口）时变成固定定位。——相当于：相对定位+固定定位。
边偏移：top:80px
bottom:80px
left:80px
right:80px
注意：给了定位的行内元素可以直接给宽高
给了定位的块元素，默认宽高等于内容大小
浮动的元素不会压住下面标准流中的图文，但是绝对定位和固定定位的盒子会压住图文
关于边偏移的权重：先左后右，先上再下。
设置叠放次序
选择器 {
z-index:1;
}
注意：只有定位的盒子才可以拥有这个属性，默认值是auto。值越大叠放权重越高。如果出现相同权重，则后来者居上。
元素的显示与隐藏
1.display：显示隐藏
none隐藏（不占原位）
block显示（转块级）
2.visibility：显示隐藏
hidden隐藏（占原位）
visible可视
3.overflow：溢出隐藏
visible不做改变
hidden溢出隐藏（不占原位。注意：有定位的盒子慎用）
scroll强制显示滚动条
auto溢出时显示滚动条
CSS高级用法
精灵图（雪碧图）
sprites精灵图技术，主要用于背景小图标的合并使用，可以有效减少图片请求次数。
缺点：图片更换时较复杂，图片缩放会失真，一般精灵图文件较大。
字体图标
iconfont字体图标：显示是图标，实际是字体，只能做出简单的小图标
使用步骤：下载需要的图标→引入下载的图标，保留下载的图标文件以便追加和更新图标库
图标下载网站：
icomoon.io 这是icomoon字体库，外国网站
www.iconfont.cn 这是阿里妈妈字体库
CSS三角
空盒子只设置边框则出现三件，设置四个边的颜色和宽度则可以设置自己想要的三角形
选择器 {
width:0;
height:0;
border-color:上 右 下 左；
border-width:上 右 下 左；
}
CSS用户界面样式调整
1.鼠标样式调整cursor
cursor：
pointer；小手
default；默认的小白箭头
move；移动
text；文本
not-allowed；禁止
注意：不需要记住。
2.表单轮廓outline
input {outline：none；}
3.文本域拖拽按钮取消resize
textarea{resize：none；}
行内块和文字垂直居中对齐
vertical-align: baseline 行内块元素底部与文字基线对齐
top 行内块元素顶部与文字顶端对齐
middle 行内块元素中部与文字中部对齐（实现居中对齐）
bottom 行内块元素底部与文字底端对齐
去除图片底部空白空隙
空隙来源：默认图片与文本基线对齐，空隙是文本基线与文本底线的距离预留。
方法：给图片加属性：vertical-align:bottom 或 middle
也可以给图片加属性：display:block
单行文字溢出省略号
1.强制一行显示{white-space:nowrap;}
2.超出部分隐藏 {overflow:hidden;}
3.溢出部分用省略号代替{text-overflow:ellipsis;}
多行文本溢出省略号
适用于webkit浏览器或移动端
协调让后端人员制作，可以直接设置可以输入的字数。
前端制作时需要注意调整文本框的高度
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;弹性盒子
-webkit-line-clamp: 2;显示2行
-webkit-box-orient: vertical;弹性盒子元素排列方式：垂直
相邻盒子边框合并
margin-left:-1px;
2518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
