前端面试题汇总---CSS篇(1)

1、display: none; 与 visibility: hidden; 的区别

- 联系:它们都能让元素不可见

- 区别:

- `display:none`;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;`visibility: hidden`;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

- `display: none`;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;`visibility:hidden`;是继承属性,子孙节点消失由于继承了`hidden`,通过设置`visibility: visible`;可以让子孙节点显式

- 修改常规流中元素的`display`通常会造成文档重排。修改`visibility`属性只会造成本元素的重绘

- 读屏器不会读取`display: none;`元素内容;会读取`visibility: hidden`元素内容

2、css hack原理及常用hack

原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。

- 常见的hack有

- 属性hack

- 选择器hack

- IE条件注释

3、link 与 @import 的区别

`link` 是`HTML`方式, `@import` 是`CSS`方式

- `link `最大限度支持并行下载,` @import` 过多嵌套导致串行下载,出现FOUC

- `link` 可以通过 `rel="alternate stylesheet"` 指定候选样式

- 浏览器对 `link` 支持早于` @import` ,可以使用 `@import` 对老浏览器隐藏样式

- `@import` 必须在样式规则之前,可以在`css`文件中引用其他文件

- 总体来说:`link`优于`@import`

4、CSS有哪些继承属性*

- 关于文字排版的属性如:

- `font`

  - `word-break`

  - `letter-spacing`

  - `text-align`

  - `text-rendering`

  - `word-spacing`

  - `white-space`

  - `text-indent`

  - `text-transform`

  - `text-shadow`

- `line-height`

- `color`

- `visibility`

- `cursor`

5、display,float,position的关系

- 如果 `display` 为`none`,那么`position`和`float`都不起作用,这种情况下元素不产生框

- 否则,如果`position`值为`absolute`或者`fixed`,框就是绝对定位的,`float`的计算值为`none`,`display`根据下面的表格进行调整

- 否则,如果`float`不是`none`,框是浮动的,`display`根据下表进行调整

- 否则,如果元素是根元素,`display`根据下表进行调整

- 其他情况下`display`的值为指定值 总结起来:绝对定位、浮动、根元素都需要调整 `display`

6、外边距折叠(collapsing margins)

- 毗邻的两个或多个 `margin` 会合并成一个`margin`,叫做外边距折叠。规则如下:

- 两个或多个毗邻的普通流中的块元素垂直方向上的`margin`会折叠

- 浮动元素或`inline-block`元素或绝对定位元素的`margin`不会和垂直方向上的其他元素的margin折叠

- 创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠

- 元素自身的`margin-bottom`和`margin-top`相邻时也会折

7、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

- 有两种, IE 盒子模型、W3C 盒子模型;

- 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);

- 区 别: IE的content部分把 border 和 padding计算了进去;

8、CSS选择符有哪些?哪些属性可以继承?

- id选择器( # myid)

- 类选择器(.myclassname)

- 标签选择器(div, h1, p)

- 相邻选择器(h1 + p)

- 子选择器(ul > li)

- 后代选择器(li a)

- 通配符选择器( * )

- 属性选择器(a[rel = "external"])

- 伪类选择器(a:hover, li:nth-child)

- 可继承的样式: `font-size font-family color, UL LI DL DD DT`

- 不可继承的样式:`border padding margin width height `

9、CSS优先级算法如何计算?

- 优先级就近原则,同权重情况下样式定义最近者为准

- 载入样式以最后载入的定位为准

- 优先级为: `!important > id > class > tag` important 比 内联优先级高

10、CSS3新增伪类有那些?

```

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:after 在元素之前添加内容,也可以用来做清除浮动。

:before 在元素之后添加内容

:enabled

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中

```

10、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

- 给`div`设置一个宽度,然后添加`margin:0 auto`属性

```

div{

width:200px;

margin:0 auto;

}

```

- 居中一个浮动元素

```

//确定容器的宽高 宽500 高 300 的层

//设置层的外边距

.div {

width:500px ; height:300px;//高度可以不设

margin: -150px 0 0 -250px;

position:relative; //相对定位

background-color:pink; //方便看效果

left:50%;

top:50%;

}

```

- 让绝对定位的div居中

```

position: absolute;

width: 1200px;

background: none;

margin: 0 auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

```

11、display有哪些值?说明他们的作用

- block 象块类型元素一样显示。

- none 缺省值。象行内元素类型一样显示。

- inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

- list-item 象块类型元素一样显示,并添加样式列表标记。

- table 此元素会作为块级表格来显示

- inherit 规定应该从父元素继承 display 属性的值

12、一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度

- 方案1:

`.sub { height: calc(100%-100px); }`

- 方案2:

`.container { position:relative; }`

`.sub { position: absolute; top: 100px; bottom: 0; }`

- 方案3:

`.container { display:flex; flex-direction:column; }`

`.sub { flex:1; }`

13、overflow: scroll 时不能平滑滚动的问题怎么处理?

- 监听滚轮事件,然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。

14、display:inline-block 什么时候会显示间隙?

* 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距

* 非 inline-block 水平元素设置为 inline-block 也会有水平间距

* 可以借助 vertical-align:top; 消除垂直间隙

* 可以在父级加 font-size:0; 在子元素里设置需要的字体大小,消除垂直间隙

* 把 li 标签写到同一行可以消除垂直间隙,但代码可读性差

15、如果需要手动写动画,你认为最小时间间隔是多久?

- 16.7ms 多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔: 1s / 60 * 1000 = 16.7ms

17、font-style 属性 oblique 是什么意思?

- font-style: oblique; 使没有 italic 属性的文字实现倾斜

18、让页面里的字体变清晰,变细用CSS怎么做?(IOS手机浏览器字体齿轮设置)

```css

-webkit-font-smoothing: antialiased;

```

19、怎么让Chrome支持小于12px 的文字?

```css

.shrink{

-webkit-transform:scale(0.8);

-o-transform:scale(1);

display:inline-block;

}

```

20、设置元素浮动后,该元素的 display 值会如何变化?

- 设置元素浮动后,该元素的 display 值自动变成 block

21、line-height 三种赋值方式有何区别?(带单位、纯数字、百分比)

* 带单位:px 是固定值,而 em 会参考父元素 font-size 值计算自身的行高

* 纯数字:会把比例传递给后代。例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px

* 百分比:将计算后的值传递给后代

22、你对 line-height 是如何理解的?

* line-height 指一行字的高度,包含了字间距,实际上是下一行基线到上一行基线距离

* 如果一个标签没有定义 height 属性,那么其最终表现的高度是由 line-height 决定的

* 一个容器没有设置高度,那么撑开容器高度的是 line-height 而不是容器内的文字内容

* 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中

* line-height 和 height 都能撑开一个高度,height 会触发 haslayout,而 line-height 不会

23、iOS safari 如何阻止“橡皮筋效果”?

```javascript

$(document).ready(function(){

var stopScrolling = function(event) {

event.preventDefault();

}

document.addEventListener('touchstart', stopScrolling, false);

document.addEventListener('touchmove', stopScrolling, false);

});

```

24、input [type=search] 搜索框右侧小图标如何美化?

```css

input[type="search"]::-webkit-search-cancel-button{

-webkit-appearance: none;

height: 15px;

width: 15px;

border-radius: 8px;

background:url("images/searchicon.png") no-repeat 0 0;

background-size: 15px 15px;

}

```

25、网站图片文件,如何点击下载?而非点击预览?

`<a href="logo.jpg" download>下载</a>`

`<a href="logo.jpg" download="网站LOGO" >下载</a>`

26、如何修改Chrome记住密码后自动填充表单的黄色背景?

- 产生原因:由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的

- 解决方案1:在form标签上直接关闭了表单的自动填充:autocomplete="off"

- 解决方案2:input:-webkit-autofill { background-color: transparent; }

27、::before 和 :after 中双冒号和单冒号有什么区别?

* 在 CSS 中伪类一直用 : 表示,如 :hover, :active 等

* 伪元素在CSS1中已存在,当时语法是用 : 表示,如 :before 和 :after

* 后来在CSS3中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类

* 由于低版本IE对双冒号不兼容,开发者为了兼容性各浏览器,继续使使用 :after 这种老语法表示伪元素

* 综上所述:::before 是 CSS3 中写伪元素的新语法; :after 是 CSS1 中存在的、兼容IE的老语法

28、伪元素和伪类的区别和作用?

- 伪元素 -- 在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。

- 它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如:

```

p::before {content:"第一章:";}

p::after {content:"Hot!";}

p::first-line {background:red;}

p::first-letter {font-size:30px;}

```

- 伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如:

```

a:hover {color: #FF00FF}

p:first-child {color: red}

```

29、a标签上四个伪类的执行顺序是怎么样的?

```link > visited > hover > active```

- L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

30、什么是视差滚动效果,如何给每页做不同的动画?

* 视差滚动是指多层背景以不同的速度移动,形成立体的运动效果,具有非常出色的视觉体验

* 一般把网页解剖为:背景层、内容层和悬浮层。当滚动鼠标滚轮时,各图层以不同速度移动,形成视差的

* 实现原理

- 以 “页面滚动条” 作为 “视差动画进度条”

- 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的

- 监听 mousewheel 事件,事件被触发即播放动画,实现“翻页”效果

31、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?

* 响应式设计就是网站能够兼容多个终端,而不是为每个终端做一个特定的版本

* 基本原理是利用CSS3媒体查询,为不同尺寸的设备适配不同样式

* 对于低版本的IE,可采用JS获取屏幕宽度,然后通过resize方法来实现兼容:


 

```javascript

$(window).resize(function () {

screenRespond();

});

screenRespond();

function screenRespond(){

var screenWidth = $(window).width();

if(screenWidth <= 1800){

$("body").attr("class", "w1800");

}

if(screenWidth <= 1400){

$("body").attr("class", "w1400");

}

if(screenWidth > 1800){

$("body").attr("class", "");

}

}

```

32、全屏滚动的原理是什么? 用到了CSS的那些属性?

* 原理类似图片轮播原理,超出隐藏部分,滚动时显示

* 可能用到的CSS属性:overflow:hidden; transform:translate(100%, 100%); display:none;

33、元素竖向的百分比设定是相对于容器的高度吗?

- 元素竖向的百分比设定是相对于容器的宽度,而不是高度

34、抽离样式模块怎么写,说出思路?

- CSS可以拆分成2部分:公共CSS 和 业务CSS:

- 网站的配色,字体,交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务

- 对于业务CSS,需要有统一的命名,使用公用的前缀。可以参考面向对象的CSS

35、margin和padding分别适合什么场景使用?

* 需要在border外侧添加空白,且空白处不需要背景(色)时,使用 margin

* 需要在border内测添加空白,且空白处需要背景(色)时,使用 padding

36、在网页中的应该使用奇数还是偶数的字体?

- 在网页中的应该使用“偶数”字体:

* 偶数字号相对更容易和 web 设计的其他部分构成比例关系

* 使用奇数号字体时文本段落无法对齐

* 宋体的中文网页排布中使用最多的就是 12 和 14

37、CSS如何计算选择器优先?

* 相同权重,定义最近者为准:行内样式 > 内部样式 > 外部样式

* 含外部载入样式时,后载入样式覆盖其前面的载入的样式和内部样式

* 选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]

* 在同一组属性设置中,!important 优先级最高,高于行内样式

38、CSS3新增伪类有哪些?

- :root 选择文档的根元素,等同于 html 元素

- :empty 选择没有子元素的元素

- :target 选取当前活动的目标元素

- :not(selector) 选择除 selector 元素意外的元素

- :enabled 选择可用的表单元素

- :disabled 选择禁用的表单元素

- :checked 选择被选中的表单元素

- :after 在元素内部最前添加内容

- :before 在元素内部最后添加内容

- :nth-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n

- :nth-last-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n,从后向前数

- :nth-child(odd)

- :nth-child(even)

- :nth-child(3n+1)

- :first-child

- :last-child

- :only-child

- :nth-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n

- :nth-last-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n,从后向前数

- :nth-of-type(odd)

- :nth-of-type(even)

- :nth-of-type(3n+1)

- :first-of-type

- :last-of-type

- :only-of-type

- ::selection 选择被用户选取的元素部分

- :first-line 选择元素中的第一行

- :first-letter 选择元素中的第一个字符

39、请列举几种隐藏元素的方法

* visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在

* opacity: 0; CSS3属性,设置0可以使一个元素完全透明

* position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外

* display: none; 元素会变得不可见,并且不会再占用文档的空间。

* transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留

* `<div hidden="hidden">` HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态

* height: 0; 将元素高度设为 0 ,并消除边框

* filter: blur(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中

40、rgba() 和 opacity 的透明效果有什么不同?

* opacity 作用于元素以及元素内的所有内容(包括文字)的透明度

* rgba() 只作用于元素自身的颜色或其背景色,子元素不会继承透明效果

41、css 属性 content 有什么作用?

- content 属性专门应用在 before/after 伪元素上,用于插入额外内容或样式

42、CSS3有哪些新特性?

- 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

- 弹性盒模型 display: flex;

- 多列布局 column-count: 5;

- 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}

- 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}

- 颜色透明度 color: rgba(255, 0, 0, 0.75);

- 圆角 border-radius: 5px;

- 渐变 background:linear-gradient(red, green, blue);

- 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

- 倒影 box-reflect: below 2px;

- 文字装饰 text-stroke-color: red;

- 文字溢出 text-overflow:ellipsis;

- 背景效果 background-size: 100px 100px;

- 边框效果 border-image:url(bt_blue.png) 0 10;

- 转换

- 旋转 transform: rotate(20deg);

- 倾斜 transform: skew(150deg, -10deg);

- 位移 transform: translate(20px, 20px);

- 缩放 transform: scale(.5);

- 平滑过渡 transition: all .3s ease-in .1s;

- 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

43、请解释一下 CSS3 的 Flexbox(弹性盒布局模型)以及适用场景?

- Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局

44、经常遇到的浏览器的JS兼容性有哪些?解决方法是什么?

* 当前样式:getComputedStyle(el, null) VS el.currentStyle

* 事件对象:e VS window.event

* 鼠标坐标:e.pageX, e.pageY VS window.event.x, window.event.y

* 按键码:e.which VS event.keyCode

* 文本节点:el.textContent VS el.innerText

45、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

* 外边距重叠就是 margin-collapse

* 相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。

这种合并外边距的方式被称为折叠,结合而成的外边距称为折叠外边距

* 折叠结果遵循下列计算规则:

- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值

- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值

- 两个外边距一正一负时,折叠结果是两者的相加的和

46、请写出多种等高布局

* 在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像

* 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行

* css3 flexbox 布局: .container{display: flex; align-items: stretch;}

47、css垂直居中的方法有哪些?

* 如果是单行文本, line-height 设置成和 height 值

```

.vertical {

height: 100px;

line-height: 100px;

}

```

* 已知高度的块级子元素,采用绝对定位和负边距

```

.container {

position: relative;

}

.vertical {

height: 300px; /*子元素高度*/

position: absolute;

top:50%; /*父元素高度50%*/

margin-top: -150px; /*自身高度一半*/

}

```

* 未知高度的块级父子元素居中,模拟表格布局

* 缺点:IE67不兼容,父级 overflow:hidden 失效

```

.container {

display: table;

}

.content {

display: table-cell;

vertical-align: middle;

}

```

* 新增 inline-block 兄弟元素,设置 vertical-align

- 缺点:需要增加额外标签,IE67不兼容

```

.container {

height: 100%;/*定义父级高度,作为参考*/

}

.extra .vertical{

display: inline-block; /*行内块显示*/

vertical-align: middle; /*垂直居中*/

}

.extra {

height: 100%; /*设置新增元素高度为100%*/

}

```

* 绝对定位配合 CSS3 位移

```

.vertical {

position: absolute;

top:50%; /*父元素高度50%*/

transform:translateY(-50%, -50%);

}

```

* CSS3弹性盒模型

```

.container {

display:flex;

justify-content: center; /*子元素水平居中*/

align-items: center; /*子元素垂直居中*/

}

```

48、圣杯布局的实现原理?

* 要求:三列布局;中间主体内容前置,且宽度自适应;两边内容定宽

* 好处:重要的内容放在文档流前面可以优先渲染

* 原理:利用相对定位、浮动、负边距布局,而不添加额外标签

```css

.container {

padding-left: 150px;

padding-right: 190px;

}

.main {

float: left;

width: 100%;

}

.left {

float: left;

width: 190px;

margin-left: -100%;

position: relative;

left: -150px;

}

.right {

float: left;

width: 190px;

margin-left: -190px;

position: relative;

right: -190px;

}

```

49、什么是双飞翼布局?实现原理?

- 双飞翼布局:对圣杯布局(使用相对定位,对以后布局有局限性)的改进,消除相对定位布局

- 原理:主体元素上设置左右边距,预留两翼位置。左右两栏使用浮动和负边距归位,消除相对定位。

```css

.container {

/*padding-left:150px;*/

/*padding-right:190px;*/

}

.main-wrap {

width: 100%;

float: left;

}

.main {

margin-left: 150px;

margin-right: 190px;

}

.left {

float: left;

width: 150px;

margin-left: -100%;

/*position: relative;*/

/*left:-150px;*/

}

.right {

float: left;

width: 190px;

margin-left: -190px;

/*position:relative;*/

/*right:-190px;*/

}

```

48、在CSS样式中常使用 px、em 在表现上有什么区别?

* px 相对于显示器屏幕分辨率,无法用浏览器字体放大功能

* em 值并不是固定的,会继承父级的字体大小: em = 像素值 / 父级font-size

49、为什么要初始化CSS样式?

* 不同浏览器对有些标签样式的默认值解析不同

* 不初始化CSS会造成各现浏览器之间的页面显示差异

* 可以使用 reset.css 或 Normalize.css 做 CSS 初始化

50、解释下什么是浮动和它的工作原理?

* 非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。

此时,内容会溢出到容器外面而影响布局。这种现象被称为浮动(溢出)。

* 工作原理:

- 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)

- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

51、浮动元素引起的问题?

* 父元素的高度无法被撑开,影响与父元素同级的元素

* 与浮动元素同级的非浮动元素会跟随其后

52、列举几种清除浮动的方式?

* 添加额外标签,例如 `<div style="clear:both"></div>`

* 使用 br 标签和其自身的 clear 属性,例如 `<br clear="all" />`

* 父元素设置 overflow:hidden; 在IE6中还需要触发 hasLayout,例如zoom:1;

* 父元素也设置浮动

* 使用 :after 伪元素。由于IE6-7不支持 :after,使用 zoom:1 触发 hasLayout

53、清除浮动最佳实践(after伪元素闭合浮动):

```

.clearfix:after{

content: "\200B";

display: table;

height: 0;

clear: both;

}

.clearfix{

*zoom: 1;

}

```

54、什么是 FOUC(Flash of Unstyled Content)? 如何来避免 FOUC?

* 当使用 @import 导入 CSS 时,会导致某些页面在 IE 出现奇怪的现象:

没有样式的页面内容显示瞬间闪烁,这种现象称为“文档样式短暂失效”,简称为FOUC

* 产生原因:当样式表晚于结构性html加载时,加载到此样式表时,页面将停止之前的渲染。

* 等待此样式表被下载和解析后,再重新渲染页面,期间导致短暂的花屏现象。

* 解决方法:使用 link 标签将样式表放在文档 head

55、介绍使用过的 CSS 预处理器?

* CSS 预处理器基本思想:为 CSS 增加了一些编程的特性(变量、逻辑判断、函数等)

* 开发者使用这种语言进行进行 Web 页面样式设计,再编译成正常的 CSS 文件使用

* 使用 CSS 预处理器,可以使 CSS 更加简洁、适应性更强、可读性更佳,无需考虑兼容性

* 最常用的 CSS 预处理器语言包括:Sass(SCSS)和 LESS

56、CSS优化、提高性能的方法有哪些?

* 多个css合并,尽量减少HTTP请求

* 将css文件放在页面最上面

* 移除空的css规则

* 避免使用CSS表达式

* 选择器优化嵌套,尽量避免层级过深

* 充分利用css继承属性,减少代码量

* 抽象提取公共样式,减少代码量

* 属性值为0时,不加单位

* 属性值为小于1的小数时,省略小数点前面的0

* css雪碧图

57、浏览器是怎样解析CSS选择器的?

- 浏览器解析 CSS 选择器的方式是从右到左

58、谈一谈你对CSS盒模型的认识

> 专业的面试,一定会问 `CSS` 盒模型。对于这个题目,我们要回答一下几个方面:

1. 基本概念:`content`、`padding`、`margin`

2. 标准盒模型、`IE`盒模型的区别。不要漏说了`IE`盒模型,通过这个问题,可以筛选一部分人

3. `CSS`如何设置这两种模型(即:如何设置某个盒子为其中一个模型)?如果回答了上面的第二条,还会继续追问这一条。

4. `JS`如何设置、获取盒模型对应的宽和高?这一步,已经有很多人答不上来了。

5. 实例题:根据盒模型解释**边距重叠**。

> 前四个方面是逐渐递增,第五个方面,却鲜有人知。

6. `BFC`(边距重叠解决方案)或`IFC`。

> 如果能回答第五条,就会引出第六条。`BFC`是面试频率较高的。

**总结**:以上几点,从上到下,知识点逐渐递增,知识面从理论、`CSS`、`JS`,又回到`CSS`理论

接下来,我们把上面的六条,依次讲解。

**标准盒模型和IE盒子模型**

标准盒子模型:

![](http://img.smyhvae.com/2015-10-03-css-27.jpg)

`IE`盒子模型:

![](http://img.smyhvae.com/2015-10-03-css-30.jpg)

上图显示:

> 在 `CSS` 盒子模型 (`Box Model`) 规定了元素处理元素的几种方式:

- `width`和`height`:**内容**的宽度、高度(不是盒子的宽度、高度)。

- `padding`:内边距。

- `border`:边框。

- `margin`:外边距。

> `CSS`盒模型和`IE`盒模型的区别:

- 在**标准盒子模型**中,**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

- **IE盒子模型**中,**width 和 height 指的是内容区域+border+padding**的宽度和高度。

**CSS如何设置这两种模型**

代码如下:

```javascript

/* 设置当前盒子为 标准盒模型(默认) */

box-sizing: content-box;

/* 设置当前盒子为 IE盒模型 */

box-sizing: border-box;

```


 

> 备注:盒子默认为标准盒模型。


 

**JS如何设置、获取盒模型对应的宽和高**


 

> 方式一:通过`DOM`节点的 `style` 样式获取

```js

element.style.width/height;

```

> 缺点:通过这种方式,只能获取**行内样式**,不能获取`内嵌`的样式和`外链`的样式。

这种方式有局限性,但应该了解。



 

> 方式二(通用型)


 

```js

window.getComputedStyle(element).width/height;

```


 

> 方式二能兼容 `Chrome`、火狐。是通用型方式。


 

> 方式三(IE独有的)


 

```javascript

    element.currentStyle.width/height;

```

> 和方式二相同,但这种方式只有IE独有。获取到的即时运行完之后的宽高(三种css样式都可以获取)。


 

> 方式四


 

```javascript

    element.getBoundingClientRect().width/height;

```

> 此 `api` 的作用是:获取一个元素的绝对位置。绝对位置是视窗 `viewport` 左上角的绝对位置。此 `api` 可以拿到四个属性:`left`、`top`、`width`、`height`。

**总结:**

> 上面的四种方式,要求能说出来区别,以及哪个的通用型更强。


 

**margin塌陷/margin重叠**


 

**标准文档流中,竖直方向的margin不叠加,只取较大的值作为margin**(水平方向的`margin`是可以叠加的,即水平方向没有塌陷现象)。

> PS:如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有`margin`重叠的现象的。


 

> 我们来看几个例子。

**兄弟元素之间**

如下图所示:

![](http://img.smyhvae.com/20170805_0904.png)


 

**子元素和父元素之间**


 

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.father {

background: green;

}

/* 给儿子设置margin-top为10像素 */

.son {

height: 100px;

margin-top: 10px;

background: red;

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

</html>

```

> 上面的代码中,儿子的`height`是 `100p`x,`magin-top` 是`10px`。注意,此时父亲的 `height` 是`100`,而不是`110`。因为儿子和父亲在竖直方向上,共一个`margin`。

儿子这个盒子:

![](http://img.smyhvae.com/20180305_2216.png)

父亲这个盒子:

![](http://img.smyhvae.com/20180305_2217.png)


 

> 上方代码中,如果我们给父亲设置一个属性:`overflow: hidden`,就可以避免这个问题,此时父亲的高度是110px,这个用到的就是BFC(下一段讲解)。


 

**善于使用父亲的padding,而不是儿子的margin**

> 其实,这一小段讲的内容与上一小段相同,都是讲父子之间的margin重叠。

我们来看一个奇怪的现象。现在有下面这样一个结构:(`div`中放一个`p`)

```html

    <div>

        <p></p>

    </div>

```

> 上面的结构中,我们尝试通过给儿子`p`一个`margin-top:50px;`的属性,让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象:

![](http://img.smyhvae.com/20170806_1537.png)


 

> 此时我们给父亲`div`加一个`border`属性,就正常了:

![](http://img.smyhvae.com/20170806_1544.png)


 

> 如果父亲没有`border`,那么儿子的`margin`实际上踹的是“流”,踹的是这“行”。所以,父亲整体也掉下来了。

**margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。**

> 所以,如果要表达父子之间的距离,我们一定要善于使用父亲的padding,而不是儿子的`margin。


 

**BFC(边距重叠解决方案)**

> `BFC(Block Formatting Context)`:块级格式化上下文。你可以把它理解成一个独立的区域。

另外还有个概念叫`IFC`。不过,`BFC`问得更多。

**BFC 的原理/BFC的布局规则【非常重要】**

> `BFC` 的原理,其实也就是 `BFC` 的渲染规则(能说出以下四点就够了)。包括:

1. BFC **内部的**子元素,在垂直方向,**边距会发生重叠**。

2. BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然。(稍后看`举例1`)

3. **BFC区域不与旁边的`float box`区域重叠**。(可以用来清除浮动带来的影响)。(稍后看`举例2`)

4. 计算`BFC`的高度时,浮动的子元素也参与计算。(稍后看`举例3`)

**如何生成BFC**

> 有以下几种方法:

- 方法1:`overflow`: 不为`visible`,可以让属性是 `hidden`、`auto`。【最常用】

- 方法2:浮动中:`float`的属性值不为`none`。意思是,只要设置了浮动,当前元素就创建了`BFC`。

- 方法3:定位中:只要`posiiton`的值不是 s`tatic`或者是`relative`即可,可以是`absolute`或`fixed`,也就生成了一个`BFC`。

- 方法4:`display`为`inline-block`, `table-cell`, `table-caption`, `flex`, `inline-flex`

**BFC 的应用**


 

**举例1:**解决 margin 重叠

> 当父元素和子元素发生 `margin` 重叠时,解决办法:**给子元素或父元素创建BFC**。

比如说,针对下面这样一个 `div` 结构:


 

```html

<div class="father">

<p class="son">

</p>

</div>

```

> 上面的`div`结构中,如果父元素和子元素发生`margin`重叠,我们可以给子元素创建一个 `BFC`,就解决了:


 

```html

<div class="father">

<p class="son" style="overflow: hidden">

</p>

</div>

```

> 因为**第二条:BFC区域是一个独立的区域,不会影响外面的元素**。


 

**举例2**:BFC区域不与float区域重叠:

针对下面这样一个div结构;

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.father-layout {

background: pink;

}

.father-layout .left {

float: left;

width: 100px;

height: 100px;

background: green;

}

.father-layout .right {

height: 150px; /*右侧标准流里的元素,比左侧浮动的元素要高*/

background: red;

}

</style>

</head>

<body>

<section class="father-layout">

<div class="left">

左侧,生命壹号

</div>

<div class="right">

右侧,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,

</div>

</section>

</body>

</html>

```

效果如下:

![](http://img.smyhvae.com/20180306_0825.png)

> 上图中,由于右侧标准流里的元素,比左侧浮动的元素要高,导致右侧有一部分会跑到左边的下面去。

**如果要解决这个问题,可以将右侧的元素创建BFC**,因为**第三条:BFC区域不与`float box`区域重叠**。解决办法如下:(将right区域添加overflow属性)

```html

<div class="right" style="overflow: hidden">

右侧,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,smyhvae,

</div>

```


 

![](http://img.smyhvae.com/20180306_0827.png)

上图表明,解决之后,`father-layout`的背景色显现出来了,说明问题解决了。


 

**举例3:**清除浮动

现在有下面这样的结构:


 

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.father {

background: pink;

}

.son {

float: left;

background: green;

}

</style>

</head>

<body>

<section class="father">

<div class="son">

生命壹号

</div>

</section>

</body>

</html>

```

效果如下:

![](http://img.smyhvae.com/20180306_0840.png)

上面的代码中,儿子浮动了,但由于父亲没有设置高度,导致看不到父亲的背景色(此时父亲的高度为0)。正所谓**有高度的盒子,才能关住浮动**。

> 如果想要清除浮动带来的影响,方法一是给父亲设置高度,然后采用隔墙法。方法二是 BFC:给父亲增加 `overflow=hidden`属性即可, 增加之后,效果如下:

![](http://img.smyhvae.com/20180306_0845.png)

> 为什么父元素成为BFC之后,就有了高度呢?这就回到了**第四条:计算BFC的高度时,浮动元素也参与计算**。意思是,**在计算BFC的高度时,子元素的float box也会参与计算**

54、

猜你喜欢

转载自blog.csdn.net/weixin_42246997/article/details/88187454
今日推荐