css的属性
盒子的属性
- 宽度 width，最大最小宽度 max/min-width；
- 高度 height，最大最小高度 max/min-height；
- 外边距 margin；
- 内填充 padding；
- 边框 border；
- 轮廓 outline；
- 行高 line-height；
- 显示 display / visibility；
- 定位 position；
- 浮动 float；
- 超出 overflow；
- 背景 background（简写：color、iamge、repeat、attachment、position）；
- 盒子阴影（CSS3） box-shadow；
- 圆角（CSS3） border-radius；
- 边框图片（CSS3） border-image；
- 背景（CSS3）background-size、background-origin、background-clip；
- 线性渐变（CSS3） linear-gradient；
- 径向渐变（CSS3） radial-gradient；
文字的属性
- 文字大小 font-size；
- 文字加粗 font-weight；
- 对齐方式 text-align；
- 文本修饰 text-decoration；
- 文本转换 text-transform；
- 文本缩进 text-indent；
- 颜色 color；
- 字符间距 letter-spacing；
- 字间距 word-spacing；
- 垂直对齐 vertical-align；
- 空白处理 whit-space；
- 文本阴影（CSS3） text-shadow；
- 溢出隐藏（CSS3） text-overflow；
位移和动画的属性
- 位移 transform：translate；
- 缩放 transform scale；
css中的选择器
- 基本选择器
- 通配符 *
- 元素选择器
- 类选择器 class
- id选择器 id
- 关系选择器
- 后代选择器 ul li
- 子代选择器 ul>li
- 相邻兄弟选择器 li+li
- 所有兄弟选择器 li~li
- 伪类选择器
- 关于a标签的 :link、:visited、:hover、:active
- 表单 :focus :enabled :disabled :checked
- 特定需求 :not :empty :root(html)
- 某个子代 :first-child、:last-child、:nth-child、:nth-last-child、:only-child
- 某个特定类型子代 :first-of-type、:last-of-type、:nth-of-type、:nth-last-of-type、:only-of-type
- 以上的两个区别是，type只会找置定类别的，如果没有指定类别那么会进行分类，而另一个直接是找的最后一个
- 伪元素选择器
- 第一个文字 ::first-letter
- 第一行 ::first-line
- ::before
- ::after
- 输入框占位符 ::placeholder
- 选中的样式 ::selection
- 属性选择器
- css2.1 [attr] (属性有attr) [attr="val"] (属性attr等于val) [attr~="val"] (属性attr包含val) [attr|="val"] (属性attr以val或者val-开头)
- css3 [attr^="val"] (以val字符开头) [attr$="val"] (以val字符结尾) [attr*="val"] (包含val字符)
- css4(兼容不好，建议不用) [attr*="val i"] (忽略大小写)
- 选择器的权重
- 0 * > - ~ :not()
- 1 元素选择器 伪元素
- 10 class 伪类
- 100 id
- 1000 style
- 10000 !important
- 覆盖规律
- 相同：后者会覆盖前者
- 不相同：!important>style>id>class>元素>*>继承>浏览器自带的
css层叠上下文
❝
在css中存在层叠上下文概念，大致的顺序：
❞
层叠上下文的产生条件：
- html根元素；
- position属性不为static或者z-index不为none；
- css3的属性：flex、transform、filter、opacity。
