css知识汇总

混吃等死的小白

已于 2022-06-14 19:29:46 修改

阅读量138

点赞数 1

文章标签： css css3

于 2022-06-14 19:28:35 首次发布

本文链接：https://blog.csdn.net/qq_42444486/article/details/125236652

版权

文章目录

CSS使用方式

行内（内联）直接在标签内使用style属性
内嵌样式表在头部使用

CSS单位

px 最常用单位
%
em 自己本身字体的大小，如未设置则继承父类大小
rem 根元素HTML的字体大小，默认值为16px（一般用于做首行缩进）
vh 1vh = 视口高度的1%
vw 1vw = 视口宽度的1%
vmin vh、vw之间的最小值
vmax vh、vw之间的最大值

CSS选择器

0级（权重 0 0 0 0 = 0 ）

*（通配符）选择所有
空格选择所有后代
，表示并列·
> 表示最近一辈的后代
+ 表示选择后续第一个紧挨的兄弟元素
~ 表示选择后续所有满足条件的兄弟元素
空符号表示选择的是同一个元素（增加权重）

1级（权重 0 0 0 1 = 1 ）

标签选择器选择某一类标签
伪元素（一般不支持单标签）
：：befor { content：’ ’ } 标签之前添加内容
：：after { content：’ ’ } 标签之后添加内容
：：selection 选中触发

2级（权重 0 0 1 0 = 10 ）

类选择器（class） . 类名
属性选择器（新增）
[属性名]{ } 存在某个属性名就能选上
[ 属性名 = ‘属性值’ ] 属性值全相等才能选上
[ 属性名 ^= ’ 字符 ’ ] 存在某个属性，并且属性值以当前字符开头才能选上
[ 属性名 $= ’ 字符 ’ ] 存在某个属性，并且属性值以当前字符结尾才能选上
[ 属性名 *= ’ 字符 ’ ] 存在某个属性，并且属性值包含当前字符才能选上
伪类选择器
：hover { } 鼠标悬停触发
：checked { } 选中触发
：required { } 必填项触发
：disable { } 不可用时触发
：：placeholder { } 提示语句触发
结构伪类
：nth-of-type( ) 选择第几个元素
：nth-of-type( odd even ) 选择奇数/偶数元素
：nth-of-type( 表达式 2n+1 ) 选择表达式选择的元素
：last-of-type 选择最后一个元素
：first-of-type 选择第一个元素
：only-of-type 选择唯一一个的元素
：nth-last-of-type( ) 选择倒数的第几个元素
条件选择器
：not ( ) 选择不满足的元素
a标签（lvha）
：link 未访问状态
：visited 已访问状态
：hover 鼠标悬停时的状态
：active 访问时的状态

3级（权重 0 1 0 0 = 100 ）

id选择器（#id）

4级（权重 1 0 0 0 = 1000 ）

行内样式

5级( 权重最大 )

！important ；

字体类属性

font-family: ‘黑体’;
font-size: 字体大小，最小设置12px, 默认继承html 16px
font-weight:字体粗细
font-style: 控制字体是否倾斜
font-variant: 把小写变成大写的样式，但是变小；
line-height: 设置行高（行高等于高度做到垂直居中）；

背景类属性

background-color
background-image: url( );
background-repeat: 背景图片重复情况
background-position: 背景图片的位置
background-attachment:（背景关联）
scroll：默认值，滚动
fixed：固定（固定基点为窗口）
background-origin: 图片初始绘制点
content-box:（绘制点content中）
padding-box（绘制点在内边距中，默认）
border-box（绘制点在边框中）
background-clip：图片的绘制区域
content-box: (绘制区域在content)
padding-box （绘制区域在内边距之内）
border-box （绘制区域在边框之内，默认）
背景色渐变
background: linear-gradient; (线性渐变)
background: radial-gradient；（镜像渐变）
文本类属性
color
关键字：英语单词
# + 三个16位进制的数
rgb、rgba
color: hsla(0~360, 0%~100%, 0%~100%, 0~1); （色盘）
text-decoration: 文本修饰线
line-through 中划线
text-indent: 首行缩进（可以支持负数，没意义）
text-align: 控制文本水平排列（left ,right,center;justify）;
overflow: 文本超出处理
默认visible可见
hidden：超出隐藏
auto：超出自动出滚动条
scroll：直接垂直水平都加滚动条
text-overflow：
clip：剪切
ellipsis：超出显示三个点
box-shadow：0px 0px 0px 0px red ouset/inset （盒子阴影: X轴偏移量 Y轴偏移量模糊程度模糊大小模糊颜色外部模糊/内部模糊）
隐藏元素的方式
display：none；隐藏后不占位置
opacity：0；（透明度）隐藏后占位置，子级可以单独设置透明度，但永远小于等于父级
visibility：hidden；（可见度）隐藏后占位置，子级可以单独设置
transform：scale（0）；（控制缩放）隐藏后占位置,子级不可以单独设置
overflow：hidden；（超出隐藏）特殊方式，可配合绝对定位实现全部隐藏
边框元素
outline：（轮廓线）不占位置，优先使用
border：（边框线）
virtical-align：
去掉图片下方的空白
使图片和文字居中对齐
垂直方向上居中
盒模型
content：内容显示区域
padding：（内边距）内容和和border之间的空白区域
可设置四个值，分别设置上边距、右边距、下边距、左边距（顺时针方向）
border：（边框线）
** 九宫格制图 **
border-image: url( ) 33.33% round;
** 制作三角形 **
width: 0px;
height: 0px;
border-top:50px solid transparent;
border-bottom:50px solid green;
border-left:20px solid transparent;
border-right:20px solid transparent;
margin:（外边距）盒子与盒子之间的距离
产生的问题
产生margin叠压
产生margin塌陷
** BFC **（让盒子变成封闭盒子，里面的元素不影响外部元素）
<body> 根元素本身就是一个BFC
display：flex/inline-block/table-cell
float : left/right
position : absolut/fixed
overflow: hidden/auto/scroll
两种分类
标准盒子: content-box
Ie盒子（怪异盒子）：border-box
浮动布局
普通文档流：所有标签从上往下，从左到右依次排列
float：（浮动）
包裹性
高度塌陷
清除浮动
在浮动后面的元素添加clear：both
促发BFC
利用伪元素来闭合浮动（消除子级与兄弟元素之间的浮动）
全部使用浮动（一般不使用）
行内元素块状化
形成BFC，可以解决margin塌陷
左中右布局/圣杯布局/双飞翼布局（左右固定，中间随窗口自适应）

position（定位）

static：(静止的，默认值)
relative ：（相对定位）
absolute：（绝对定位）
包裹性
高度塌陷
去浮动
形成BFC
注意（overflow）
overflow 元素同时也是定位元素时，绝对定位的子元素会被裁切
overflow 元素和绝对定位元素之间有定位元素（relative），也会被裁切
当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被父级overflow属性剪裁
居中做法

fixed：（固定定位）

注意点： fixed元素其祖先元素不能有transform：translate
sticky：（粘性定位） bug属性
z-index：（层级）
z-index要生效，position必须设置fixed，absolute，relative 其中之一，一般只使用relative
设置成absolute，fixed ，z-index 自动成为auto

flex （弹性布局）

** 父级盒子属性 **
flex-dicrition ：（决定主轴是x轴还是Y轴，以及方向）
row （默认值）决定主轴是X轴，方向从左到右
row-reverse 决定主轴是X轴，方向从右到左
column 决定主轴是Y轴，方向从下往上
column-reverse 决定主轴是Y轴，方向从上往下
flex-wrap：（控制换行情况）
nowrap（默认值）不换行
wrap 换行
wrap-reverse 反向换行
flex-flow （flex-dicrition与flex-wrap的合成属性）
justify-contet （控制子级元素在主轴上的排列情况）
flex-start（默认值）子级元素排列在主轴的开始
flex-end 子级元素排列在主轴的结尾
center 子级元素排列在主轴的中间
space-between 子级元素平分间隙，两边挨着父级边界
space-around 两边到父级边界间距是儿子之间的间距的一半
space-evenly 两边到父级边界间距和儿子之间的间距一样
align-items （控制子级元素在交叉轴的排列情况）单排生效
flex-start （默认值）子级元素排列在交叉轴的开始
flex-end 子级元素排列在交叉轴的结尾
center 子级元素排列在交叉轴的中间
baseline 子级元素基线对准
align-content （控制子级元素在交叉轴的排列情况）多排生效
flex-start（默认值）子级元素排列在主轴的开始
flex-end 子级元素排列在主轴的结尾
center 子级元素排列在主轴的中间
space-between 子级元素平分间隙，两边挨着父级边界
space-around 两边到父级边界间距是儿子之间的间距的一半
space-evenly 两边到父级边界间距和儿子之间的间距一样
** 子级盒子属性 **
order: （控制子级元素排列位置，默认值为0，值越小越靠前）
flex-grow：（增长因子）控制子级元素增长多少，默认值为0，元素都设置为1时，平分剩余位置
flex-shrink：（缩减因子）控制子级元素缩减多少，有挤压才会生效，默认值为1，元素都设置为0时，不缩减
flex-basis ：控制子级元素在主轴方向上的长度，且权重大于单独设置的宽高，默认值auto
flex：（flex-grow、flex-shrink、flex-basis的合成属性）
align-self：控制子级元素在交叉轴上的排列情况

响应式布局

@media screen { } 利用媒体监察屏幕宽度实现响应式布局
@media screen and （min-width：） and （max-width：）{ }

CSS动效

transform ：（转换）
transform-origin:x,y 修改变换基点
translate（x , y）/ translateX( ) / translateY( ) 平移
rotate（）/ rotateX（） / rotateY（）旋转
scale（）/ scaleX（） / scaleY（）放大缩小
skew( ) / skewX( ) / skewY( ) 倾斜
transition: 属性执行时间执行过程延迟时间; （过渡）