非零基础自学前端最后一遍一 HTML+CSS 6 CSS属性-文本 6.5 text-align的justify

深碍√TFBOYSˉ_ 2024-03-25 10:17 44阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  6 CSS属性-文本
         *   *  6.5 text-align的justify

![在这里插入图片描述][ef9dd87dff23406eab194566888274ce.png_pic_center]

#### 一 HTML+CSS ####

#### 6 CSS属性-文本 ####

##### 6.5 text-align的justify #####

![在这里插入图片描述][17ecdd0390bf4feba4c4c7ca9212b627.png_pic_center]

![在这里插入图片描述][7915eaef59ee4552a7e94e73e8461bae.png_pic_center]

注意看这里，其实每一行还是有一定空间的，只不过确实放不下了，所以直接换行了

当然中文不是特别明显，来一段英文

![在这里插入图片描述][04cc4d978a3742e9935665eb9aca26f1.png_pic_center]

明显了，因为text-align 有一个默认的left，所以都是右边留出来了

设置为center看看

![在这里插入图片描述][7ba8dbe87a104765b485da375f783a7c.png_pic_center]

这样就两边都留出一样的了

![在这里插入图片描述][5441fc4afa434875b48f3b7a58dd2c69.png_pic_center]

其实这个是有效果的，边缘卡的死死的。这就是只有一行的时候看不到效果的原因，这里最后一行也没有进行分配

![在这里插入图片描述][2554140dae4546dd85c3b60525d45bf1.png_pic_center]

如果我想要最后一行也生效

![在这里插入图片描述][fbc2b006475f46d2b1e22f503da43e95.png_pic_center]

这样就行了，【这样设计的原因简单了解下，是因为最初网页的出现是为了替代报纸，如果说最后一行的内容本来就很少，强行让其两端对齐，就可能会出现一个单词挨左边，一个单词非常远的情况】

[ef9dd87dff23406eab194566888274ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1bd0268a76e74324a372e6e837e125c7.png
[17ecdd0390bf4feba4c4c7ca9212b627.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0f47bc9470f84daaa478204419c5bfae.png
[7915eaef59ee4552a7e94e73e8461bae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/953d279777904a8c9de3d0639bedee9b.png
[04cc4d978a3742e9935665eb9aca26f1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/95be6673a37e4a81b6f97b1a14f4ca7d.png
[7ba8dbe87a104765b485da375f783a7c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2acd10d171dc44798e0ad6fe32a69ccd.png
[5441fc4afa434875b48f3b7a58dd2c69.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b696818dd3564c9e9ebc8b90904fcc9c.png
[2554140dae4546dd85c3b60525d45bf1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/df929b1892504e5d844d39fc07b0f5bf.png
[fbc2b006475f46d2b1e22f503da43e95.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/94c3eb87a9354c0ca9165a0da0046037.png