大多数人,这部分代码都不愿意手动去写,经常会用一些现有的库来处理这部分工作,如normalize.css,minireset等等。其实这里面有好多冗余的CSS代码。我一般不太喜欢这么搞。
一、加行代码
==========
然而,如果你也是和我一样,是自己去写这部分代码的话,我建议你往里加一行代码,如下所示:
如上面代码所示,margin和padding没什么奇怪的,主要注意box-sizing我设置了border-box。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
二、解释代码
==========
对的,所有的DOM的都应该为border-box。如果有人对box-sizing不是很了解的话,那么,下面,接下来我就给大家理清一下它的用法。(之前,我的文章里有写过它的详细用法,可以参考)
它主要有两种取值:
1、content-box
当设置某个元素的宽高(width/height)时,仅仅会作用于其内容尺寸。其它,所有的padding和margin都是在其之上的累加。
比如:有个DIV设置width=80,padding=10,那么最终元素占用100(80+2*10)像素。
2、border-box
记住,padding和margin是包含在了宽高之内的。
比如,有个DIV设置width=80,padding=10,marign=10那么最终元素占用80(40+2*10+2*10)像素。
不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:
*{ margin:0; padding:0; }
这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
读者福利
========
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)