饥人谷技术博客

前端面试题之CSS(二)

2017-08-04  本文已影响0人  庄海鑫

1. em、rem、vh、vw 分别如何计算尺寸的？

2.css 中calc是什么？

是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

3. 颜色有几种写法?透明色如何表示?透明效果如何实现？currentColor如何来用?

a {
  color: white;
  background-color: blue;
}

p {
  background-color: #e0b0ff;
}

p {
  background-color: rgb(224, 176, 255);
}

p {
  background-color: hsl(276, 100%, 85%);
}

p {
  background-color: rgb(224, 176, 255, .5);
}

p {
  background-color: hsla(240, 100%, 50%, 0.5);
}
  1. 透明色: rgba(255 ,255,255, .5) a表示透明度,取值范围0-1。
  2. Opacity 注意 （设置在父元素上 opacity 会影响到其后代元素。）
p {
  opacity: .5;
  background-color: rgb(224, 176, 255);
}
  1. currentColor如何来用?
    表示和当前元素的color一样的颜色
  <div class="box">box
    <span class="child">child</span>
  </div>

  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }

  </style>

4.下图所示的代码和效果中，为什么 h1 的字体大小没变化? 为什么 a 的颜色没变化?

image.png

对于Web开发者来说，样式来源分为三种，优先级从上到下：

  1. 使用不同的选择器设置的样式
  2. 浏览器默认样式 (user agent stylesheet)
  3. 继承的样式 (Inherited from xxx)

我们先用Chrome浏览器检查一下元素h1

image.png image.png

5.盒模型有哪些属性？

  1. width
  2. height
  3. padding
  4. border
  5. margin
  1. box-sizing: content-box 默认值
.box {
  width: 300px;
  border: 10px;
}

渲染出来的盒子宽度为 320px

  1. box-sizing: border-box
.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

6. 什么是标签的默认样式？列举几个带默认样式的标签，并写出默认样式的属性-值

每种浏览器都有一套默认的样式表，即user agent stylesheet，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染。

body{ 
  display:block;
  margin:8px;
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

dl {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

dd {
    display: block;
    -webkit-margin-start: 40px;
}

7. 列举display 的几个值

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit m规定应该从父元素继承 display 属性的值。

8. 块级元素和行内元素分别有什么特点？分别列举二者对应的标签

块级元素列表

<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
< hr > 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体（正文）
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚（脚注或表注）
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行

行内元素列表

<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
< br > 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
< sub > 定义下标文本
< sup > 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button> 按钮
<del> 定义文档中已被删除的文本
<iframe> 创建包含另外一个文档的内联框架（即行内框架）
<ins> 标签定义已经被插入文档中的文本
<map> 客户端图像映射（即热区）
<object> object对象
<script> 客户端脚本

二、行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

9.box-sizing: border-box； 是什么意思

.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

10.inline-block有什么作用？inline-block的缝隙是怎么回事？如何解决

11.回答如下截图中的两个问题

image.png image.png image.png 
*{
margin:0;
padding:0;
}

参考资料：
calc()
块级和行内元素
inline-block
inline-block常见问题

上一篇 下一篇

猜你喜欢

热点阅读