简答题
1.常见的块级元素和行内元素有哪些?说说行内元素和块级元素的主要区别。
块级元素:
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、meue、pre。HTML5新增的header、section、aside、footer等
特点: 自动换行、独占一行、可设置宽度、默认宽度为父元素的宽度。
行内元素:
span、img、a、lable、input、abbr、em、big、cite、i、q、textarea、select、small、sub、sup、strong、u、button。
特点: 无法自动换行:一行可放多个;不可设置宽度;默认宽度是本身内容宽度;padding可以设置;margin只能设置水平方向的边距。
2.去掉ul、li前面的小点,需要使用什么属性?具体方法是什么?
list-style:none;
,
有的写list-style-type:none;
。
3.清除浮动的方法有哪些?
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置
clear:both;
)。
优点:通俗易懂,方便。
缺点:添加无意义标签,语义化差。
2.父级添加overflow属性(父元素添加:overflow:hidden
)。
通过触发BFC(第11题解释)方式,实现清除浮动。
优点:代码简洁。
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏,无法显示要溢出的元素。
3.(推荐)使用after伪元素清除浮动。
优点:符合闭合浮动思想,结构语义化正确。
缺点:IE6-7不支持伪元素;用zoom:1触发hasLayout。
4.(推荐)使用before和after双伪元素清除浮动。
优点:代码更简洁。
缺点:用zoom:1触发hasLayout。
4.你知道哪些选择器?CSS优先级算法如何计算?
选择器:
元素选择器;类选择器;id选择器;通配符选择器。
CSS优先级算法:
(1)判断是否是直接选中(间接选中就是指继承): 如果是间接选中,遵循“就近原则”保持状态努力向前
(2)如果是相同的选择器时:如果都是直接选中,并且都是同类型的选择器,则遵循后写的选择器的设置;
(3)如果是不同选择器时:如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠
其中:id>类>标签>通配符>继承>浏览器默认
注意:!important设置的样式优先级别最高,通配符*优先级别最低
5.CSS中有哪些样式可以继承?
所有子元素,列表元素,块级元素,内联元素,表格元素;
以list-
,text-
,font-
等开头;
6.让一个元素不可见的方法(至少两种),并说说他们的区别。
1.添加
visibility:hidden;
属性
2.添加display:none;
属性
3.添加opacity:0;
属性(元素隐藏,但依然占据空间,存在于文档流中,只是透明度被设置100%)
7.你是否了解过flex布局?有哪些常用的属性?
flex"弹性布局":
用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
flex布局父项常见属性:
flex-direction
:设置主轴的方向;
justify-content
:设置主轴上的子元素排列方式;
flex-wrap
:设置子元素是否换行;
align-content
:设置侧轴上的子元素的排列方式(多行);
align-items
:设置侧轴上的子元素排列方式(单行);
flex-flow
:复合属性,相当于同时设置了flex-direction和flex-wrap。
flex布局子项常见属性:
flex
:定义子项目分配剩余空间,用flex来表示占多少份数。
align-self
:控制子项自己在侧轴的排列方式。
order
:定义项目的排列顺序,数值越小,排列越靠前,默认为0。
8.让一个div水平垂直居中的方法(至少两种)。
1.给div添加
margin:0 auto;
属性;
2.position 定位+margin(子盒子有宽度和高度的时候)
3.position + transform(子盒子有或没有宽高的时候都适用)
4,flex(子盒子有或没有宽高的时候都适用)
9.说说你知道的animation和transition的属性以及作用。
animation(动画):
@keyframes
:规定动画模式。
animation-name
:规定@keyframes
动画的名称。
animation-duration
:规定动画完成一个周期应花费的时间。
animation-delay
:规定动画开始的延迟。
animation-iteration-count
: 规定动画应播放的次数。
animation-direction
:定动画是向前播放、向后播放还是交替播放。
animation-timing-function
:规定动画的速度曲线。
animation-fill-mode
:规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)。
animation-play-state
:规定动画是运行还是暂停。
animation
:设置所有动画属性的简写属性。
transition(过渡):
transition
:简写属性,用于将四个过渡属性设置为单一属性。
transition-delay
:规定过渡效果的延迟(以秒计)。
transition-duration
:规定过渡效果要持续多少秒或毫秒。
transition-property
:规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function
:规定过渡效果的速度曲线。
10.你知道哪些定位?说说它们的区别。
父元素相对定位,子元素绝对定位。
(1)绝对定位:是元素在移动位置的时候,是相对于它父级元素来说的。
主要特点:
绝对定位不占据原来的位置(脱标);
没有父级元素或父级元素没有定位,则以浏览器为准定位;
父级元素有定位,则以最近一级的有定位父级元素为参考点移动位置。
(2)相对定位:是元素在移动位置的时候,是相对于它原来的位置来说的。
主要特点:
移动位置的时候是参照点是自己原来的位置;
不脱标,继续保留原来的位置;
行内元素使用相对定位不能转行内块。
(3)固定定位:是元素固定与浏览器可视区的位置。
主要特点:
以浏览器的可视窗口为参照点移动元素;
跟父元素没有任何关系;
不随滚动条滚动;
固定定位不再占有原先的位置(脱标),可以看作是一种特殊的绝对定位;
元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;
)。
11.BFC是什么?有什么作用?
BFC可以理解为一个区域(块级格式化上下文)
在这个区域内的元素无论如何布局,都不影响区域外的元素。
触发BFC的条件:
1.有根元素,即HTML元素;
2.添加定位,position
值为absolute
或fixed
;
3.浮动元素:float
不为none
;
4.块级元素:overflow
不为visible
;
5.元素强制转换类型:display
值为inline-block,table-cell,table-caption
代码题
1.用CSS画一条0.5px的线。
使用transform属性进行缩放。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用CSS画一条0.5px的线</title>
<style>
div {
width: 100px;
height: 1px;
background: black;
transform: scaleY(0.5)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果:
2.使用CSS实现淡入淡出动画效果。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡入淡出
</title>
<style>
div {
background-color: green;
width: 150px;
height: 150px;
opacity: 1;
}
div:hover {
content: "";
display: block;
opacity: 0;
transition: all 2s;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果:
3.使用CSS实现一个,选中行变色的细边框表格。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.datalist {
border: 1px solid black;/* 表格边框 */
font-family: Arial;
border-collapse: collapse;/* 边框重叠 */
background-color: white;/* 表格背景色 */
font-size: 14px;
}
.datalist td {
border: 1px solid black;/* 单元格边框 */
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
.datalist tr:hover,
.datalist tr.altrow {
background-color: rgba(128, 128, 128, 0.299);/* 动态变色 */
}
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="member">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果:
附加题
1.使用CSS实现一个简单的轮播图。
轮播图:
多张图片按照一定的时间顺序依次从某个窗口来向用户展示。
思路:
a.创建一个容器进行展示。
b,创建一个容器存储图片。
c.在存储容器中放入图片。
d.为图片设置动画。
2.使用div+css实现一个圆形,红色占60%,绿色占40%。
之后补充。
3.要求使用最多两个元素实现以下效果(二选一)。
No1.
思路:
使用绝对定位,增加盒子边框。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框显示一半(绝对定位)</title>
<style>
#holder {
width: 300px;
height: 50px;
background-color: rgba(128, 128, 128, 0.402);
position: relative;
margin: 10px;
}
#mask {
width: 50%;
height: 1px;
position: absolute;
background-color: red;
top: -1px;
left: 1px;
}
</style>
</head>
<body>
<div id="holder">
请看这个div的“上边框”是只有一半的
<div id="mask"></div>
</div>
</body>
</html>
效果:
No2.
思路:
使用伪类,在元素前或后插入内容。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框显示仪一半(伪类)</title>
<style>
div {
width: 300px;
height: 50px;
background-color: rgba(128, 128, 128, 0.402);
position: relative;
margin: 10px;
}
div::before {
content: "";
width: 50%;
height: 2px;
position: absolute;
background-color: red;
top: -1px;
left: 1px;
}
</style>
</head>
<body>
<div>请看这个div的“上边框”是只有一半的</div>
</body>
</html>
效果: