CSS基础知识小结

1. <a> 标签：在标签中可嵌套除他自己以外的任何元素。

• terget属性：_self：在当前页面打开超链接；_blank在新的页面中打开超链接。
• 将href属性值设为#，点击后可跳转到页面顶部。
• 将href属性值设为‘# 目标元素的id属性’，点击后可跳转到页面指定位置。

2. <img>属于替换元素（介于块元素与行内元素之间）
3. 使用css的方式：

• 内联（行内）样式（不推荐）
• 内部样式表：<style>...</style>
• 外部样式表（开发中常用）<link rel="stylesheet" href="https://juejin.cn/post/...">

4. 选择器

• 通配选择器：*{...}选中页面中所有元素。
• 复合选择器：如div.red{...}
• 关系选择器：子元素选择器（父元素>子元素），后代元素选择器（祖先 后代），兄弟元素选择器（选择下一个兄弟：前一个 + 下一个；选择以下所有兄弟：前一个 ~ 后面所选兄弟）
• 属性选择器：p[属性名]{...}、p[属性名=属性值]{...}、p[属性名^=属性值]{...}（指定值开头的元素）、p[属性名$=属性值]{...}（指定值结尾的元素）、p[属性名*=属性值]{...}（含有指定值的元素）
• 伪类选择器：伪类用来描述一个元素的特殊状态。一般以：开头。
• 权重：内联样式(1000) > id选择器(100) > 类和伪类选择器(10) > 元素选择器或伪元素(1) > 通配选择器(0) > 继承样式(无优先级)；进行比较时，将所有选择器优先级相加(不进位)进行比较。
• ！import能使样式优先级最高，但是慎用！

5. 伪类：

• li : first-child , li : last-child , li : nth-child (在所有元素中进行排序)
• li : first-of-type , li : last-of-type , li : nth-of-type (在同类型元素中进行排序)
• 超链接伪类：a : link(未访问)a : visited（已访问）a : hover（悬停）a : active（点击）

6. 伪元素：一般以: :开头，表示并不存在的元素。

• :before/:after 元素的开始或最后，需结合content属性使用，如

div::before{
    content:...；
}
复制代码

7. 颜色

可以用两种方式表示：

• RGB（RGBA表示不透明度）
• HSL（色相，饱和度，亮度）

8. 元素状态

• 在文档流中：1、块元素：在页面中独占一行，默认宽度是父元素的全部，默认高度被内容撑开。2、行内元素：不独占一行，只占自身大小，在页面中自左向右排列，一行容纳不下换第二行，默认宽度和高度都被内容撑开。
• 不在文档流中

9. 布局

（1）水平方向

• margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区宽度。
• 若上式相加不成立时，称为过渡约束。
• 若以上七个值中没有auto，且相加等式不成立，浏览器会自动调整margin-right使其满足等式
• 若以上七个值中width，margin-left，margin-right这三个值某个为auto，且相加等式不成立，浏览器自动调整auto的值：1 、三个值中将宽度和一个外边距设为auto，则宽度会被调整为最大，设为auto的外边距会变为0；2、三个值都设为auto，则外边距为0，宽度最大；3、三个值中将两个外边距设为auto，宽度固定，则会将外边距调整为相同值

（2）垂直方向

• 父元素未设置高度时，会被子元素撑开；
• 父元素设置高度时，高度固定，不随子元素变化。若子元素大小超过父元素则会从父元素溢出；
• 使用overflow属性设置父元素如何处理溢出部分：visible、hidden、scroll、auto、overflow-x、overflow-y；

10. 盒模型

（1）外边距的折叠：垂直方向的相邻外边距会发生折叠。

• 在兄弟元素中，若外边距均为正，则取最大值；若均为负，取绝对值最大的；若为一正一负，取两者和；
• 在父子元素中，父子元素相邻外边距，子元素会传递给父元素（上外边距）；

（2）display属性：设置元素显示类型

• inline行内元素
• block块元素
• inline-block行内块元素（既可以设置高度宽度，又不独占一行）
• table表格
• none不显示

（3）visibility属性：设置元素显示状态

• visible默认值，元素正常显示
• hidden隐藏，但仍占据位置

（4）浏览器默认样式（通常情况下需要去掉默认样式）

*{
    margin:0;
    padding:0;
}
复制代码

或者使用重置样式表reset.css/normalize.css

（5）box-sizing属性：

• content-box：默认值，width和height是设置内容区的大小
• border-box：width和height是设置整个盒子可见框大小

（6）box-shadow：设置阴影，不会影响页面布局。

box-shadow: xxpx(水平偏移)  xxpx(竖直偏移) xxpx(模糊半径) color(颜色);
复制代码

（7）border-radius：设置圆角。

• 4个值时：左上 右上 右下 左下
• 3个值时：左上 右上/左下 右下
• 2个值时：左上/右下 右上/左下
• 设为50%时，为圆形。

11. 浮动：浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。

元素设置浮动后，水平布局的等式便不需要强制成立，并从文档流中脱离，不再占用文档流中的位置，默认情况下不会移出父元素。

• none（默认）
• left
• right

脱离文档流的特点：（不再区分块元素与行内元素）

• 块元素：块元素不再独占页面的一行，高度和宽度默认被内容撑开
• 行内元素：变成块元素，可设置宽高，特点与块元素一样

12. BFC（block formatting context）块级格式化环境：解决高度坍塌问题。BFC是CSS中隐含的一个属性，开启BFC该元素会变成一个独立的布局区域。

开启BFC后的特点：

• 开启BFC后的元素不会被浮动元素覆盖；
• 开启BFC后的元素子元素和父元素外边距不会重叠；
• 开启BFC后的元素可以包含浮动的子元素；

开启元素BFC的方式：

• 设置元素的浮动（不推荐）
• 设为行内块元素（不推荐）
• 将元素的overflow设为一个非visible值，如overflow：hidden/auto

高度坍塌最终解决方案：使用::after伪元素，如

box1::after{
    content: ' ';
    display: block;
    clear:both;
}
复制代码

同时解决高度坍塌与外边距重叠问题：

.clearfix::before,
.clearfix::after{
    content: ' ';
    display: table;
    clear:both;
}
复制代码

clear:清除浮动元素对当前元素的影响：left、right、both（清除两侧中影响较大的一侧）

13. 定位：通过定位可将元素摆放到页面任意位置。开启定位后需要设置元素偏移量来设置元素位置（top\bottom\right\left）

• static（默认值）
• relative（相对定位）

（1）开启相对定位后没设置偏移量不会发生变化
（2）相对定位是参照于元素在文档流中的位置
（3）相对定位会提升元素层级
（4）相对定位不会使元素脱离文档流，不会改变元素性质

• absolute（绝对定位）

（1）开启绝对定位后没设置偏移量不会发生变化
（2）元素会从文档流中脱离，会改变元素性质
（3）绝对定位会提升元素层级
（4）绝对定位是相对于其包含块进行定位的（包含块containing block：在正常情况下，包含块就是离当前元素最近的祖先块元素；绝对定位里的包含块就是离他最近的开启定位的祖先元素，如果所有祖先元素都没开启定位，则根元素就是它的包含块）
（5）开启绝对定位后，水平方向布局等式需要加上left和right，增加到9个值，当发生过渡约束时，若9个值中没有auto则自动调整right值使等式成立。可设为auto的值：margin，right，left，width。left和right默认值是auto。
（6）垂直方向布局也要加上top和bottom。
（7）要使元素在包含块中/页面中水平垂直均居中，可使
margin:0; left:0; right:0; top:0; bottom:0;

• fixed（固定定位）

也是一种绝对定位，绝大部分特点和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位。

• sticky（粘滞定位）

和相对定位特点基本一致，不同的是粘滞定位可以使元素到某个位置时将其固定，但兼容性不好。

14. 字体族

font-family:可选值有5个，分别表示大的字体分类，而不是字体样式。

• serif（衬线字体）
• sans-serif（非衬线字体）
• monospace（等宽字体）
• cursive（草书字体）
• fantasy（虚幻字体）

font-face:可将服务器中的字体直接提供给用户去使用（存在版权问题）

@font-face{
    font-family:'自定义字体名';
    src:url('路径')format('truetype');
}
复制代码

15. 图标字体（iconfont）

（1）fontawesome使用步骤：

• 下载：fontawesome.com/
• 解压
• 将css和webfonts文件夹添加到项目中

• 将all.css通过<link>引入到网页中
• 使用图标字体：查阅zeal中的fontawesome，只有fas和fab是免费的。如<span class="fas fa-bell"></span>或者<span class=""fas/fab>&#x图标编码</span>

（2）给列表图标指定样式（通过伪元素）,如：

li::before{
    content:'\f1b0';                     /*图标编码前加一个反斜杠*/
    font-family:'Font Awesome 5 Free';   /*打开all.css查找@font-face的fas或fab*/
    font-weight:900;                     /*打开all.css查找@font-face的fas或fab*/
}
复制代码

（3）也可以使用阿里的矢量图标库www.iconfont.cn/ ，图标较多，但使用需要下载。

16. 行高line-height：指文字占有的实际高度。

• 将行高设置为和高度一样的值能使单行文字在一个元素中垂直居中
• 行高经常用来设置文字的行间距，行间距=行高-字体大小

17. 处理网页空白：white-space

• normal默认值
• nowrap不换行
• pre保留空白（空格，换行）

.box1{
    width:200px;
    white-space:nowrap;       /*不换行*/
    overflow:hidden;          /*使溢出部分隐藏*/ 
    text-overflow:ellipsis;  /*使溢出的文字显示为省略号*/
}
复制代码

18. 雪碧图

（1）解决图片切换时闪烁问题：将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示相应的图片，这样图片会同时加载到网页中有效避免闪烁问题，这个技术称为css-sprite，这种图称为雪碧图。
（2）雪碧图使用步骤：

• 确定要使用的图标
• 测量图标大小
• 根据测量结果创建一个元素
• 将雪碧图设为元素的背景图片（background-image）
• 设置一个偏移量以显示正确图片（background-position）

（3）雪碧图特点：
一次性将多个图片加载进网页，降低请求次数，加快访问速度，提升用户体验。
19. 居中方式：
适用于元素大小确定的居中方式

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
复制代码

适用于元素大小不确定的居中方式

left:50%
right:50%
transform:translateX(-50%) translateY(-50%);
复制代码