【前端学习之HTML&CSS进阶篇】-- CSS第四篇 – 样式总结与补充

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css。
在本节博客中，我们首先会总结一下关于行盒的垂直对齐和样式居中的写法，后半部分给出一些在前面的教程中没怎么提到的样式，作为补充。

一、 行盒垂直对齐

1. 多个行盒垂直方向上的对齐

• 问题：例如多选框和文本不对齐、图标和文本等情况；
• 做法：给没有对齐的元素设置vertical-align【行盒】
  

vertical-align：预设值、数值、百分比

预设值：

middle: 中线对齐；super：上基线对齐、sub：下基线对齐；
top：顶边对齐、bottom：底边对齐
text-top：文字顶边对齐、text-bottom：文字底边对齐

input{
        vertical-align: middle;
        /* 实际上是自己位置变了，导致和文字的相对位置变了，效果上看起来是文字位置变化 */
     }

数值：设置像素，并通过网页检查调整即可；

2. 图片的底部白边

• 问题：图片的父元素是一个块盒，如div，块盒高度自动，图片底部和父元素底边往往会出现空白
  

• 做法：

1. 设置父元素的字体大小为0；
   缺点：如果有文字，结果可想而知，并且由于继承会导致一系列麻烦；
2. 将图片设置为块盒；

二、居中总结

• 居中：盒子在其包含块中居中

1. 行盒/行块盒水平居中

• 直接设置该盒子的父元素text-align: center

2. 常规流块盒水平居中

• 定宽，设置左右margin为auto

3. 绝对定位元素的水平居中

• 定宽，设置左右的坐标为0（left、right），将margin左右设置为auto
• 固定定位是绝对定位的特殊情况，就只是包含块为视口罢了；

4. 单行文本垂直居中

• 设置文本所在元素的行高，为整个区域的高度；

5. 行盒内多行文本的垂直居中

• 只能做出类似居中效果，即根据文本设置盒子上下padding相同；

6. 绝对定位的垂直居中

• 定高，设置上下的坐标为0，将上下margin设置为auto；

三、样式补充

1. display：list-item

• 设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

• 元素本身生成的盒子叫做主盒子,附带的盒子成为次盒子，次盒子和主盒子水平排列；
  如下图中的左边黑点就是次盒子，有点类似于li的样式，且次盒子的样式无法正常调整；
  

• 涉及的css：

1. list-style-type: 设置次盒子中内容的类型，disc – 实心圆；
2. list-style-position: 设置次盒子相对于主盒子的位置，如inside；
3. 速写属性：list-style: type position；

清空次盒子：list-style：none；

2. 图片失效时的宽高问题

• 问题：如果img元素的图片链接失效，img元素的特性和普通行盒一样，无法设置宽高；
  

• 做法：display：inline-block/block；

3.行盒中包含行块盒或可替换元素(图片、视频)

• 问题：行盒的高度与它内部的行块盒或可替换元素的高度无关；
  例如一个a元素内部有一个图片，这个a元素的高度与图片大小无关，只与字体大小有关；
  【消除白边，把图片变成块盒 – 此时a元素高度就变成块盒高度，且宽度撑开变成整个视口宽】

4. text-align:justify

• left: 左对齐
• right: 右对齐
• center: 居中对齐
• start: 默认值，从起始位置对齐
• justify: 除最后一行外，分散对齐(平均分布空白)

p::after{
    content: "";
    display: inline-block;
    width: 100%;
}

应用：盒子内部多个盒子分散对齐，可令外部盒子justify且加上上述处理，内部盒子设置为inline-block实现

5. 制作三角形

实质上是宽高为0的边框样式

.tangle{
    /* 三角形 */
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: red blue green chocolate;
    /* 三角形即把剩余三个颜色设置为transparent即可 */
    /* 或者使用层叠，即先全部设置为透明，单独设置某一边框颜色 */
}

6. direction和writing-mode

开始 start -> 结束 end、左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯，但是左右是绝对的；

• direction设置的是从开始到结束的方向；
  direction: rtl;

• writing-mode：文字书写方向；

例如古诗词的书写：

div{
    /* 从上往下，从右往左 */
    writing-mode: vertical-rl;
    /* 宽度高度互换 */
}

7. uft-8字符

• 数字、汉字等都可以通过转换变成utf-8字符，即实体字符的概念；
• 在伪元素选择器中，不能使用实体字符，只能使用/ + 十六进制代码书写；

总结

在本篇博客中，我们首先介绍了关于行盒的垂直对齐和图像白边的概念，紧接着对于所有的居中样式进行了总结，最后进行了对非常用样式的补充，自此关于CSS进阶篇的主要概念基本讲述完成，我们将要步入js的学习之中。