【CSS基础】琐碎记录<一>

近日被虐得不行,全栈式工程师可没有那么容易.css js jquery 这些看似简单,要把做到极致真的需要平时多加修炼。被面试官的一个div的宽度指那几部分给难住了.虽然平时

都有在写div代码,但是真的不确定..当时心里面万只羊驼在奔腾啊 当时不是说面试官,是气自己没有搞好.

Tips:这些东西都摘录自W3C...我做个记录能够帮助到人,我很开心,帮不到我也无能为力了

首先得了解盒子模型(图片来自W3C)：





1, 盒模型中的width包括padding border margin么?

答: 是不包括的.我们给div设定的宽度,不包括margin border padding,只是指最里层的element的width.我们用jquery获取div宽度可以通过width()方法来获取,但是我们

想获取border + padding +element的width 整体宽度怎么获取呢.通过这个方法outerWidth()获取,这个方法包含可选bool参数.若outerWIdth(true)表示这个宽度要包含margin,而

且这个函数包含多个重载的方法.详情请查看outerWidth()方法官方API



注意: 第一点：backgroun-color 和 background-image 只是作用于border里面的内容.相当于包括padding和element, 而且外边距可以是负值,不过使用时要小心。

第二点：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合

并。

2,offsetWidth , scrollWidth , clientWidth 以及width有什么区别?

答: 首先说这四个属性都没有包含margin的宽度,高度同理,请自行理解 ，获取这些值请用dom元素点的方式去获取

width：div里面element的宽度

offsetWidth:element的width border 以及padding的宽度 ,jquery提供了获取该属性的方法outerWidth()

clientWidth:element的width padding的宽度

scrollWidth:element的width paading的宽度 滚动条的宽度

3,最简单的css定位的4种方式？

答：static relative absolute fixed 下面的文档摘自W3C Position描述

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 原来占用的位置仍然在。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。