欢迎光临
我的个人博客网站

前端面试题之CSS


两种盒模型

盒模型分为W3C的标准模型IE模型
盒模型又称为框模型,包含了元素内容(content)、内边距(padding)、外边距(margin)、边框(border)
如图:
前端面试题之CSS

W3C的标准模型:width/height属性指content

IE模型:width/height属性由content+padding+border组成

这两种模型的区别就是计算的宽度和高度不同

通过CSS3新增的属性box-sizing:content-box | border-box分别设置盒模型为标准模型(content-box)和IE模型(border-box)
W3C的标准模型:

<div class="content-box"></div> 
.content-box {   box-sizing: content-box;   width: 100px;   height: 100px;   padding: 20px;   border: 5px solid red;   margin: 10px; } 

前端面试题之CSS
其中:width=100px


IE模型:

    <div class="border-box"></div> 
.border-box {   box-sizing: border-box;   width: 100px;   height: 100px;   padding: 20px;   border: 5px solid red;   margin: 10px; } 

前端面试题之CSS
其中:width= content + 2padding + 2border = 100px

相对比较而言:border-box更好用!!!

扩展:JS如何设置获取盒模型对应的宽和高呢?

dom.style.width / height;   // 设置获取的是内联样式 dom.currentStyle.width / height;   // IE支持 window.getComputedStyle(dom).width / height;   // 兼容性好 dom.getBoundingClientRect().width / height;   // 计算一个元素的绝对位置 

为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器的部分标签默认值都是不同的,如果没有对CSS样式初始化会出现各个浏览器之间的页面显示差异。

对CSS样式初始化后会对SEO有一定的影响,所以力求影响最小的情况下进行初始化。

最简单也不建议初始化的方式:

* {   margin: 0;   padding: 0; } 

如何垂直居中

传送门 – CSS实现垂直居中的几种方法

flex怎么用,常用属性有哪些

传送门 – Flex布局讲解

display:none;与visibility:hidden;有什么区别呢

display:none;:隐藏对应的元素,在文档布局中不再分配空间

visibility:hideen;:隐藏对应的元素,在文档布局中仍保留原来的空间

使用display:none;属性后,HTML元素(对象)的宽度、高度等各种属性值都将丢失;而使用visibility:hideen;属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

BFC是什么,举例回答

概念

BFC,全称Block Formatting Context,意为块格式化上下文。
BFC是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

以下方式会创建块格式化上下文:

  • 根元素()
  • 浮动元素(元素的float不是none)
  • 绝对定位元素(元素的position为absolute或fixed)
  • 行内块元素(元素的display为inline-block)
  • 表格单元格(元素的display为table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的display为table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的display为table、table-row、table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table)
  • overflow值不为visible的块元素
  • display值为flow-root的元素
  • contain值为layout、content或paint的元素
  • 弹性元素(display为flex或inline-flex元素的直接子元素)
  • 网格元素(display为grid或inline-grid元素的直接子元素)
  • 多列容器(元素的column-count或column-width不为auto,包括column-count为1)
  • column-span为all的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中。

特性与功能

清除浮动

<div class="parent">     <div class="child1"></div>     <div class="child2"></div>     <div class="child3"></div> </div> 
.parent {   width: 400px;   border: 1px solid red;      /*给parent创建了BFC*/   overflow: hidden;  } .child1, .child2, .child3 {   width: 100px;   height: 100px;   background-color: blue;   float: left; } .child1 {   background: purple; } .child2 {   background: yellow; } 

未添加overflow: hidden;时:
前端面试题之CSS
添加后创建了BFC:
前端面试题之CSS

解决外边距合并问题

<div class="container">     <p>1</p> </div> <div class="container">     <p>2</p> </div> 
.container {   overflow: hidden; } p {   width: 100px;   height: 100px;   background: red;   margin: 50px; } 

未在父元素添加overflow: hidden;时:
前端面试题之CSS
添加后:
前端面试题之CSS

实现两列自适应布局

<div class="parent">     <div class="left">左</div>     <div class="right">右</div> </div> 
.parent {   width: 400px;   height: 400px;   border: 1px solid red; } .left {   width: 100px;   height: 100px;   background-color: blue;   float: left; } .right {   height: 300px;   background-color: yellow;   overflow: hidden; } 

未在第二个子元素添加overflow: hidden;时:
前端面试题之CSS
添加后:
前端面试题之CSS

特性

具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的子元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的一些特性。
通俗来讲,可以把BFC理解为一个封闭的箱子,箱子内部的元素无论如何改变,都不会影响到外部。

CSS选择器的优先级

  1. 越具体优先级越高;
  2. 写在后面的覆盖前面的;
  3. !important,最高,但是要少用!!!

如何清除浮动

方法一

为float后的元素添加clear属性

  <div class="a">a</div>   <div class="b">b</div>   <div class="c">c</div> 
.a, .b {   width: 100px;   height: 100px;   border: 5px solid red; } .b {   float: right; } .a {   float: left; } .c {   border: 5px solid blue;   height: 100px;   clear: both; } 

前端面试题之CSS

方法二

给父容器添加clearfix的class,用伪元素clearfix::after设置样式,清除浮动。

<div class="parent clearfix">     <div class="a">a</div>     <div class="b">b</div> </div> 
.parent {   border: 5px solid red; } .a, .b {   width: 100px;   height: 100px;   border: 5px solid blue; } .a {   float: left; } .b {   float: right; } .clearfix::after {   content: '';   display: block;   clear: both; } 

前端面试题之CSS

方法三

给父容器添加overflow:hidden或者auto

<div class="parent">     <div class="a">a</div>     <div class="b">b</div> </div> 
.parent {   border: 5px solid red;   overflow: auto; } .a, .b {   width: 100px;   height: 100px;   border: 5px solid blue; } .a {   float: left; } .b {   float: right; } 

前端面试题之CSS

em与rem

传送门 – 动态REM

用纯CSS创建一个三角形

CSS代码如下:

.triangle {   width: 0;   height: 0;   border-width: 40px;   border-style: solid;   border-color: transparent transparent red transparent; } 

点击预览😀
前端面试题之CSS

赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端面试题之CSS
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏