导图社区 HTML CSS
- 29
- 2
- 0
- 举报
HTML CSS
html和css的常用基础，CSS是层叠样式表cascading style sheets，html是超文本标记语言hyper text markup language。
编辑于2023-08-22 15:01:32 辽宁- 前端
- 相似推荐
- 大纲
HTML+CSS
CSS概念
cascading style sheets
层叠样式表
CSS语法
注释
/* */
选择符{属性:属性值;属性:属性值;属性:属性值;......属性:属性值;}
CSS常见选择符
基本
标签
标签名{}
id
特点
唯一性
#box{}
class
特点
一对多
多对一
.red{}
伪类
:hover
:link
:active
:visited
通配符
*
复合
群组
选择符1,选择符2,....{}
包含
选择符1 选择符2 ...{}
指定
选择符1选择符2...{}
CSS常见属性
文本
font-size
color
line-height
text-align
font-weight
bold
normal
lighter
bolder
font-style
normal
italic
font-family
font-varient
normal
small-caps
text-indent
text-decoration
underline
overline
line-through
none
text-transform
uppercase
lowercase
capitalize
text-overflow
letter-spacing
word-spacing
盒模型
margin
支持四值法
支持单一方向定义
支持取值为负
不支持背景图
垂直相邻合并
父盒子overflow:hidden
子盒子float
border
特点
支持背景图
支持单一方向
不支持四值法
边框楔形
三角形
border:100px solid transparent;
border-top-color:red;
height:0;
width:0;
属性
border-width
border-style
solid
实线
dashed
线状虚线
dotted
点状虚线
double
双线
border-color
padding
支持四值法
支持单一方向
支持背景图
不支持取值负数
需减对应宽高（怪异盒不需要）
content
width
height
浮动
float
left
right
none
clear
left
right
none
both
放在不想被浮动影响的盒子上
定位
相对
relative
特点
不脱标占位
相对自己定位
可以用于细微位置的移动
可以用于绝对定位的参考物
绝对
absolute
特点
脱标不占位
相对包含块定位
不写坐标留原位
子绝父相
固定
fixed
特点
相对窗口定位
脱标不占位
不写坐标留原位
粘性
sticky
特点
需要结合坐标使用
相当于相对定位和固定定位的结合
不脱标占位
静态
static
特点
不脱标占位
不支持坐标属性
不支持层级属性
元素类型
分类
块级
独占一行
可设置宽高
行高可撑开高度
浮动之后会横向排列
内联
在一行显示
不能设置宽高
行高撑不开高度
浮动之后可以设置宽高
不支持text-indent
不支持盒模型相关属性，垂直方向失效
转换
display
block
inline-block
inline
none
隐藏元素
list-item
列表类型
table-cell
单元格类型
应用
不定宽导航水平居中
ul {text-align:center}
li {display:inline-block;}
单行居中多行靠左
.all {text-align:center;}
.all p {display:inline-block;text-align-left};
图片间隙
img{display:block;
img{vertical-align:top/middle/bottom;}
.all{font-size:0;}
图片垂直居中
方法1
.all {height:400px;line-height:400px;}
img{vertical-align:middle;}
方法2
img{vertical-align:middle;}
span{vertical-align:middle;width:0;height:100%;display:inline-block}
表格相关
border-spacing
边框间隙
border-collpase
边框合并
table-layout
固定表格布局
值
fixed
固定表格布局
auto
自动表格布局
empty-cells
无内容单元格显示
值
hide
无内容单元格隐藏
show
无那日单元格显示
背景相关
background-color
background-image
url();
background-repeat
repeat
no-repeat
repeat-x
repeat-y
background-position
水平 垂直
px
%
top right bottom left
background-attachment
scroll
相对盒子
fixed
相对窗口
列表相关
list-style:none
css3
选择符
基本
标签
id
class
*
层级
后代
（空格）
子代
>
相邻兄弟
+
通用
~
伪类
动态伪类
:hover
:link
:active
:visited
:focus
结构伪类
孩子系列
:nth-child()
:first-child
:last-child
:only-child
:nth-last-child()
儿子系列
:nth-of-type()
:first-of-type
:last-of-type
:only-of-type
:nth-last-of-type()
:root
:empty
:not()
否定伪类
:not
语言伪类
:lang
目标伪类
:target
需要结合锚链接使用
放在目标上
加了id的是目标
UI元素状态伪类
:disabled
:enabled
:read-only
:read-write
:checked
属性
[attr]
[attr=val]
[attr^=val]
[attr$=val]
[attr*=val]
[attr~=val]
[attr|=val]
伪元素（内联）
::after {content:""}
::before {content:""}
::first-line
::first-letter
::selection
权重
*
0.1
标签
1
class
10
伪类
10
属性
10
id
100
内联
1000
!important
10000
属性
圆角半径
border-radius
盒子阴影
box-shadow
inset
内阴影
向右
向下
模糊程度
扩展程度
阴影颜色
文本阴影
text-shadow
向右
向下
模糊程度
变形
transform（2D）
translate()
rotate()
scale()
skew()
transform（3D）
定义景深
perspective
定义变形类型
transform-style:preserve-3d;
3D变形
translate3d
rotatex
rotatey
rotatez
scale3d
定义变形起点
transform-origin
过渡
transition
渐变
线性渐变
background:linear-gradient(0deg, #000, #000)
径向渐变
background:radial-gradient(半径 at 位置, #000, #000)
半径：主/次
位置：x/y
线性渐变平铺
background:repeating-linear-gradient(0deg, #000 5px, #000 10px)
径向渐变平铺
background:repeating-radial-gradient(半径 at 位置, #000 5px, #000 10px)
动画
动画的声明
@keyframes 名字{}
动画调用
animation: 名字 .5s linear 0s infinite alertnate forwords
布局方式
弹性盒布局
容器
display:flex
flex-direction
column
row
column-reverse
row-reverse
flex-wrap
wrap
no-wrap
wrap-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
alegn-content
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
项目
flex
flex-shrink
flex-grow
flexbasis
align-self
stretch
flex-start
flex-end
center
baseline
order
网格布局
容器
display:grid
grid-template-columns
200px 200px 200px
20% 50% 30%
repeat(3,200px)
repeat(auto-fill,20%)
1fr 1fr 1fr
1fr 1frr 1minmax(200px,1fr)
grid-template-rows
200px 200px 200px
20% 50% 30%
repeat(3,200px)
repeat(auto-fill,20%)
grid-gap
row-gap
column-gap
grid-template-areas
justify-content
align-content
justify-items
align-items
项目
grid-area
grid-column
grid-column-start
grid-column-end
grid-row
grid-row-start
grid-row-end
多列布局
columns
columns:5 200px;
column-count
column-width
column-gap
column-rule
column-span
column-fill
媒体查询
<link mate="screen and (min-width:960px) and (max-width:1200px)">
@media screen and (min-width:960px) and (max-width:1200px)
盒模型
box-sizing
border-box
怪异盒模型
特点
padding border在width height内
content-box
标准盒模型
特点
width height不包含padding border
兼容
内容
Trident
Gecko
Webkit
Blink
Presto
前缀
-moz-
-ms-
-webkit-
-o-
术语
渐进增强
先低后高，以低版本功能的实现为主，为高版本添加酷炫效果
优雅降级
先高后地，以高版本功能的效果为主，需要处理低版本的兼容
其他
字体图标
http://www.iconfont.cn
锚链接
<a href="#one"></a>
跳转
<a name="one"></a>
<div id="one"></div>
居中方法
定位
方法1
父盒子
position:relative;
子盒子
position:absolute;
top:50%;
left:50%;
margin-left:-宽一半;
margin-top:-高一半;
margin:auto
方法2
父盒子
position:relative;
子盒子
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto
方法3
父盒子
position:relative;
子盒子
position:absolute;
top:calc(50% - 高一半);
left:calc(50% - 宽一半);
方法4
父盒子
position:relative;
子盒子
position:absolute;
top:50%;
left:50%;
translate(-50%,-50%);
弹性盒
方法1
父盒子
display:flex;
子盒子
margin:auto;
方法2
父盒子
displayflex;
justify-content:center;
align-items:center;
方法3
父盒子
display:flex;
justify-content:center;
子盒子
align-self:center
网格
方法1
父盒子
display:grid;
justify-content:center;
align-content:center;
方法2
父盒子
display:grid;
子盒子
margin:auto;
转行内块
方法1
父盒子
line-height: 高;
text-align:center;
父盒子
display:inline-block;
vertical-align:middle;
line-height:高;
方法2
父盒子
text-align:center;
子盒子
display:inline-block;
vertical-align:middle;
父盒子伪元素::after
content:"";
display:inline-block;
vertical-align:middle;
width:0;
height:100%;
方法3
父盒子
text-align:center;
vertical-align:middle;
display:table-cell;
子盒子
display:inline-block;
多行文本垂直居中
父盒子
vertical-align:middle;
display:table-cell;
代码片段
省略号
固定宽
width
不换行
white-space:nowrap;
溢出隐藏
overflow:hidden
省略号
text-overflow:ellipsis
移动端布局
vieport
视口，移动端默认980
dpr
设备像素比
布局方式
百分比布局
等比缩放布局
单位
em
自身的倍数或者父盒子字号的倍数
rem
根（html）字号的倍数
vw
百分之一的视口宽
vh
百分之一的视口高
vmin
百分之一的短边
vmax
百分之一的长边
BFC
可触发的属性
float
left
right
overflow
hidden
scroll
auto
position
absolute
fixed
display
inline-block
table-cell
table-caption
flex
应用
margin-top穿透问题
高度塌陷问题
宽高自适应
宽度自适应内容
float
position
inline-block
高度自适应内容
高度塌陷
子盒子浮动，父盒子高度为0的现象
解决
固定高
优点
简单
缺点
无法自适应
父盒子加overflow:hidden
优点
可自适应
缺点
溢出隐藏
在浮动下面添加一个空盒子，并设置clear:both;
优点
可以自适应
不溢出隐藏
缺点
需要多加载一个盒子
万能清浮法，给父盒子加::after{content:"";display:block;clear:both;}
优点
可自适应
颁布溢出隐藏
也不需要多加载一个盒子
高度自适应窗口
html,body{height:100%;}
HTML5
特点
基本结构更简洁
语法放松
标签语义化
即使没有样式，也能呈现清晰结构
便于搜索引擎优化
便于团队合作，代码的后期维护修改
无障碍性
未来功能
新增语义标签
大语义
header
footer
main
nav
section
article
aside
小语义
figure
figcaption
mark
canvas
video
属性
controls
autoplay
muted
loop
src
支持格式
mp4
ogg
webm
width
height
audio
属性
controls
autoplay
muted
loop
src
支持格式
mp3
ogg
wav
details
summary
source
智能表单
新增属性
required
必填项
autofocus
自动聚焦
placeholder
占位符
autocomplete
是否开启历史记录
值
on
off
pattern
正则验证
新增控件
tel
url
number
min
max
step
range
min
max
step
color
search
date
month
week
time
datatime-local
html常见标签
文本类
标题
h1
一般用于放logo
h2
一般用于放栏目标题
h3
h4
h5
h6
段落
p
修饰类
加粗
b
strong
语义强
倾斜
i
em
语义强
下划线
u
ins
语义强
删除线
s
del
语义强
上下标
sup
上标
sub
下标
表格类
标签
table
tr
td
th
列标题
caption
表格标题
行分组
thead
tbody
tfoot
列分组
colgroup
属性
rules
组分割线
值
all
cols
rows
none
groups
width
height
border
bgcolor
align
水平对齐方式
值
left
right
center
valign
垂直对齐方式
值
top
middle
bottom
baseline
colspan
rowspan
cellspacing
cellpadding
表单类
表单域
form
method
提交方式
值
get
不安全
可分享
处理数据小于2KB
受地址栏长度影响
效率高
获取数据的过程
post
传送数据的过程
不限大小
相对安全
效率低
不可分享
action
目标地址
值
（跳转的地址）
name
target
打开方式
值
_blank
新窗口打开
_self
当前窗口打开
表单控件(type)
文本
text
密码
password
单选
radio
每组需要有相同的name属性值
多选
checkbox
下拉
select>option
文本域
textarea
按钮
image
button
submit
reset
file
相关属性
name
名
value
值
multiple
多选
checked
默认勾选
selected
下拉菜单默认勾选
readonly
只读
disabled
禁用
列表类
有序
ol>li
属性
type
值
1
a
A
i
I
start
无序
ul>li
属性
type
值
circle
disc
square
none
自定义
dl>dt+dd
路径相关
图片
img
属性
scr
title
alt
width
height
超链接
a
属性
href
title
target
路径
相对
同级
./
直接写
上一级
../
下一级
文件夹
文件
绝对
从盘符开始的
D:\.......
从网页页面中使用的
https://img.......
区别
相对
有参照物
不能跨盘符
绝对
没有参照物
本地的不能跨电脑（除非电脑的路径一致）
其他
br
强制换行
hr
水平线
div
span
字符实体
>
<
©
®
语法
双标签
<标签名 属性="属性值"></标签名>
单标签
<标签名 属性="属性值" />
标签，标记，元素
html基本结构
文档声明头
告诉浏览器我的文档类型是html
字符编码
charset="utf-8"
页面标题
title
html概念
hyper text markup language
超文本标记语言