1.css：层叠样式表,是一种表现html的文本样式的一种语言
2.css的引入方式
1. 内联式引入,样式内容直接书写在html标签的style属性中
2. 嵌入式引入：把样式和选择器写在style标签中，style标签放在head标签中
3. 外部式引入：可以通过link标签把外部的css引入到当前页面，link和style一样，都要书写在head标签中
4. @import引入：使用@import，可以在css中 去引入其他的css文件
两种方法使用：
@import "index.css"
@import url("index.css")
3.浏览器渲染的主要流程：
1、浏览器开始解析html，执行的顺序自上而下
2、html解析器将html结构转换成DOM树，一个只含有元素的树
3、css解析器会将css解析为CSSOM，是一个只含有样式的树
4、CSSOM树和DOM树结合构成渲染树，每个元素都包含样式信息
5、计算渲染树上各个元素的位置信息，也就是布局阶段
6、将拥有布局信息的渲染树 显示在浏览器上
4.css阻塞渲染：
1.根据浏览器的流程，只要CSSOM树没有构建完成，那就不会生成渲染树，页面也就不会渲染到浏览器中
2.所以css加载过慢的时候，浏览器会出现白屏的现象
3.css被看做成阻塞渲染的资源，也就是说DOM树一直在等待CSSOM构建完毕，所以就形成了css阻塞。
4.所以我们要精简css
5.选择器：
ID选择器：我们给元素设置ID属性 在css中 通过#+ID属性值 的方式来选择元素
类名选择器：class选择器通过 .+类名的方法来进行选择
标签名选择器：通过标签名来选择元素
后代选择器：使用空格隔开 每两个基础选择器
子代选择器：使用 > 隔开 每两个基础选择器
！！交集选择器：.box>li.show{}
相邻兄弟选择器：相邻兄弟选择器使用+来间隔开,（A + B） 选择A 下边 紧紧贴着A元素的元素，并且符合选择器是B
通用兄弟选择器：使用 ~ 间隔开,A ~ B 选择A元素 后边 所有兄弟元素中 符合B条件的
群组选择器：将多个选择器使用 ，间隔开
属性选择器：根据元素的属性 或者属性值来选择元素
ELE[attr]：拥有attr属性的元素
ELE[attr=val]：拥有attr属性的元素 并且值是val的
ELE[attr^=val]：拥有attr属性的元素 并且值是以val为开头的
ELE[attr$=val]：拥有attr属性的元素 并且值是以val为结尾的
ELE[attr*=val]：拥有attr属性的元素 并且值包含val的
！！ a标签的4个伪类：
link：当a标签拥有链接属性的时候
visited:当链接被访问过以后
hover:鼠标悬停在链接上的样式
active:当链接在激活状态的时候
拥有顺序，爱恨法则： love hate ---》 l v h a
伪元素：
！！ .box:after{}：在.box元素最后面插入一个元素，必须拥有content属性
.box:before{}：在.box元素最前面插入一个元素，必须拥有content属性
p:first-line{}：把一个块级元素的第一行选中
p:first-letter{}:把一个块级元素的第一个文字选中
伪类选择器：
1. 表单伪类选择器：
:read-only 选取不能被用户编辑 可提交 的表单（拥有readonly属性）
:read-write 选取可以被用户编辑可输入的表单元素
:checked 选取被选中的 单选框或多选框(元素随时被选中，随时更新样式)
:disabled 选取被禁用的表单
:enabled 选取没有被禁用的表单
:focus 选取聚焦的表单
::-webkit-input-placeholder //改变 placeholder 的颜色
2. 结构伪类选择器：
:first-child 选取一组元素中是其父元素第一个子节点的元素
:first-of-type 一组元素中，是它父级中第一个同类型的子元素 就会被选中
:last-child 选取一组元素中是其父元素最后子节点的元素
:last-of-type 一组元素中，是它父级中最后一个同类型的子元素 就会被选中
！！ :nth-child(an+b): 在前边选择的所有元素中，选取是其父元素中第 几个（小括号里的限制） 的元素
可以直接是数字（非0的正整数） 从1开始
2n+1 奇数
2n 偶数
odd 奇数
event 偶数
-n+2 前两个
！！ :nth-last-child(an+b) 在所有选中的元素中，选取是其父元素中倒数第几个的子元素
！！ :nth-of-type(an+b) 在所有选中的元素中，选取是其父元素中第几个的同类型的元素
！！ :nth-last-of-type(an+b) 在所有选中的元素中，选取是其父元素中倒数第几个的同类型的元素
:only-child 匹配没有任何兄弟元素的 元素
:only-of-type 匹配没有任何一个同类元素的兄弟元素
:empty 选取没有子元素的元素 不能包含任何的文本和子元素（空格和回车都属于）
:not(X) X是一个选择器 匹配所有元素中 不符合X这个选择器 的元素
优先级排列:!important > style行内 > id > class > 标签名 > * > 默认 > 继承
!important (单独控制某一条样式，写在样式值的最后，分号之前)
6.CSS属性：
字体样式：
！！ color：字体颜色（可继承） transparent 代表透明色
三原色raba,十六进制，hsla也可以设置字体颜色
font-famliy:设置文字的字体(可以继承)
！！ font-size：设置字号大小（继承）单位常见的是 px em rem，
em是相对单位，假设2em的大小就是 2*当前元素的font-size
rem也是相对单位，但是仅仅相对于html元素的字号大小 2rem=2*html标签的字号大小
四线格（顶线 中线 基线 底线）
font-style：字体风格，控制文字的倾斜样式（继承）
1.normal：正常 em var i标签都有默认倾斜的样式，所以可以通过mormal去掉默认的倾斜样式
2.italic 让文字呈现出斜体的样式
3.oblique 让文字倾斜
在文字设计的时候，会有正常体 斜体 粗体等多个字，italic是拿出了斜体，而oblique是让正常体变倾斜
！！ font-weight：用来定义文字的粗细（可以继承）
1.normal：正常 一般用来把strong h 等默认加粗的元素给变成正常
2.bold 加粗
3.bolder 更粗 是一个相对的值，相对父级来说的，比父级高一个档次
4.lighter：相对父级来说，更细
5.100-900:整除100 的整数
100-300：细
400-500：正常
600-900：粗
font合写：
1、font-style、font-weight、font-size/line-height、font-famliy
2、必须出现font-size和font-famliy，否则合写不生效
3、合写在开发中使用的不多，一般分开写
文本样式：
！！ line-height：控制行高
单位： 1.px 行高小于文字大小的时候，可能会重叠
2.比例 相对于自身的字号大小的
3.百分比 相对于自身的字号大小的
vertical-align: 垂直方向的排列
baseline:默认的 基于基线对齐
top:让元素的顶部 与行框的顶部对齐
bottom：靠下边对齐
middle：居中
！！ text-decoration： 文本修饰（不继承）
none：去除下划线 a u
underline:下划线
overline：上划线
line-through:删除线
text-decoration其实是一个简写
text-decoration-line:上划线 下划线 删除线
text-decoration-color：颜色
text-decoration-style：线的类型 实线：solid 虚线dashed 点线：dotted 波浪线 wavy
！！ text-indent：首行文本缩进
值 单位可以是px em 也可以是负值（悬挂缩进）
1em代表一个文字的宽度 因为文字的宽度等于字号大小，所以推荐使用em单位
text-align：水平方向排列(继承)，控制元素内的行框(图片 行标签 文字)进行水平方向的排列
center：居中
left：靠左
right：靠右
justify：两端对齐
letter-spacing：字符间距
word-spacing：词间距
text-transform：转换文本的小写格式
uppercase：定义仅有大写字母
lowercase：定义无大写字母，仅有小写字母
capitalize：文本中的每个单词以大写字母开头
！！ 背景样式：
background-color: 背景颜色的设置
background-image：背景图的设置 url（路径），图片默认在x和y轴平铺
background-position:背景图定位
值可以是 px 百分比 单词
background-position-y 控制y轴位置 可以是数值+单位 / top right bottom 百分比
background-position-x 控制x轴位置 可以是数值+单位 / top right bottom 百分比
background-position ：合写 x和y使用空格隔开
background-repeat:图片平铺
repeat：平铺
no-repeat：不平铺
repeat-x：只在x平铺
repeat-y：在y平铺
background-attachment：用来指明背景图的位置固定在窗口呢，还是跟着包含块移动
scroll：跟着包含块移动
fixed：固定在窗口
background合写：(推荐)
color image position-x position-y repeat
background-origin：背景图原点
content-box padding-box（默认） border-box
background-clip:背景图裁剪
content-box padding-box border-box（默认）
background-size:背景图大小
单位 后边跟1个值 代表x轴，y轴比例缩放 跟两个值空格隔开代表x和y
百分比 百分比相对容器（取决于背景图原点） 两个值都是100% 充满容器，但是比例可能失真
cover:等比缩放图片 缩放到全部充满容器为止 图片可能会超出容器
contain:等比缩放图片，缩放到任意一边充满容器位置 容器可能会有空白
以下背景图的设置 请书写在背景图引入之后，否则可能失效！！！！！！！！！！
多重背景设置前面覆盖后面的！！！！
多栏布局样式：
columns-count 是控制列数
columns-width 每一列的宽度
columns-gap 控制栏之间的间隙
columns-rule 规定分割线 和border设置基本一样
columns-span:跨栏显示 all
columns-count和columns-width冲突的时候columns-width优先
边框样式：
border：可以设置四个方向的边框，border-right border-bottom 。。。。。
边框有3个值：
border-width：边框宽度
border-style：边框 样式 dashed dotted solid
border-color：边框颜色
边框的合写是：
！！ border:width style color
border设置为none 代表没有边框
！！ border-radius:允许设置元素的边框圆角，当使用一个半径的时候，设置的是圆形的角，当使用两个半径的时候，设置的是椭圆形的角
/*8个值：1 2 3 4/5 6 7 8*/
/*1 2 3 4代表横向上的4个位置 5 6 7 8 代表竖向上的4个位置*/
border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
/*设置每个角1个半径，总共4个值*/
border-radius: 30px 40px 50px 60px;
/*横向都是40 竖向都是60px*/
border-radius: 40px/60px;
/*左上右下是40 左下和右上是60*/
border-radius: 40px 60px;
渐变样式：
linear-gradient()： 是一个函数，渐变的本质就是绘制一张图片，所以渐变要放在background属性值中
第一个参数是角度或方向 可以省略（默认至上而下），0deg朝上，顺时针旋转，可以以 to left right top bottom等确定方向
第二个参数是渐变节点
渐变颜色改变的位置和颜色的值
没有书写位置，渐变节点会平分
在每一个颜色值的后边都可以添加百分比百分百就是元素的宽度
background: linear-gradient(90deg,red 40%,pink 50%,deeppink 60%) 0 0 no-repeat;
background: linear-gradient(90deg,red 10px,pink 20px,deeppink 30px) 0 0 no-repeat;
background: -webkit-linear-gradient(top,red,pink,deeppink);
repeating-linear-gradient() ：平铺渐变
radial-gradient()：径向渐变
第一个参数：圆的类型
ellipse：椭圆(默认)
circle：圆形
第二个参数：执行径向渐变的大小
farthest-corner:圆心到最远角
closest-side：圆心到最近的边
closest-corner：圆心到最近的角
farthest-side：圆心到最远的边
第三个参数：圆心的位置
第四个参数：渐变的颜色点
background: radial-gradient(at left top,orangered,greenyellow);
-webkit-background-clip: text 文字颜色渐变
background: linear-gradient(to right,red,green,blue,yellow,pink);
-webkit-background-clip: text;
！！ 过渡动画样式：
transition：无论是添加删除类名 id 还是hover 还是js改变样式，只要元素的样式发生变化，并且改变是拥有值的范围过渡，那么就会进行过渡动画。
transition-property:参加过渡动画的属性，全部是all 多个属性使用逗号间隔开
transition-duration:过渡时间
transition-timing-function: 控制动画类型
linear 匀速 ease先快后慢
可以书写贝塞尔曲线 https://cubic-bezier.com/#.17,.67,.83,.67
transition-delay：延迟时间
合写（顺序如上）：
transition：all 1s linear .5s;
！！ 变形样式：
transform：控制变形
rotate：旋转
rotateX（）单位是deg 沿着x轴旋转
值为正 元素的顶部朝里旋转
rotateY（）单位是deg 沿着y轴旋转
值为正 元素的左边朝外出来
rotateZ（）单位是deg 沿着z轴旋转(可以改变基点)
值为正 元素顺时针旋转
rotate（）单位是deg 沿着元素中心点（x和y的交叉点）
值为正 元素顺时针旋转
rotate3d（） 4个参数 第1 2 3 个参数是x y z 的开关（要么是1 要么是0） 第4个参数是角度值
transform: rotate3d(1,1,0,30deg);
rotate3d（1,1,0 ,30deg）和rotatex(30deg) rotatey(30deg)是不一样的
因为分开写的话，是有一个先后顺序的，坐标轴是跟随平面旋转的
skew()扭曲
skewX 沿着x轴扭曲
skewY 沿着y轴扭曲
skew x和y合写，第一个值代表x 第二个代表y 如果只书写一个，只代表x
scale()缩放
里边的值是一个数值，没有单位，代表比例，默认是1
scaleX 沿着x轴缩放
scaleY 沿着y轴缩放
scale 两个值 一个x 一个y 如果只写1个值 代表x和y一样
translate（） 单位
里边是一个数值带单位 可以是百分比 相对于自身的宽高
translateX() 沿着x轴移动
translateY()沿着y轴移动
translateZ()沿着z轴移动
translate() 第一个值是x 第二个值是y 如果只写一个值，代表x
transform-origin:变换基点,控制元素的变形的变换基点
x轴上 可以是单位 百分比 left right center
y轴上 可以是单位 百分比 top bottom center
！！ 关键帧动画样式：
关键帧：
@keyframes move{
0%或from{}
100%或to{}
动画：
animation-name: 关键帧名称
animation-duration: 关键帧动画执行总时间
animation-timing-function: 动画执行类型 linear匀速
animation-timing-function:steps(12);逐帧动画
animation-delay: 延迟时间
animation-iteration-count: 动画执行的次数 infinite无数次
animation-direction:动画播放方式
alternate:轮回播放
reverse:反向播放
合写：animation：move 1s linear 1s infinite alternate
animation-fill-mode：控制动画起始和结束状态
forwards:执行完最后一帧后，样式停留在最后一帧上
backwards：动画从第一帧上开始
both：动画分别在第一帧开始和最后一帧结束
animation-play-state： 控制动画的播放于暂停
running：播放
paused：暂停
表单样式：
outline:none 去掉获取焦点时表单的外延轮廓
resize: none:去掉多行文本框textarea的可拉伸默认样式
表格样式：
border(废弃 但是可以使用)：后跟一个数值，代表表格边框
cellspacing(废弃 但是可以使用)：控制两个单元格之间的距离
cellpadding(废弃 但是可以使用)：控制单元格和内容之间的距离
width属性(废弃 但是可以使用)： 控制表格的宽度
rowspan：合并行
colspan：合并列
其他样式：
cursor: pointer：鼠标变小手
！！ overflow:定义一个内容太大无法适应容器的时候，应该怎么做
值：
visible：超出内容不会被修剪 显示在元素外 默认
hidden:超出的内容会被裁剪掉 看不见 并且不会生成滚动条
scroll：超出内容被修剪，但是生成滚动条
overflow-x：scroll
overflow-y：scroll
auto：浏览器定夺，如果内容超出就生成滚动条，否则不生成
！！ visibility：控制元素的显示或隐藏
两个值：
visible：元素显示
hidden:1.元素隐藏 保留原来位置
2.里边的元素隐藏是因为继承了隐藏的属性，如果覆盖，就可以显示出来
！！ display：控制元素的显示方式
none：元素隐藏 并且不再占用空间
block：让display：none的元素显示/ 让元素以块元素属性显示
inline：让元素以行元素形式显示
inline-block:让元素以行内块的形式显示
！！ opacity：让元素及元素里的所有内容 包含文字图片 全部透明度改变
后边的值是 1-0
1是完全不透明
0是完全透明
min-height：最小高度
max-height：最大高度
min-width：最小宽度
max-width：最大宽度
宽度设置的优先级问题： min-width>max-width>width
text-shadow：设置文本阴影，后边跟4个值，分别是 x偏移值 y偏移值 阴影模糊值 阴影颜色
多个阴影使用逗号 把多个值隔开
text-shadow: 3px 5px 0px red, 12px 14px 0px blue,19px 22px 0px green;
！！ 文本溢出生成省略号：
/*不能换行显示*/
white-space: nowrap;
/*超出隐藏*/
overflow: hidden;
/*如果文本溢出被隐藏，增加省略号*/
text-overflow: ellipsis;
/*块级标签才能生效*/
display: block;
box-shadow: 盒子阴影
0:设置内阴影inset(不设置默认外阴影)
1：水平偏移值(正向右移动)
2：垂直偏移值(正向下移动)
3.模糊值(负数就是没有)
4.阴影外延值（可以为负）
5.颜色
box-shadow: 0px 0px 4px 7px rgba(43,113,219,1);
filter：滤镜设置，控制模糊，对比度等属性添加到图片上，有很多滤镜的方法供我们使用，多个滤镜使用空格隔开
blur：高斯模糊 默认值是0 值是px做单位
brightness:控制亮度， 0% 代表黑色 100%代表正常 值可以更大
contrast：控制对比度 0%是全黑 100%代表正常
saturate:控制饱和度 0%是完全不饱和 100%代表正常
opacity:透明度
hue-rotate:色相旋转 0deg-360deg
invert: 反转色 百分比单位
greyscale：灰色处理 只是百分比
-webkit-box-reflect:倒影 3个值
1.定义方向 above below left right
2.反射偏移的位置是多少 可以是单位 可以是百分比 可以是负值
3.遮罩图像 (一般使用渐变 ，显示效果只和透明度相关)
-webkit-box-reflect: right 10px linear-gradient(to left,rgba(100,100,100,.8),transparent,transparent);
backface-visibility: 控制元素背面是否可见
hidden：元素背面不可见
visible：默认 元素背面可见
transform-style：设置元素的子元素是位于3d空间中还是平面中，一般设置给3d变换元素的父级
flat：元素在平面 （overflow：hidden也会迫使元素的值是flat）
preserve-3d:子元素位于父元素的 3d空间中
perspective：开启景深，必须配合开启3d使用
景深的原理：近大远小
perspective-origin：改变观察者视角，开启3d并且开启景深后生效
第一个值是x轴的位置 left center right
第二个值是y轴的位置 top center bottom
百分比相对于自身的宽高
7.盒模型
盒子模型的概念： 在html中，把每一个元素当做成一个盒子，拥有盒子的平面外形和空间
盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分构成
盒子模型分为标准盒子模型(box-sizing: content-box)和怪异盒子模型(box-sizing: border-box)，标准盒子模型大小计算方法是 内容（width）+padding+border+margin
怪异盒子模型占用大小计算方法是：内容width（conten+padding+border）+margin
默认的width和height：
当不设置width的时候，width的默认值是auto
1.fill-available：充分利用可使用空间（块元素）
2.fit-content：收缩到合适（浮动和定位的元素）
3.min-content：收缩到最小（常见于表格）
4.max-content：超出容器限制（单词不换行，超出限制）
当height不设置的时候，height的值是auto
auto：高度都是由内容堆叠而成，也就是内部元素撑起来的
！！ margin：设置元素外边距的宽度，理解为当前元素和父级之间，或者时候和兄弟元素之间的距离
值可以是单位也可以是百分比
margin分为4个方向。
margin-left、margin-right、margin-top，margin-bottom 每个方向都可以单独设置值
当值为正的时候：
（自身移动）
margin-left：是让当前元素向右移动
margin-top：让当前元素向下移动
（自身后边的元素移动）
margin-bottom：让当前元素的下边的元素移动
margin-right：让当前元素的右边的元素向右移动
当值为负的时候:
margin-left为负：元素向左移动，覆盖前边的元素，但是不会占用他人空间，自身腾出的位置不再保留。
margin-top为负：元素向上移动，覆盖前边的元素，但是不会占用他人空间，自身腾出的位置不再保留。
margin-right为负：元素不动，本身的大小也不会发生改变，但是，元素所占用的空间大小变小，后边的元素会覆盖上来
margin-bottom为负：元素不动，本身的大小也不会发生改变，但是，元素所占用的空间大小变小，下边的元素会覆盖上来
margin的合写：
margin后跟4个值
margin:10px 20px 30px 40px;分别代表 上 右 下 左
margin后跟3个值
margin:20px 30px 40px;分别代表 上 左右 下
margin后跟2个值
margin:30px 40px;分别代表 上下 左右
margin后跟1个值
margin:40px;分别代表 上下左右 都为这个值
margin父级塌陷：
父级中第一个子元素的margin-top会塌陷到父元素上
父级中最后一个子元素的margin-bottom会塌陷到父元素下边
解决父级塌陷：
1.给父级一个border 边框的宽度不能为0
2.开启BFC
开启BFC有很多种方法，比如 浮动 定位 overflow display
margin垂直方向叠加:垂直方向兄弟margin叠加,叠加以后，取两者最大值作为中间的间隙
!!! margin对各个标签的影响和支持性:
对块元素来说：
对4个方向都是支持的
垂直方向会叠加
父级塌陷
对行元素：
垂直方向不支持margin
水平方向支持，不叠加
对行内块元素：
四个方向都支持
没有叠加效果
如果直接写在父级中，没有塌陷
！！ padding：用来撑开内容和边框之间的距离，padding中是可以显示背景颜色的，padding中可以显示背景图片 背景图片的原点 默认是padding的左上角
padding对行标签的支持性：
四个方向都是支持的，但是垂直方向不能撑开和其他元素的距离
padding不支持auto的值
padding没有负值
扫一扫
3149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
