前端问题总结

---

前言

本次总结主要细讲前端学习中遇到的常见问题

---

一、改变盒模型的宽高范围

通常情况下，默认width和height设置的是内容盒宽高。

设计师衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒，这时候，我们可以通过改变宽高的设置范围解决。

内容盒：子元素等内容所在的地方，图中的蓝色方块。
填充盒：内容盒 + 填充区（padding）
边框盒：边框 + 填充区 + 内容盒

通过CSS3属性box-sizing可以改变宽高的设置范围：

1. 宽高设置的是边框盒:

   div{
           width: 100px;
           height: 100px;
           background-color: cadetblue;
           padding: 50px;
           border: 10px solid #e708ee;
           /* 宽高设置的是边框盒 */
           box-sizing: border-box;
       }
   

   结果如下：
   

二、改变背景覆盖范围

默认情况下，背景覆盖边框盒。

可以通过background-clip进行修改：

div{
        width: 100px;
        height: 100px;
        background-color: cadetblue;
        padding: 50px;
        border: 10px dotted #e708ee;
        /* 背景覆盖内容盒 */
        background-clip: content-box;
}

结果如下：

断词规则

用CSS属性word-break调整，会影响文字在什么位置被截断换行

normal：普通，CJK字符（中文），文字截断；非CJK字符（非中文），单词位置截断。

break-all：截断所有。

keep-all：在单词处截断。

因为文字之间没有空格，所以默认为一个单词

空白折叠

单行文本的空白处理：

• white-space:nowrap——空白折叠，且不换行
• white-space:pre——不进行空白折叠，保有空格

边框制作三角形

当一个块盒宽高为0时，给边框一个较大的值，就会发现它的边框其实是四个三角形组成，如下图：

代码为：

        div{
            border-width: 200px;
            border-style: solid;
            border-color: aqua blue red yellow;
            width: 0;
            height: 0;
        }

所以，如果我们要用边框制作三角形，只需要设置另外三个边框颜色为transparent（透明）即可。

注意：如果只设置某一边框的宽度，不会出现三角形。如果宽为0，不会出现任何东西；如果不设置宽，会出现一个长方形。

如何制作等边三角形

计算要设置的等边三角形的边和高，设置四个边框的宽度。

        div{
            border-top: 170px solid blue;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 170px solid transparent;
            width: 0;
        }

文本样式问题

文本的对齐

运用CSS属性text-align设置：

text-align: left; 左对齐
text-align: right; 右对齐
text-align: center; 居中对齐
text-align: justify; 除最后一行外，分散对齐

如何让最后一行也分散对齐：

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

如何处理div中的图片带白边的问题

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

解决方法：

1. 设置父元素的字体大小为0
2. 将图片设置为块盒
   

---

总结

本周总结了前端学习中遇到的一些问题，并说明了解决方法，经过一段时间的沉淀，对前端的理解更加深刻。