css
2022-05-03 14:53:46 0 举报AI智能生成
CSS初中高知识点梳理，一直更新
作者其他创作
大纲/内容
背景
background-attachment固定
scroll
fixed
local
background-size 属性
length
percentage
cover
contain
background-origin 属性
padding-box
border-box
content-box
background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
background-color
color
transparent
background-repeat
repeat
repeat-x
repeat-y
no-repeat
background-image
background-image: url(flower.gif), url(paper.gif)
文本格式
line-height
text-align
left
right
center
justify
text-decoration
none
text-indent
length
text-shadow
h-shadow
v-shadow
blur
color
vertical-align
列表
无序列表 ul
有序列表 ol
边框border
border-style
border-width
border-color
单独边
border-radius
内边距
padding
padding-top
padding-right
padding-bottom
padding-left
盒模型
标准
怪异
display
none
inline
定位
relative
absolute
static
fixed
z-index
inline-block
组合器
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
导航栏
水平
垂直
特异性
渐变
background-image
linear-gradient
radial-gradient
文本效果
text-overflow
word-wrap
word-break
writing-mode
动画
@keyframes
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
过渡
transition-delay
transition-duration
transition-property
transition-timing-function
cursor: pointer;
用户界面
resize
resize: horizontal;
resize: vertical;
resize: both;
textarea {
resize: none;
}
resize: none;
}
outline-offset
媒体查询
CSS3 媒体类型
all
print
screen
speech
响应式设计
图片
使用 width 属性
使用 max-width 属性
背景图像
background-size
contain
background-size：100% 100%
background-size: cover;
为不同设备准备不同图像
视频
width
max-width
在实例网页中添加视频
选择器
简单选择器
属性选择器
伪类选择器
伪元素选择器
组合选择器
字体
font-family
如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"
多个字体系列是用一个逗号分隔指明：
案例：p{font-family:"Times New Roman", Times, serif;}
font-size
字体大小的值可以是绝对或相对的大小
绝对大小
相对大小：
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素
font-style
font-weight
定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
链接
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
a:active 必须跟在 a:hover后面
a:link
a:visited
a:hover
a:active
列表table
tr
th
td
border
text-align
border-collapse
vertical-align
padding
border-spacing
caption-side
border-collapse
响应式表格
外边距
margin
auto
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
有父子关系的两个元素，同时使用margin-top或其他会出现塌陷情况，可以给父元素添加一个overflow:hidden
高度与宽度
witdh
max-width
min-witdh
height
max-height
min-height
轮廓
outline
outline-style
outline-width
outline-color
outline-offset
溢出
overflow
visible
hidden
scroll
auto
浮动
left
right
none
clear
对齐
要使块元素（例如 <div> ）水平居中，请使用 margin: auto;
居中对齐文本
居中对齐图像
左和右对齐
position: absolute;
float
垂直对齐
padding
line-height
使用 position 和 transform
Flexbox
不透明度
opacity
精灵图
圆角 border-radius
四个值
三个值
两个值
一个值
阴影
text-shadow
box-shadow
2D转换
translate
rotate
transfrom-origin
scale
3D转换
translate3d(x,y,z)
perspective
rotate3d
transform-style
object-fit
cover
contain
scale-down
none
fill
多列
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
变量
var() 函数的语法
局部变量
flex
display: flex;
flex-direction
column
column-reverse
row
row-reverse
flex-wrap
wrap;
nowrap
wrap-reverse
justify-content
center
flex-start
flex-end
space-around
space-between
align-items
center
flex-start
flex-end
stretch
baseline
align-content
space-between
space-around
stretch
center
flex-start
flex-end
flex子元素
order
flex-grow
flex-shrink
flex-basis
align-self
0 条评论
下一页
