持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
创建——多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。什么叫更具体，简单理解就是对元素属性的定义多
多重样式优先级
一个文档可以引用多个外部样式表
(内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
复合选择器
-
后代
ul li -
子代
ul>li -
并集
div,p
-
伪类
:link选择所有未被访问的链接:visited选择所有已经被访问的链接:hover这个比较常见，就是当鼠标接触盒子时触发的事件active选择活动链接(鼠标按下未弹起)
需要注意的是，伪类选择器的书写顺序按
lvha来-
:focus 光标的焦点，一般设置在表单
如
input:focus{ background-color:red; }
背景颜色半透明化
用background:rgba(0,0,0,0.3)
需要注意的是,最后的0可以省去,也就是写成 .3
盒子模型
页面布局最简单也是根基的东西
水平居中
- 块级：
margin：0 auto - 行内/行内块：给父元素添加
text-align: center;即可
垂直居中
vertical-align !!有着难以捉摸的坏脾气
vertical-align不影响块级元素的内容居中，只针对行内元素或行内块元素，特别是行内块元素，通常用来控制图片、表单与文字的对齐
模式：baseline,middle,top
去除图片底侧空白缝隙
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐,这样会造成图片底侧会有一个空白缝隙
解决方法:
- 给img加
vertical-align,让图片不与文字基线对齐 - 给img添加
display-block,转化为块级元素
清除无序列表中的小圆点
li{
list-style: none;
}
圆角边框
border-radius: 10px;
其中border-radius的数值越大,弧度越明显
注意：
border-radius可以设置多个值,4个数值从左上角顺时针，这也给了我们更多的发挥空间设置更多样的盒子
阴影
-
盒子阴影
使用属性
box-shadow添加值 描述 h-shadow (必写)，水平阴影的距离 v-shadow (必写)，垂直阴影的距离 blur 模糊距离（虚实） spread 阴影尺寸 color 阴影颜色，一般用半透明的 inset 内阴影还是外阴影 支持连写，inset的值有默认的
outset和insetbox-shadow: x偏移量 y偏移量 模糊半径 扩展半径(可去) 阴影颜色 阴影模式(内/外)可以做叠加，在多个值之间用，隔开，依靠这个可以实现多彩渲染
盒子阴影不占用空间
-
文字阴影
使用属性
text-shadow值 描述 h-shadow (必写)，水平阴影的距离 v-shadow （必写)，垂直阴影的距离 blur 模糊距离(虚实) color 阴影颜色,一般用半透明
margin\padding写百分比
padding四个方向均以父元素的宽度作为参考(隐藏机制计算)
用法 : 做自适应操作
css细节vh vw
视口单位
1vh 是视图窗口高度的百分之一
1vw 是视图窗口宽度的百分之一
vmin: 选取vw和vh最小的一个
vmax: 选取vw和vh最大的一个
这个用到比较少，不过需要保证当看到的时候，能够理解代码的意思
文本模糊
text-shadow: #111 0 0 5px;
不允许选中 : user-select: none;
是不是很熟悉，但你想复制某文库的东西，发现无法选中
可编辑
contentEditable
与上述相反，该属性定义页面中的某文本元素，不仅可选中，还可对他进行编辑
