一.基础
页面布局的三大核心是盒子模型,浮动和定位
width和height指的是内容的宽度
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子模型组成:由内而外:内容(content),内边距(padding,),边框(border),外边距(margin)
边框(border)会影响盒子实际大小
内边距(padding)是边框与内容的距离,会影响盒子实际大小(撑开盒子);如果不指定盒子宽度,则padding不撑开盒子
外边距(margin)会改变盒子的位置,控制盒子与盒子之间的距离
应用
外边距典型应用:块级盒子水平居中对齐,必须满足两个条件:1.盒子必须制定宽度;2.盒子左右外边距设置位auto
行内元素和行内块元素水平居中:给父元素添加text-align:center即可
外边距合并:导致嵌套块元素塌陷问题
解决:1.给父元素定义上边框;2.为父元素定义上内边距;3.为父元素添加overflow:hidden
css3新增样式:
圆角边框:border-radius
盒子阴影:Box-shadow:h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊距离) spread(阴影的尺寸) color(阴影的颜色) inset(内部阴影还是外部阴影)10px 10px 10px 10px black。默认的是外阴影,但是不可以写outset,盒子阴影不占用空间,不会影响其他盒子排列
文字阴影:text-shadow:h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊距离) color(阴影的颜色)
二.面试题
1.说说对盒子模型的理解?
从三个方面来说,分别是盒子模型的概念,组成以及分类
概念:每个元素都占有一定的空间,所有元素均可以看成是一个盒子
组成:内外边距,边框和内容
分类:w3c标准盒子,IE盒子,可以用Box-sizing来切换盒模型。
Box-sizing的取值为content-Box或者是border-Box,默认是content-Box(w3c标准盒模型),又称内容盒子,他所说的width只包含内容,不包含padding和margin;
IE盒子又称怪异盒模型(边框盒子),他所指的width包括content,padding和border
2.js如何获取盒模型对应的宽度和高度?
方式一:dom.style.width/height,这种方式只能获取行内样式的宽度和高度;
方式二(通用型):window.getComputedStyle(dom).width/height,这种方式获取的是浏览器渲染以后的元素的宽和高,这种写法兼容性更好一些;
方式三(IE独有的):dom.currentStyle.width/height,这种方式获取的是浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法;
方式四:dom.getBoundingClientRect().width/height,这种方式获得到的宽度是内容content+padding+border,获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。此 api 可以拿到四个属性:left、top、width、height。
3.边距重叠解决方案
1.给父元素定义上边框;
2.为父元素定义上内边距;
3.为父元素添加overflow:hidden
4.行内元素与块元素的区别,怎么相互转换(BFC)
块元素 | 行内元素 |
---|---|
即各个块级元素独占一行,默认垂直向下排列 | 和其他元素都在一行,即行内元素和其他行内元素都会在一条水平线上排列 |
高度、宽度、margin及padding都是可控的,设置有效,有边距效果 | 高度、宽度是不可控的,设置无效,由内容决定。 |
宽度没有设置时,默认为100% | |
块级元素中可以包含块级元素和行内元素 | 行内元素最好只包含行内元素,不包含块级元素。 |
(1)display:inline;转换为行内元素;
(2)display:block;转换为块状元素;
(3)display:inline-block;转换为行内块状元素。