简答题
1.常见的块级元素和行内元素有哪些?说说行内元素和块级元素的主要区别
常见的块级元素:p,div,table,ul,dl,ol等
行内元素:img,a,input,span,strong等
主要区别:块级元素独自占一行,行内元素不肚子占一行;块级元素的大小可以控制,而行内元素的大小不可控制。
2.去掉ul li 前面的小点,需要使用什么属性?具体方法是什么?
需要使用list-style
具体方法:
ul {
list-style: none;
}
3.清除浮动的方法有哪些?
(1)额外标签法
在父元素的后面添加一个标签,再给该标签添加一个 clear: both 即可
(2)父元素添加overflow属性
给父元素添加 overflow:hidden,触发BFC方式,实现清除浮动
(3)使用after伪元素清除浮动
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: "";
height: 0;
}
.clearfix {
*zoom: 1;
}
(4)使用before和after双伪元素清除浮动
.clearfix::after,.clearfix::before {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
其中第三种和第四种在实际开发中比较推荐使用
4.你知道哪些选择器?CSS优先级算法如何计算?
基本选择器:通配符选择器,标签选择器,id选择器,类选择器,属性选择器;
伪类选择器:伪类选择器,伪元素选择器;
关系选择器:后代选择器,子元素选择器,相邻选择器,兄弟选择器。
优先级算法:先计算权重,权重相同时遵循就近原则(也就是后出现的那个);
权重计算方式:
标签选择器权重为1,类选择器、伪类选择器、属性选择器权重为10,id选择器的权重为100,通配符的权重为0,!important的权重为为无穷大。(权重值又称特指度值)
5.css中哪些样式可以继承?
字体系列属性:font、font-family、font-weight、font-size、font-style;
文本系列属性:
内联元素:color、line-height、word-spacing、letter-spacing、text-transform;
块级元素:text-indent、text-align;
元素可见性:visibility
表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout;
列表布局属性:list-style。
这些属性太多了,简记为:以color、font、text、line开头的属性可以继承即可。
拓展:
不可以继承的属性:
display:规定元素生成框的类型;
文本属性:vertical-align、text-decoration;
盒子模型的属性:width、height、margin、border、padding;
背景属性:background、background-color、background-image;
定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip。
6.让一个元素不可见的方法(至少两种),并说说他们的区别
display:none
让元素直接消失,不再占用空间
visibility:hidden
隐藏元素,但依旧占用空间
opacity:0
7.你是否了解过flex布局?有哪些常用的属性?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局,行内元素也可以使用 Flex 布局。
注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
属性:
flex-direction —— 决定主轴的方向
flex-wrap —— 定义当一条轴线排不下,如何换行
flex-flow —— 是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content —— 定义了项目在主轴上的对齐方式
align-items —— 定义项目在交叉轴上如何对齐
align-content —— 定义了多根轴线的对齐方式(项目只有一根轴线时不起作用)
8.让一个div水平垂直居中的方法(至少两种)
一
margin:auto auto;
二
div {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
三
div {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
9.说说你知道的中 animation 和 transition的属性以及作用
animation:
animation-name 用来引用动画
animation-duration 控制动画持续的时间
animation-timing-function 控制动画的运动曲线
animation-delay 控制动画多久以后开始
animation-iteration-count 控制动画的执行次数(infinite为无限次)
animation-direction 控制动画是否反向播放
animation-fill-mode 控制动画结束时的状态
transition:
transition-property 指定属性的name、transition效果
transition-duration 指定完成过渡的时间
transition-timing-function 指定完成过渡的运动曲线
transition-delay 指定过渡在延迟多久开始
10.你知道哪些定位?说说他们的区别
绝对定位
脱离文档流
元素使用绝对定位之后不占据原来的位置(脱标)
元素使用绝对定位,位置是从浏览器出发。
嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。
嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。
给行内元素使用绝对定位之后,转换为行内块。
相对定位
未脱离文档流
还占据原来的位置
使用相对定位,位置从自身出发
父元素相对定位,子元素绝对定位(子绝父相)
行内元素使用相对定位不能转行内块
固定定位
脱离文档流
不占据原来的位置
相对于浏览器进行定位
会将元素转化为行内块
11.BFC是什么?BFC的作用?
BFC即块格式化上下文,它决定元素的内容如何渲染以及与其他元素的关系和交互。一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素,外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。
BFC的作用:
清除浮动(1.当一个元素浮动后,会影响附近的文字的行为。2.浮动元素与处在正常流的元素重叠)
解决外边距塌陷
解决宽度自适应的两栏布局
拓展:创建BFC的条件
根元素,也就是html元素
overflow属性值(处理块级元素溢出的内容)=hidden|auto或scroll(≠visible)的块级元素
Float不为none的浮动元素
position属性是fixed或absolute的定位元素;
display属性为inline-block,table-block,table-caption或flex。
IFC是行级格式化上下文
它有这样的一些布局规则:
行级上下文内部的盒子会在水平方向,一个接一个地放置。
当一行不够的时候会自动切换到下一行。
行级上下文的高度由内部最高的内联盒子的高度决定。
作用:
水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
代码题:
1.用css画一条0.5px的线
由于最小的单位为1px,所以这里我们采用定义长度或高度为1px,再对其进行缩放操作
<!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>
div {
width: 100px;
height: 1px;
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>Document</title>
<style>
@keyframes move {
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
div {
width: 200px;
height: 200px;
opacity: 0;
background-color: pink;
animation: move 3s;
}
</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>
div {
width: 200px;
height: 50px;
background-color: pink;
}
div:hover {
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
附加题:
1.使用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>
.a {
width: 100px;
height: 100px;
background-color: pink;
overflow: hidden;
}
@keyframes move {
0% {}
50% {
transform: translateX(-100px);
}
100% {}
}
img {
animation: move 6s 1s infinite;
}
</style>
</head>
<body>
<div class="a">
<!-- 这里的图片地址可以换 -->
<img src="img/bear.png" alt="">
</div>
</body>
</html>
2.使用div + css 实现一个圆形,红色占60%,绿色占40%
<!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>
.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background: pink;
/*线性渐变,给右半部分着色*/
background-image: linear-gradient(to right, transparent
50%,skyblue 50%);
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
/*让伪元素变成一个半圆*/
border-radius: 0 50px 50px 0;
background: pink;
/*希望蒙版围着圆的中心点旋转*/
transform-origin: left;
/*旋转伪元素,要显示40%的比例,我们可以设置
0.4*360=144deg*/
transform: rotate(144deg);
}
</style>
</head>
<body>
<div class="pie"></div>
</body>
</html>
涉及的知识盲区
线性渐变
background-image:linear-gradient(to 方向/角度,颜色一,颜色二,…,颜色n)
3.要求使用至多两个元素实现以下效果(二选一):
<!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>
* {
margin: 0;
padding: 0;
}
body {
font-size: 0;
}
.a {
position: relative;
top: 11px;
display: inline-block;
width: 200px;
height: 100px;
background-color: pink;
}
.b {
content: '';
display: inline-block;
position: absolute;
left: 0;
top: 10px;
vertical-align: middle;
height: 1px;
width: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
body {
font-size: 0;
}
.a {
position: relative;
display: inline-block;
width: 200px;
height: 100px;
background-color: pink;
}
.b {
content: '';
display: inline-block;
position: absolute;
left: 200px;
top: 25px;
vertical-align: middle;
height: 50px;
width: 1px;
background-color: #000;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>