一, 选择器
1, 类型选择器 (元素选择器)
2, 后代选择器
3,ID 选择器
4, 类选择器
5, 伪类选择器
6, 通用选择器 *: 选择一个元素的所有后代
7, 子选择器 #nav>li: 只选择后代的直接后代, 即子元素
8, 相邻同胞选择器 h2+p: 定位同一个父元素下某个元素之后的元素
9, 属性选择器 a[rel="nofollow"]: 根据某个属性是否存在或属性的值来寻找元素
二, 可视化格式模型
1, 外边距叠加: 外边距的高度等于两个发生叠加的外边距的高度中的较大者
只有普通文档流中的块级的垂直外边距才会发生外边距叠加; 行内框, 浮动框或绝对定位框之间的外边距不会叠加;
2, 修改行内框尺寸的唯一办法是修改行高或者水平边框, 内边距或外边距
3,inline-block: 让元素像行内元素一样水平地依次排列, 框的内容仍符合块级框的行为
4, 相对定位: 元素相对于它的起点移动
使用相对定位, 无论是否移动, 元素仍然占据原来的空间. 因此, 元素会导致其覆盖其他框. 是普通流定位模型的一部分.
5, 绝对定位: 相对于距离它最近的那个已经定位的祖先元素确定的, 若不存在, 那么相对于初始包含块
绝对定位使元素的位置与文档流无关, 因此不占据空间. 可以覆盖页面上的其他元素. 通过设置 z-index 控制叠放次序, 值越大, 框在栈中的位置越高.
相对于已相对定位的祖先元素对框进行绝对定位.
6, 浮动: 浮动会让元素脱离文档流, 不再影响不浮动的元素
clear:right/left/both/none 表示行框的哪些边不应该挨着浮动框
overflow:hidden/auto 包含的内容对于指定的尺寸太大的情况下元素应该怎样; 会自动清理包含的任何浮动因素
三, 背景图像效果
1,h1{background:#ccc url(/img/bullet.gif) no-repeat left center}
2,box-shadow: 垂直和水平偏移, 投影的宽度 (模糊程度), 颜色
3,box-radious
4,opacity:0.8 除了对背景生效之外, 应用它的元素的内容也会继承它
rgba(0,0,0,0.8) 则不会
四, 对链接应用样式
1,:link 没有被访问过的链接
:visited 被访问过的链接
:hover 鼠标悬停处的元素
:active 被激活的元素 (链接被单击时)
:focus 通过键盘移动到链接上时
text-decoartion:none/underline
定义的次序非常重要 LVHFA
2,:target 为目标元素设置样式
3,inline-height 文本垂直居中
4,text-index 文本块中首行文本的缩进
五, 对列表应用样式和创建导航条
1,list-style-image 项目符号
2,cursor 鼠标光标
3,:before :after 伪选择器 content 属性
六, 对表单和数据表格应用样式
1,<caption> 表格的标题 summary: 属性, 表格标签, 用来描述表格内容
2,<thead > 所有列标题 <tfoot><tbody>
前两个在一个表格中只能各使用一次, 但后一个可以使用多次, 且如果使用了前两个, 后一个必须出现一次
3,<th > 行标题, 列标题 <td > 既是内容又是数据
- [CSS] view plain copy
- <thead>
- <tr>
- <th>one</th>
- <th>two</th>
- </tr>
- </thead>
4,<colgroup><col > 对一个或多个列定义和分组
5,boder-collapse:collapse/seperate
6,<fieldset > 对相关的信息块进行分组 <legend>fieldset 的标题
7,<lable > 有意义的描述性标签
8, 将标签与表单控件关联起来:
隐式: 把表单元素嵌套在 lable 元素中
- [css] view plain copy
- <lable>email<input name="email" type="text"/><lable>
显示: 把 lable 的 for 属性设置为相关联的表单元素的 id 名称
- [css] view plain copy
- <lable for="email">email<lable>
- <input name="email" id="email" type="text"/>
9,<em><strong> 可以用来显示提示信息
来源: https://www.2cto.com/kf/201805/746164.html