CSS基础知识
# CSS 基本样式
颜色
color: rgba(255,0,0,0.3) # alpha 透明度
color: #fff000
1
2
2
文字
color: FFFFFF #颜色
font-family: #字体
font-size: 16px; #字体大小
font-weight: bold #字体加粗
font-style: # 字体样式
text-decoration: none # 清除文字样式
text-indent: 2em # 缩进
line-height: 30px # 行高
text-align: center # 文字/图片 居中
text-overflow: ellipsis # 溢出用省略号(部分游览器)
overflow-wrap: break-word # 自动换行
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
列表
- ul 无需列表、ol 有序列表
list-style-type: none : # 列表样式
list-style-position: inside # 列表在文本框内
list-style-image: url('demo.gif') # 列表图片
list-style: none inside # 简写
1
2
3
4
2
3
4
链接
1. 链接样式
a:link :visited :hover :active # 链接状态
1
2
2
背景
background-color: linear-gradient(to bottom, red, blue); # 渐变色
background-image: url('demo.gif')
background-repeat: repeat-x | no-repeat # 不重复
background-attachment
background-position: left
background-size: 60px/100% auto # 大小
background-size: cover 完全覆盖 | contain 完全适应
background: #00ff00 url('demo.gif') no-repeat center # 简写,不区分顺序
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
排列
text-align: center # 文字/图片 居中
line-height: # line-height=父元素height 标签高度居中
vertical-align: middle # 居中对齐,只对行内元素有效
1
2
3
2
3
轮廓
outline-style: none # 无轮廓
1
阴影
border-shadow: 5px 5px 5px red; # 水平阴影 垂直阴影 模糊阴影 阴影颜色
box-shadow: 0 0 0 10px red; # 水平阴影 垂直阴影 模糊阴影 阴影尺寸(外延尺寸) 阴影颜色 inset;
1
2
2
透明度
opacity: 1 # 不透明
opacity: 0.5 # 半透明
1
2
2
# 元素分类
块元素
- 独占一行
div p h1 h2 ol ul table
1
行元素
span br a i
1
行内块元素
img input
1
更改元素类型
display:inline # 设置为行内元素,与其他元素共享一行,即不独占一行
display:block # 设置为块级元素且独占一行
display:inline-block # 行内块元素
1
2
3
2
3
# 边距
内边距 padding
- 外边距会撑大模型
padding-top/left/right/bottom: 15px/10%
# 简写
padding: 上 右 下 左
padding: 上下 左右
padding: 上 左右 下
1
2
3
4
5
2
3
4
5
外边距 margin
- 合并问题
margin-top: 15px/10%
margin: 0 auto # 居中
1
2
2
元素溢流
overflow: auto 滚动条 | hidden | visible
1
边框 border
border-style: none # 无边框
border-left: 2px solid red # 宽度|样式|颜色
border-radius: 50% # 圆角
border-radius: 15px 15px 15px 15px # 左上 右上 左下 右下
border-top-left-radius
1
2
3
4
5
6
2
3
4
5
6
# 选择器
选择器类型
p {} # 类选择器
#li-id{} # id 选择器
.li-class-type{} # class 选择器
# 通配符选择器
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
组合选择器
# 交集选择器(多个选择器交集,无空格)
p.one { color: blue; }
# 后代选择器(有空格)
p one { color: blue; }
# 子代选择器 ( 大于号)
p > one { color: blue;}
# 并集选择器(或, 逗号分隔)
p, #one, .two {color: blue;}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
伪类选择器
注意要按照 LVHA 顺序
:link :visited :hover :active
1
属性选择器
div[lang="en"]
<div lang="en">Hello</p>
1
2
2
# 布局
# 类别
# 1.流动模型(默认网页布局)
# 2.浮动模型
float: left
脱标
浮动塌陷(浮动清除)
父容器没有设置高度,浮动不会撑开div,需要清除浮动
方法一:clear 属性
.clear{ clear:both; }
1方法二:overflow属性
.clear { overflow: hidden; *zoom: 1;}
1
# 3.层模型
relative: 相对于前一个div位置移动,原位置保留
absolute: 相当于PS的图层,独占一层,不挤占原位置
z-index: -1 决定元素的堆叠顺序
1fix: 当前可视窗口的相对距离
注意点:
- 父相子绝:relative + absolute
# 游览器前缀
-moz- :Firefox 等使用 Mozilla 引擎的浏览器。
-webkit- :Safari 、 Chrome 等使用 Webkit 引擎的浏览器。
-o- :Opera 浏览器早期。
-ms- :IE 和 Edge 等 。
1
2
3
4
2
3
4
# 过渡
transition: height 2s ease-in-out 2s;
transition: 2s ease-in-out; # 默认 all
# 速度
linear: 匀速,相当于(cubic-bezier(0,0,1,1))。
ease: 慢速开始,然后变快,然后慢速结束,相当于(cubic-bezier(0.25,0.1,0.25,1))。
ease-in: 慢速开始,相当于(cubic-bezier(0.42,0,1,1))。
ease-out: 慢速结束,相当于(cubic-bezier(0,0,0.58,1))。
ease-in-out: 慢速开始,慢速结束,相当于(cubic-bezier(0.42,0,0.58,1))。
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 高级布局
# Flex 布局
使用
# 块元素
div { display: flex; }
# 行内元素
span { display: inline-flex ;}
# Webkit 游览器
div { display: -webkit-flex ;}
1
2
3
4
5
6
2
3
4
5
6
容器属性
# 主轴线方向
flex-direction: row # 左到右
flex-direction: column # 上到下
flex-direction: row-reverse # 右到左
# 弹性盒子换行
flex-wrap: nowrap # 不换行
flex-wrap: wrap # 换行
# 简写
flex-flow: row-reverse nowrap
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
子元素属性
# 主轴对齐方式
justify-content: center # 居中
justify-content: flex-start # 起点对齐
justify-content: space-between # 两端对齐
justify-content: space-around # 间隔对齐
# 交叉轴对齐
align-items: center | flex-end
align-items: baseline # 基线对齐
align-items: stretch # 撑满
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
剩余空间分配
flew-grow: 0 # 默认,不分配剩余空间
flew-grow: 1 # 平分剩余空间
flew-grow: >1 # 按比例分配剩余空间
1
2
3
2
3
flew-grow 比例为 1:2:1 总宽: 400px A,B,C:100px
A 的实际宽度为 100+(100)*(1/4)=125 B 的实际宽度为 100+(100)*(2/4)=150 C 的实际宽度为 100+(100)*(1/4)=125
超出空间缩减
flex-shrink 与 flex-grow 正好相反
flex-shrink: 0 # 默认,不调整,元素会溢出
flex-shrink: 1 # 等比例缩小
flex-shrink: 2 # 按比例缩小
1
2
3
4
2
3
4
子元素宽度
flex-basis: auto # 按子元素内容宽度
1
简写
flex: 默认 # 0 1 auto
flex: auto # 1 1 auto
flex: none # 0 0 auto
1
2
3
2
3
特例
align-self # 覆盖align-items
1
# 高级选择器
兄弟元素选择器
<p>1</p>
<p class="test">2</p>
<p>3</p>
.test ~ p { background: red; } # test 后的兄弟节点
1
2
3
4
5
2
3
4
5
开头结尾选择器
<a href="#" title="test">A</a>
a[title^='test'] { background: red;} # 选开头
<a href="#" title="testB">B</a>
a[title$='test$'] { background: red;} # 选结尾
1
2
3
4
5
2
3
4
5
伪类选择器
:root # 根节点
:nth-child(2n+1) # 奇数行
:nth-of-type(n) # 按类型第 n 个
:nth-last-of-type(n)
:last-child
:last-of-type
:empty # 空元素
:target # id 与 url 匹配
www.abc.com/#p1
p:not(.demo) # 不符合
:enabled & :disabled # 禁用
input[type='checkbox']:checked {
margin: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 多媒体
@media 媒体类型and (媒体特性){你的样式}
# 媒体类型: all/print/screen/speech
@media screen and (max-width: 400px) {
.box {
display: none;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 常用CSS 全局配置
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
img {
height: 100%;
}
a {
text-decoration: none;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
line-height: 26px;
color: #303030;
font-weight: 400
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
编辑 (opens new window)
上次更新: 2022/10/25, 02:40:54