CSS面试常见问题

篇文章主要是总结几个前端面试常见的CSS面试题，希望对大家的面试有所启示。

一、CSS实现水平居中和垂直居中的方法有哪几种？

1、水平居中

行内元素可设置:text-align:center

.son {
display:inline-block;
text-align:center;
}

margin:0 auto;这种方式的宽度需要固定已知

// 父布局的css 需要设置 overflow:hidden


.father{
width:100%;
height:200px;
overflow:hidden;//不可缺少否则margin-top不生效
}


.son{
width: 100px;
height: 100px;
margin:50px auto ;
}

table-cell

display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/

弹性布局flex

.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改变主轴为cross axis
justity-content:center;
}

脱离文档流，操作对象宽度确定

.father{
position:relative;
width:60%;
height:400px;
}
.son{
width:100px;
height:160px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-80px;
}

2、垂直居中

line-height与height等高

.son {
    height:60px;
    line-height:60px;  // line-height需要和height保持一致
    display:inline-height;
}

flex 【同上】
table-cell 【同上】
脱离文档流，操作对象宽度确定【同上】

二、absolute与fixed共同点与不同点

absoluate和fixed都是position属性的值类型。position规定元素的定位类型，取值类型如下：

absolute：相对父级的绝对定位，它的定位坐标是针对相对于static定位以外的第一个父元素进行定位。
fixed：相对整个文档的绝对定位，相对于浏览器窗口进行定位，用法基本与absolute一致。　　
relative：相对定位
static：默认值，无定位类型，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
sticky：粘性定位
inherit：继承父类定位类型。

fixed和absoluate相同点：

脱离文档流
覆盖非定位元素，上层显示

fixed和absoluate不同点：

相对定位的父级不同，fixed相对根节点，absoluate选择对于static定位以外的第一个父元素进行定位。
浏览器的滚动条不会影响fixed的定位位置，absoluate会被影响【由于第一个原因导致的】

三、清除浮动的方法

CSS中经常会出现使用了float浮动元素而导致页面中某些元素不能正确地显示。那么如何清除float的浮动带来的副作用呢？

1、在父元素中添加子元素，并为添加的子元素中添加clear，清除浮动

clear的取值如下：

none：不清除
left：清除左浮动
right：清除右浮动
both：清除父布局内所有元素的浮动

<style>
.clearfix {
    clear: both;
 }
</style>
<div class="box1">
   <div class="content1">content1</div>
    <div class="clearfix"></div>
</div>
<div class="box2">
    <div class="content2">content2</div>
</div>

2、伪元素清除clearfix

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

3、使用BFC清除

通过给父元素设置：overflow:auto或者overflow:hidden。让父元素高度被撑起来。

<style>
.wrap{
  width:500px;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    overflow:hidden;
}
</style>


<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">清除浮动</div>
</div>

四、什么是BFC?

BFC的官方定义是：BFC（Block Formatting Context）块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单点来说就是帮我们帮BFC内的元素和BFC外的元素进行隔离，使其不会影响到外部元素。

BFC类型：

浮动元素（float不为none）
根元素（html）
绝对定位元素（ position 为 absolute 或 fixed）
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
flex布局
overflow指定非visible的值

五、CSS和SASS、LESS有什么区别？

CSS（层叠样式表）是一门非程序式语言，SASS是使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。LESS受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。简单点说就是less、sass是属于编译型CSS，需要通过编译最终生成CSS。区别如下：

sass和less是编译型css,需要编译生成CSS
sass、less有更为灵活的变量、函数方式实现配置化样式
sass、less可以嵌套编写，隔离同名样式影响，减少代码量

六、rem 和 em 的区别?

em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置就参照父容器的字号大小或浏览器默认字号大小。rem是CSS3的新标准也是一种相对长度单位，其相对于HTML根标签的字号大小。

页布局对网站的外观特别重要，布得好，留得住用户，增收流量；布不好，用户逃之夭夭，还顺道骂两句。大多数Web系统会借用杂志或报纸那样排版，至于为什么这样，我不说，你也懂的，就是产品经理吵架吵不过程序员时，常说的：用户教育成本低。

在HTML中，如果是数据集(像excel那种)的布局，常用<table>标签，如果是内容块(网站板块)的布局，则常用<div>标签。

5.1 表格布局

表格由<table>标签来定义。每个表格均有若干行<tr>标签和列<td>标签组成。<td>数据单元格的内容可以包含文本、图片、水平线、表格等内容。表格头由<th>标签生成。<table>标签常用的属性是border，用来指定边框宽度。<th>和<td>的属性rowspan，可指定跨行数。

如果真的不理解表格的意义，那你打开excel，好好操作一翻，横向合并一下单元格就知道什么是跨行了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第5个HTML-表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>序号</th>
        <th>产品名称</th>
        <th>编号</th>
        <th>规格</th>
    </tr>
    <tr>
        <td>1</td>
        <td>平板电脑</td>
        <td>P1010</td>
        <td>9.7英尺</td>
    </tr>
    <tr>
        <td>2</td>
        <td>笔记本电脑</td>
        <td>C2111</td>
        <td>15英尺</td>
    </tr>
</table>
</body>
</html>

输出结果

5.2 块布局

网站分块布局，常用<div>标签进行定义。常见网站布局为上中下，上放导航栏，中间放内容，底部放版权和友情链接，而它们的分割便是由<div>标签负责的。当然，用<div>布局，需要CSS的支持才行。同表格<td>标签一样，<div>标签中，也是可以嵌入<p>、<hr>等标签的。

<div style="color:blue">
    <h3>老陈说编程</h3>
    <p>一个当了10年技术总监的老家伙，分享多年的编程经验。<br/>
        想学编程的朋友，可关注：老陈说编程。<br/>
        分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。</p>
</div>

输出结果

好了，有关HTML布局的内容，老陈先讲这么多，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##Web##程序员##CSS##HTML5#

able表格一种早期十分流行的网页布局方式,现在基本都是div+css的布局方式,表格一般由tr(行)td(列)标签组成

表格的常用属性:1)border:表示表格边框线2)cellpadding:单元格内容和内边框之间的距离3)cellspacing:表示单元格之间的间距4)bgcolor:背景颜色5)width:宽度6)height:高度等等

表格

没有设置表格width与height属性,表格宽高暂时由单元格的内容的宽高决定,其他暂不考虑

想要消除单元格间距与内容与单元格内边框的间距设置属性cellspacing,cellpadding为"0"

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1px" cellspacing="0" cellpadding="10">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td>C#</td>
            <td>Asp.net</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>JavaScript</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

tr常用属性

align:单元格内容的水平对齐方式,属性值:1)left2左侧)right右侧3)center中间

valign:单元格内容的垂直对齐方式,属性值1)top上边2)bottom下边3)middle中间

rowspan与colspan:将单元格进行行与行或者列与列的合并

这些属性以后都会写在css样式表中;制作显示一个对齐方式与行或列的合并的表格

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
        <tr>
            <td colspan="3" align="center">课程表</td><!--合并三行-->
        </tr>
        <tr align="center"><!--单元格内容居中显示-->
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
        </tr>
        <tr align="center">
            <td>HTML</td>
            <td rowspan="2">.NET</td><!--合并两列-->
            <td>JavaScript</td>
        </tr>
        <tr align="center">
            <td>CSS</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

显示效果

表格中设置的属性虽然会继承,但是子标签单独设置了属性,就会覆盖父标签的属性;比如tr

设置align="center",此tr中的子标签td单独设置了align="left",最终效果是此td内容居左显示

在线咨询

上一篇：Vue 初级入门代码示例
下一篇：14年33款苹果iPhone产品最全盘点

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS面试常见问题

5.1 表格布局

5.2 块布局

您的项目需求