前言
本次总结主要细讲前端学习中遇到的常见问题
一、改变盒模型的宽高范围
通常情况下,默认width和height设置的是内容盒宽高。
设计师衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒,这时候,我们可以通过改变宽高的设置范围解决。
内容盒:子元素等内容所在的地方,图中的蓝色方块。
填充盒:内容盒 + 填充区(padding)
边框盒:边框 + 填充区 + 内容盒
通过CSS3属性box-sizing可以改变宽高的设置范围:
- 宽高设置的是边框盒:
结果如下: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中的图片带白边的问题
图片的父元素是一个块盒,块盒高度自动,图片底部和父元素底边之间往往会出现空白。
解决方法:
- 设置父元素的字体大小为0
- 将图片设置为块盒
总结
本周总结了前端学习中遇到的一些问题,并说明了解决方法,经过一段时间的沉淀,对前端的理解更加深刻。