68. Describe a "reset" CSS file and how to use it. Do you know normalize.css? Do you understand the difference between them?
There are many reset styles. Any front-end developer must have a commonly used reset CSS file and know how to use them. Do they do it blindly or do they know why they do it? The reason is that different browsers have different default styles for some elements. If you don't deal with it, there will be necessary risks or more dramatic occurrences in different browsers.
You may use Normalize instead of your reset style file. It does not reset all styles, but only provides a set of reasonable default style values. It can make many browsers reach a consistent and reasonable level without disturbing other things (such as bold titles).
In this regard, it is impossible to do every reset reset. It does have more than one reset, and it deals with quirks that you never need to consider, such as inconsistent HTML audio elements or inconsistent line-height.
69. What are the display attributes? What can be done?
display: block inline elements are converted to block-level elements
display: inline block-level elements are converted to
inline elements display: inline-block is converted to inline elements
70. Which CSS properties can be inherited?
Inheritable: font-size font-family color, ul li dl dd dt;
not inheritable: border padding margin width height;
71. How to calculate the CSS priority algorithm?
!important> id> class> tag
!important has higher priority than inline
*Priority nearest principle, the style definition is the closest;
*The last loaded style shall prevail;
72. What is the difference between b tag and strong tag, i tag and em tag?
The latter has semantics, while the former does not.
73. What are the inline elements, block-level elements, and box model?
1. Inline element
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
big – 大字体
br – 换行
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
label – 表格标签
s – 中划线(不推荐)
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量
2. Block-level elements
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是css layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）
noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
3. The CSS box model consists of four parts:
内容、填充（padding）、边框（border）、外边界（margin）。
74. What are the selectors and what is the calculation formula for priority? In-line style and! important which priority is higher?
#ID> .class> Tag selector!important has high priority
75. I want the inline element to be 10px away from the above element, can I add margin-top and padding-top?
margin-top, padding-top is invalid
76. What is the box model of CSS?
内容，border ,margin，padding
77. What are the display attributes? What can be done?
display: block inline elements are converted to block-level elements
display: inline block-level elements are converted to
inline elements display: inline-block is converted to inline elements
78. Which CSS properties can be inherited?
Inheritable: font-size font-family color, ul li dl dd dt;
not inheritable: border padding margin width height;
79. How to calculate the CSS priority algorithm?
!important> id> class> tag
!important has higher priority than inline
- Priority closest principle, the style definition is the closest;
- Subject to the last loaded style;
80. What is the difference between text-align:center and line-height?
Text-align is horizontal alignment, and line-height is between lines.
81. What are the three layers of front-end pages and what are they? What is the role?
Structure layer Html
presentation layer CSS
behavior layer js
82. Write a table and the corresponding CSS, so that the odd-numbered rows of the table have a white background, the even-numbered rows are gray, and the mouse up is a yellow background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
body{
margin:0;}
table{
border:1px solid #ddd;}
tr:nth-child(odd){
background-color: #fff}
tr:nth-child(even){
background-color: #666}
tr:hover{
background-color: yellow}
</style>
</head>
<body>
<table>
<th>表格标题</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>