盒模型
box-sizing：规定计算一个元素实际宽高的方式
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
CSS的书写位置
| 属性名称 | 描述 |
|---|---|
| style | ① 内嵌式，书写在 head 标签对中，使用<style></style>标签对，里面书写 css 样式。例如： <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> ② 行内式，直接在标签上书写 style 属性设置 css 样式。这种方式不常用，了解即可 示例：<h1 style="color:blue;text-align:center">这是一个标题</h1> |
| link | 链接外部样式文件，例如： <head> <link rel="stylesheet" href="css文件"> </head> |
| @import | 导入样式规则 （不常用，了解即可） 例如：@import url(‘css 文件’) |
伪元素
**伪元素概念：**CSS 在渲染文档的时候，伪元素可以通过 CSS 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。
伪元素特点：
优点：
- 不占用 DOM 节点，减少 DOM 节点数。
- 让 CSS 帮助解决了一部分 JavaScript 问题，简化了开发。
- 避免增加毫无意义的页面元素。
缺点：
- 不利于调试。
- 伪元素不真正在文档内容中体现，只在视觉效果上体现，所以不能给伪元素添加具有实际意义的内容，这部分内容不会搜索引擎抓取。
伪元素类型：
根据W3C规范，不考虑兼容IE8及以下版本浏览器的情况下，伪类使用单冒号（如:hover,:visited），伪元素使用双冒号。
| 属性名 | 描述 |
|---|---|
| ::before | 作为匹配选中元素的第一个子元素，必须设置 content 属性 |
| ::after | 作为匹配选中元素的最后一个子元素，必须设置 content 属性 |
| ::selection | 设置文档中被用户高亮的部分，即使用鼠标圈选的部分（不常用，了解即可） |
| ::first-letter | 选择块元素中的第一个字母设置样式（不常用，了解即可） |
| ::first-line | 选择块元素中的第一行全部文字设置样式（不常用，了解即可） |
::before和::after
::before和::after在被选中元素里面、元素现有内容之前（后）插入内容，需要使用content属性指定要插入的内容。该内容默认不脱离文档流，占据实际元素空间。可通过定位实现与选中元素的绝对定位。
特点：
- 默认display: inline；
- 必须设置content属性，否则一切都是无用功；
- 默认user-select: none，::before和::after的内容无法被用户通过鼠标长按滑动选中的；
- 会继承原本元素的CSS属性（如原元素的颜色等）
应用场景：
:before和::after常被用来和content属性配合实现各种辅助效果
- 清楚浮动带来的影响（解决高度塌陷问题）
2
3
4
5.clear::after{
clear: both;
content:'';
display: block;
}将clear类添加到浮动元素的父元素上（注意此方法适用该父元素的子元素必须都是浮动元素，如果掺杂非浮动元素，浮动影响不会完全清理），则会清除浮动带来的影响，这样不必再新建一个标签去清除浮动。
CSS clear属性：
值 描述 none 允许两边都可以有浮动对象 both 不允许有浮动对象 left 不允许左边有浮动对象 right 不允许右边有浮动对象 图文详解CSS clear: both清除浮动的作用。
- 配合@font-face实现字体图标
- 实现图片生成
利用content属性的
url()功能生成图片，示例：
2
3a::before{
content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
}实际项目中，通过url()方法实现图片生成的并不多，主要因为这种方式对图片的尺寸不好控制，设置宽高无法改变图片的固有尺寸。通常更多地是通过background-image属性来模拟
2
3
4
5
6
7div::before{
content:"";
background-image: url("test1.jpg");
display: inline-block;
width: 100px;
height: 100px;
}
- 实现计数器
通过content属性的
counter()方法，可以不使用列表元素实现序号功能。counter 要配合
counter-increment和counter-reset属性使用。counter-reset 给同级元素增加计数器，比如一个页面有多个H1元素，那就给body加计数器。一个H1元素里面有多个H2元素，那就给H1元素加计数器。
counter-increment 增加计数器数值。
2
3
4
5
6
7
8
9
10
<h1>哺乳动物</h1>
<h2>狗</h2>
<h2>猴子</h2>
<h2>猩猩</h2>
<h1>冷血动物</h1>
<h2>鱼</h2>
<h2>蛇</h2>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1::before{
counter-increment: section;
content:counter(section)'、';
}
h2:before{
counter-increment: subsection;
content: counter(section)'.'counter(subsection)'、';
}
更多内容请查看CSS常用伪元素详解。
伪类
**伪类概念：**伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。
语法格式如下：
1 | selector:pseudo-class { |
| 属性名 | 描述 |
|---|---|
| :link | 选择所有未被访问的超级链接 |
| :visited | 选择所有访问过的超级链接 |
| :active | 选择被用户激活的元素 |
| :hover | 选择鼠标悬停的元素 |
CSS3新增伪类
不常用，了解即可
| 属性名 | 描述 |
|---|---|
| :empty | 选择没有任何子级的元素 |
| :focus | 选择当前获得焦点的元素 |
| :enabled | 选择已启用的元素 |
| :disabled | 选择禁用的元素 |
| :checked | 选择选中的输入元素（仅适用于单选按钮或复选框） |
| :root | 选择根元素，即标签 |
标签选择器、id、class 选择器
| 属性名 | 描述 |
|---|---|
| element | 标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素 示例：p{color:red;}选择所有的 p 标签 |
| #id | id 选择器，使用井号#作为前缀，表示选择指定 id 的元素 示例：#firstname{color:yellow;} 选择 id=firstname" 的元素 |
| .class | class 选择器，使用点.作为前缀， 表示选择指定类名的元素 p 示例：.intro{color:red;} 选择 class="intro" 的元素 |
复合选择器
| 属性名 | 描述 |
|---|---|
| element1 element2 | 后代选择器，使用空格分隔两个元素 示例：.box p{} 表示选择类名为 box 的标签的后代元素 p 标签 |
| element1.class | 交集选择器 示例：h3.spec{} 表示选择有.spec 类的<h3>标签 |
| element1,element2 | 并集选择器，也叫分组选择器，使用逗号隔开 示例：ul, ol{} 表示同时选择<ul>标签和<ol>标签 |
元素关系选择器
| 属性名 | 描述 |
|---|---|
| element>element | 子选择器，使用 > 符号分隔两个元素 示例： div > p {} 选择<div>下的所有子级<p>元素 |
| element+element | 相邻兄弟选择器，使用 + 分隔两个元素 示例：div + p {}选择所有紧接着<div>元素之后的第一个<p>元素 |
| element1~element2 | 通用兄弟选择器，使用 ~ 分隔两个元素 示例：p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素 |
序号选择器
| 属性名 | 描述 |
|---|---|
| :first-child | 匹配其父元素中的第一个子元素 示例：p:first-child{} 匹配<p>的父元素的第一个<p>元素 |
| :last-child | 匹配父元素中最后一个子元素 示例：p:last-child{}匹配<p>的父元素下最后一个<p>元素 |
| :nth-child(n) | 匹配父元素中的第 n 个子元素 示例：p:nth-child(2)匹配<p>的父元素中第 2 个子元素<p>标签 |
| :nth-of-type(n) | 匹配同类型中的第 n 个同级兄弟元素 （不常用，了解即可） 示例：p:nth-of-type(2){}指定每个<p>元素匹配同类型中的第 2 个同级兄弟元素 |
| :nth-last-child(n) | 匹配属于其父元素的第 n 个子元素的所有元素，从最后一个子元素开始计数 （不常用，了解即可） 示例：p:nth-last-child(2){}指定每个<p>元素匹配同类型中的倒数第 2 个同级兄弟元素 |
| :nth-last-of-type(n) | 匹配同类型中的倒数第 n 个同级兄弟元素，从最后一个子元素开始计数（不常用，了解即可） 示例：p:nth-last-of-type(2){}指定每个<p>元素匹配同类型中的倒数第 2 个同级兄弟元素 |
浮动
| 属性名 | 描述 |
|---|---|
| float | 设置元素浮动 |
| BFC | 块级格式化上下文，它是页面上一个独立的容器 |
| overflow | 溢出隐藏：溢出盒子边框的内容会被隐藏，也可以让盒子形成 BFC（块级格式上下文） |
| clear | 清除元素的浮动 |
定位
| 属性名 | 描述 |
|---|---|
| position | 规定元素的定位类型 |
| relative | 定义相对定位 |
| top | 设置定位元素距离顶部的距离 |
| bottom | 设置定位元素距离底部的距离 |
| left | 设置定位元素距离左侧的距离 |
| right | 设置定位元素距离右侧的距离 |
| absolute | 定义绝对定位 |
| z-index | 设置定位元素的堆叠顺序，数值大的会盖住数值小的 |
| fixed | 定义固定定位 |
鼠标样式
| 属性名 | 描述 |
|---|---|
| cursor | 设置光标的形状 |
边框
| 属性名 | 描述 |
|---|---|
| border-width | 设置边框的宽度 |
| border-style | 设置边框线的形状 |
| border-color | 设置边框的颜色 |
| border-top-width | 设置上边框宽度 |
| border-right-width | 设置右边框宽度 |
| border-bottom-width | 设置下边框宽度 |
| border-left-width | 设置左边框宽度 |
| border-top-style | 设置上边框样式 |
| border-right-style | 设置右边框样式 |
| border-bottom-style | 设置下边框样式 |
| border-left-style | 设置左边框样式 |
| border-top-color | 设置上边框颜色 |
| border-right-color | 设置右边框颜色 |
| border-bottom-color | 设置下边框颜色 |
| border-left-color | 设置左边框颜色 |
| border-top | 上方向边框样式的复合写法 |
| border-bottom | 下方向边框样式的复合写法 |
| border-right | 右方向边框样式的复合写法 |
| border-left | 左方向边框样式的复合写法 |
| border | 边框的复合写法，设置所有的边框属性 |
| solid | 定义实线边框 |
| dashed | 定义虚线边框 |
| dotted | 定义点状线边框 |
圆角
| 属性名 | 描述 |
|---|---|
| border-top-left-radius | 设置左上方的圆角 |
| border-top-right-radius | 设置右上方的圆角 |
| border-bottom-left-radius | 设置左下方的圆角 |
| border-bottom-right-radius | 设置右下方的圆角 |
| border-radius | 设置圆角的复合写法 |
浏览器前缀
| 属性名 | 描述 |
|---|---|
| -webkit- | 谷歌浏览器的私有前缀 |
| -moz- | 火狐浏览器的私有前缀 |
| -ms- | IE、Edge 浏览器的私有前缀 |
| -o- | 欧朋浏览器的私有前缀 |
2D/3D 转换
| 属性名 | 描述 |
|---|---|
| transform | 对元素进行旋转、缩放、移动或倾斜 |
| transform-origin | 设置元素变换的原点 （不常用，了解即可） |
| scale | 设置缩放变形（不常用，了解即可） |
| skew | 设置斜切变形（不常用，了解即可） |
| translate | 设置位移变形 |
| perspective | 设置透视强度，即“人眼到舞台的距离” |
本篇文章均转载自arry老师的教程，仅供本人学习使用。
本文转自 https://blog.cilicili.xyz/posts/abf944f0.html，如有侵权，请联系删除。
标签：样式,前端,元素,边框,设置,border,选择器,CSS,属性 From： https://www.cnblogs.com/hustshu/p/16777708.html