简单题：
就是指那些靠背的题，加油背熟来吧！
什么是 行内元素、块级元素、空(void)元素?
答：
每一个元素都有其默认的display属性值，比如div它的属性为“block”，即块级元素。行内元素比如span，它display的值为“inline”。而空元素则是指没有内容的html元素。
行内元素和块级元素有什么区别?
答：
主要有四个区别
- 默认 dispalay 属性:
- 块级：display: block;
- 行内：display: inline;
- 占据空间:
- 块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度 。
- 行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
- 设置宽高 width, height:
- 块级：块级元素可以设置宽高 。
- 行内：设置宽高后不生效 。
- 设置 margin, padding:
- 块级：块级元素可以设置 margin, padding 。
- 行内：行内元素水平方向的可以设置，竖直方向无法设置
行内元素有哪些? 块级元素有哪些? 空(void)元素有那些？
-
行内元素(11): a、b、span、img、input、strong、select、label、em、button、textarea 。
-
块级元素(9): div、ul、li、dl、dt、dd、p、h1-h6、blockquote 。
-
空元素(6): 即系没有内容的HTML元素, 例如: br、meta、hr、link、input、img 。
title与h1的区别、b与strong的区别、i与em的区别？
title与h1的区别：
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉我们的网站内容最主要是什么
区别：
title他是显示在网页标题上、h1是显示在网页内容上
title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
网站的logo都是用h1标签包裹的
b与strong的区别：
定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气的。
区别：
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用，该用strong就行了。
i与em的区别：
定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）。
img标签的title和alt有什么区别？
相同点：它们都会出现浮层，显示出自己设置的图片相关的内容
不同点：
alt属性： 1. 当图片加载不出来的时候，会在未显示的地方出现一段alt设置的内容。这个属性是为了给未加载的图片显示信息，即使网络较差，用户也能够知道图片内容，方便浏览。同时也便于程序员维护。
2. 浏览器的搜索引擎可以通过alt属性的文字描述获取图片
title属性：title属性只要鼠标移动到对应元素上，就会显示title的内容，起到对文字说明的作用。
png、jpg、gif 这些图片格式解释一下，分别什么时候用？
png：无损压缩，尺寸体积大，适合小图标
jpg：采用压缩算法，有些失真，尺寸体积小，适合中大图片
gif：动图
webp：有损无损压缩均可，比同质量图片的体积更小，兼容性差
display有哪些值？说明他们的作用
none 隐藏元素
block 把某某元素转换成块元素
inline 把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素
（ps：行内块元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元宽度和高度，也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。）
position有哪些值？分别是根据什么定位的？
- static(默认)：没有定位
- fixed：固定定位，相对于浏览器窗口进行定位。
- relative：相对于自身定位，不脱离文档流
- absolute：相对于第一个relative的父元素
CSS中有哪些长度单位？
绝对长度单位：px
百分比: %
相对父元素字体大小单位: em
相对于根元素字体大小的单位: rem
相对于视口宽度的百分比（100vw即视窗宽度的100%）: vw
相对于视口高度的百分比（100vh即视窗高度的100%）: vh
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2、类型：IE 盒子模型、标准 W3C 盒子模型
3、标准盒模型和 IE 盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而 IE 盒模型的宽高指的是内容（content ）+ 内边距（padding ）+ 边框（border）。
4、设置盒模型的方式是：设置 box-sizing
① box-sizing：content-box 标准盒模型
② box-sizing：border-box IE盒模型
CSS选择符有哪些？
- 通用选择器（*）选择所有元素
- 类选择器（.）按照给定的 class 属性的值，选择所有匹配的元素
- 标签选择器（p，span…）页面上所有这种类型的标签
- id选择器（#）按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
- 属性选择器（a[title]即存在 title 属性的 a元素）
- 后代选择器 定义的时候用空格隔开,选择的是后代，不一定是儿子
<style type="text/css">
.div1 p{
color:red;
}
</style>
- 直接子代组合器 a>b 组合器选择前一个元素的直接子代的节点
- 交集选择器 注意，交集选择器没有空格。这种写法，是 IE7 开始兼容的，IE6 不兼容。而且，我们一般都是以标签名开头，比如div.haha 比如p.special。
<style type="text/css">
h3.special{
color:red;
}
</style>
- 并集选择器：定义的时候用逗号隔开
p,h1,#mytitle,.one/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{
color:red;
}
- 伪类选择器 （伪类和伪元素）
-
伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
例子：a:visited 匹配所有曾被访问过的 a 元素。 -
伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
例子：p::first-line 匹配所有 p 元素的第一行。
伪类和伪元素的区别
伪类只能使用“：”，伪元素既可以使用“:”，也可以使用“::”
伪元素其实相当于伪造了一个元素，伪类没有伪造元素，例如first-child只是给子元素添加样式而已。（本质区别就是是否抽象创造了新元素）
ps：常见的伪类和伪元素自己去搜搜背背
什么是语义化，有什么作用
就是指用正确的标签做正确的事，便于阅读也便于浏览器爬虫和辅助技术更好解析
什么叫不合适的使用：比如非标题情况下用h标签和ul标签等
作用：提高代码的可读性，页面内容结构化，有利于开发和维护，同时提高的用户体验，有利于SEO。
复杂题
一个盒子不给宽度和高度如何水平垂直居中？
<div class='container'>
<div class='main'>main</div>
</div>
方法一：flex布局
.container{
display:flex;
justify-content:center; //垂直
align-items:center; //水平
width: 300px;
height: 300px;
.main{
background:red;
}
方法二：子绝父相+translate平移
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
一个盒子给了宽度和高度如何水平垂直居中？
<div class="father">
<div class="son">我是垂直居中的div</div>
</div>
方法一(绝对定位)
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son{
position:absolute;
margin:auto;
top:0; left:0; bottom:0;right:0;
//这就像四个方向有相同的力在拉这个盒子，很关键
width: 300px;
height:300px;
background-color: blue;
}
方法二（绝对定位）
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;（-盒子一半宽度）
margin-top: -150px;（-盒子一半高度）
width: 300px;
height:300px;
background-color: blue;
}
两栏布局左边固定右边自适应
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
方法一：float布局
.left {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.right {
margin-left: 200px;
height: 200px;
background-color: red;
}
方法二：flex布局
.father {
height: 300px;
width: 100%;
display: flex;
}
.left {
width: 300px;
height: 100%;
background-color: blue;
}
.right {
flex: 1;
height: 100%;
background-color: red;
}
三栏布局左右固定中自适应
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="main"> </div>
</div>
方法一：float布局
.father{
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
float: left;
background-color: red
}
.main {
margin-left: 200px;
margin-right: 200px;
background-color: blue
}
.right {
float: right;
width: 200px;
background-color: yellow
}
方法二：flex布局
.father {
display: flex;
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
background-color: red
}
.main {
flex: 1;
background-color: blue
}
.right {
width: 200px;
background-color: yellow
}
隐藏元素的方法
| 方法 | 说明 |
|---|---|
| display: none; | 不在页面中占据位置，也不会响应绑定的监听事件 |
| opacity: 0; | 透明值设置为0，在页面中占据位置，会响应点击事件 |
| position: absolute; | 使用绝对定位将其移出可视区域内 |
| z-index: -10; | 降低图层 |
| transform: scale(0,0) | 将图片缩放为0，在页面中占据位置，不会响应点击事件 |
2554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
