css
2022-05-03 14:53:46 0 举报AI智能生成
CSS初中高知识点梳理，一直更新
作者其他创作
大纲/内容
背景
<span style="font-size: inherit;">background-attachment固定</span><br>
scroll
fixed
local
background-size 属性
length
percentage
cover
contain
background-origin 属性
padding-box
border-box
content-box
background-position
left top<br>left center<br>left bottom<br>right top<br>right center<br>right bottom<br>center top<br>center center<br>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 {<br> resize: none;<br>}
outline-offset
媒体查询
CSS3 媒体类型
all
print
screen
speech
响应式设计
图片
使用 width 属性
使用 max-width 属性
背景图像
background-size
contain
background-size：<span style="color: rgb(0, 0, 0); font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", Verdana, Arial, 微软雅黑, 宋体; font-size: 14px; background-color: rgb(253, 252, 248);">100% 100%</span>
background-size: cover;
为不同设备准备不同图像
视频
width
max-width
在实例网页中添加视频
选择器
简单选择器
<span style="font-size: inherit;">属性选择器</span><br>
伪类选择器
伪元素选择器
组合选择器
字体
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后面<br>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
<span style="color: rgb(220, 20, 60); font-family: Consolas, "Courier New", Courier, monospace; font-size: 15.4px; background-color: rgb(241, 241, 241);">center</span>
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 条评论
下一页
