本博客介绍了CSS基本的用法，适合初学者入门学习。
reference:所有属性查找:https://www.w3school.com.cn/cssref/pr_align-content.asp
什么是css
Cascading层叠
Style样式
Sheets列表
创建一个样式表
样式表分类：外部、内部、行内样式
作用
结构与样式分离的方式
便于后期维护与改版
可以用多套样式使网页有任意样式切换的效果
文件结构
1 | <style type='css'> |
选择器
标签选择器
任何一个标签都可以作为样式选择器
1 | p{ |
归类选择器
class
1 | .p1{} |
伪类选择器
常用于超链接
选择整体
a:link未访问的连接
color
a:visited已访问的连接
color
:hover鼠标悬停
不只是超链接
其他文本也可以用hover
1 | <--用于在鼠标悬停在类名为".cart"的元素上时，对其子元素中类名为".cart-list"的元素进行样式设置--> |
1 | 当鼠标悬停在搜索框 input 上时，它的相邻元素 a 的样式会改变，包括背景颜色、边框颜色和文字颜色等。 |
:active激活
点击的时候
:focus
点击后，常用于文本录入提示
结构性伪类
:first-child
所有标签中第一个
:last-child
所有标签中最后一个
:nth-child()
选择特定的
:nth-last-child()
选择特定的 从最后一个开始算
:nth-last-child(2)
:first-of-type
选择一个上级元素下的第一个同类子元素
伪元素选择器
只不过伪元素多加了一个content属性，如果我们对他不进行设置，那么我们设置的伪元素就会不起作用，我们可以设置content的内容为一个空字符串
::selection
选择指定元素中被用户选中的内容
1 | p::selection{ |
::before
可以在内容之前插入新内容
1 | p::before{ |
::after
可以在内容之后插入新内容
::first-line
选择指定选择器的首行
1 | p::first-line{ |
::first-letter
选择文本的第一个字符
1 | p::first-letter{ |
其他选择器
id选择器
不允许重复的名字
1 | #name{ |
*通配符
1 | <!--默认所有统一的字体字号--> |
逗号选择器
联合选择器
空格选择器
子孙（后代）选择器
1 | #div1 p{ |
>选择器
子选择器（不包含孙后代）
1 | <!--不含在div1中div2，div3的范围--> |
+兄弟选择器
相邻兄弟选择器
1 | <!--和div1同级别的p--> |
~兄弟选择器
所有同级的
1 | 表示某元素后所有同级的指定元素，选中的是所有的 |
1 | #btnScrollToTop:checked ~ #top { |
[]
属性选择器
1 | p[class='p1']{ |
优先级问题
强制优先
1 | .div1{ |
同级别
后出现的会覆盖之前的设置
排行榜
1
!important
2
行内样式
3
ID选择器
4
类选择器
5
标签
6
通配符
7
浏览器默认属性
del
1 | .price2>del{ |
属性
背景background
background-color：背景颜色
background-image：背景图片
background-repeat：重复方向
background-attachment：背景是否随滚动条滚动
background-position：背景图片的起始位置
文本
color文本颜色
direction文本方向
ltr、rtl(对阿拉伯数字和符号有效，逆序)
letter-spacing字符间距
npx
line-height行高
npx
text-align文本对齐
left
right
center
justify两端对齐
text-decoration
underline下划线
overline
line-through
text-shadow阴影
5px 5px 10px red
text-transform字母大小写
capitalize
uppercase
lowercase
text-indent首行缩进
npx
nem（字符数）
1 | <--!法1--> |
text-overflow
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
列表 list-style
list-style:none列表数字没有了。
list-style-type
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
list-style-position
outside
list-style-image
url(“image.png”)
字体font
font-family
隶书；宋体
font-style
italic部分斜体
oblique所有字体都可以斜体
font-weight粗细
bold、100-900中的数字
font-size
npx
其他
cursor
pointer;pointer小手
transition
all .2s;
盒子模型
width
height
1 | div{ |
设置好div容器的大小
若有图片或文字溢出，该怎么办
- 超出dv宽度高度的文字或图片进行隐藏处理
- 超出dv宽度高度的文字或图片增加滚动条
溢出overflow
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden超出的部分被隐藏。
scroll不论是否需要，都显示滚动条。
auto按需显示滚动条以便查看其余的内容。
轮廓outline:dashed(虚线) dotted（点状轮廓）solid（实线）double（双线）
边框border
border:1px solid black
距离
border-left
border-right
border-top
border-bottom
solid，none, double
border-style
上右底左
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-color
border-box:
已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
border-radius
50% 变成圆形
padding
文字到div的距离
top
left
margin
div到其他部分的距离
margin-top
margin-left
1 | margin:25px 50px 75px 100px; |
box
box-sizing:
padding的距离由哪产生
| 值 | 说明 |
|---|---|
| content-box | 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 |
| border-box | 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 注：border-box 不包含 margin。 |
| inherit | 指定 box-sizing 属性的值，应该从父元素继承 |
box-shadow
2px 2px 10px #7d7d7d insert;
灰色，内阴影
脱标流
文档流：
空白折叠现象（换行就会有空格 不换行就没有）
高矮不齐，底边对齐
自动换行，一行写满，换行写
脱标流
float：
left：向页面最左边左浮动
下面一层忽略float的
right
none
clear
both
黑色部分清除浮动
不再浮动
本来应该被盖在浮动的下面的会另起一行
不会被覆盖了
清除浮动
1 | #clearDiv:after{ |
子元素与父元素
不指定宽度，默认整个屏幕
不指定高度，默认为0；
指定子元素高度，默认父元素也是那么高。
当子元素为float，则不同步。
定位position
属性
relative
不会改变原来的坑，只是网页渲染位置变化
用来微调位置
absolute
绝对坐标定位
默认以网页作为起始点
脱离了标准文档流，对其他元素进行压盖。
应用：轮播图
left到左边的距离；rights到右边的距离；top到上边的距离；bottom到下边的距离
left，right只用一个
top，bottom也只用一个。
如果是父元素是relative或者absolute，那么以父元素为起始点。（子固父相）
fixed
固定定位
脱离标准文档流
应用：返回顶部
位置
相对自己原来的或者坐标描述
top
向下
left
bottom
向上
right
应用：居中
1 | div{ |
行内和块级的转换display
block
元素转为块级元素
inline
可将元素转为行内元素
inline-block
将元素转为行内块
元素的隐藏
使用display:none;
可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样.
使用visibility:hidden;
可以也可以将元素隐藏，但是元素不放弃自己的位置。（页面上看到的是白色的方块，方块大小和原来的元素大小一样）
覆盖
z-index
数值越大，越在顶层
弹性布局
指定flex布局
display:flex(块级元素)
display:inline-flex(内连块)
flex相关名词
flex容器里的子元素叫做flex项目
只要有子元素 就可以当作是容器
主轴 交叉轴
flex项目沿着主轴方向放置
flex容器的属性
flex-direction:
定义主轴
row默认值：默认水平方向从左到右为主轴
row-reverse:水平方向从右到左为主轴
column:垂直方向从上到下为主轴
column-reverse:垂直方向从下到上为主轴
flex-wrap
定义了如果一条轴线排不下，如何换行
nowrap默认值直：默认不换行
wrap:换行
wrap-reverse:不仅换行还改变了默认方向，元素从下到上排列
flex-flow
flex-direction和flex-wrap的简写形式
flex-flow:row wrap
justify-content
定义了flex项目在主轴上的对齐方式
flex-start(默认值)：默认从行首起始位置开始排列(左对齐)
flex-end:从行尾位置开始排列(右对齐)
center:居中排列
space-between:均匀排列每个元素。首个元素放置于起点，末尾元素放置于终点(均匀排列 首位无间隙)
space-around:均匀排列每个元素。每个元素周围分配相同的空间(均匀排列 首位空)
align-items
定义了Flex项目在交叉轴上如何对齐
stretch默认值：默认弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度(占满容器)
flex-start:元素向交叉轴起点对齐
flex-end:元素向交叉轴终点对齐
center:元素在交叉轴居中
baseline:所有元素向基线对齐
align-content
定义了存在多根主轴线时，Flex项目在交叉轴上如何对齐
stretch(默认)：默认拉伸所有行来填满剩余空间
flex-start:从起始点开始放置元素
flex-end:从终止点开始放置元素
center:将元素放置在中点
space-between:均匀分布项目。第一项与起始点齐平，最后一项与终止点齐平
space-around:均匀分布项目。项目在两端有一半大小的空间
Flex项目属性
order
flex项目的排列顺序
越小越在前面
默认是0
flex-grow
放大比例
默认是0，也不会放大，正常排
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话)（会放大）
flex-shrink
缩小比例0/1
如果所有项目的fIex-shrink属性都不为0，当空间不足时，都将等比例缩小
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
flex-basis
在分配多余空间之前，Flex项目占据的主轴大小(main size)
auto
flex
fIex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
align-self:
auto（默认值）
flex-start
flex-end
center
stretch
baseline;
应用
圣杯布局
