前言
这部分相对来说比较简单,大神可以直接跳过哈!
html
html部分(考察较少较简单,组织好语言即可)
-
如何理解语义化
(1)便于理解,提高代码可读性
(2)有利于SEO -
解释块状元素和行内元素
(1)设置宽高无效
(2) 对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
(3) 不会自动进行换行 -
h5的一些新特性
(1)标签语义化
(2)新增media查询
(3)新增了一些标签,eg:video、audio等
(4)本地存储(可能会引申到cookie、sessionStory、localStory等问题)
css
- 盒子模型宽度计算
(1)offsetWidth = 除了margin的所有宽度相加
(2)box-sizing常用值和作用
- box-sizing: content-box|border-box;
- 为border-box时offsetWidth = width(即宽度包含border和padding)
- 伪类选择器和伪元素:看这里
- 浮动,解释高度塌陷,如何清除浮动或者说怎样解决高度塌陷(详见8,9,还有增加新div元素,css设置为clear: both)
- css实现三角型、梯形、圆
- margin纵向重叠问题
(1)相邻元素的margin-top和bottom会重叠
(2)且空白标签也会重叠
// 举例说明(这里只有css和html哈)
// 好好好、棒棒棒之间的距离是多少
<style type="text/css">
div {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>好好好</div>
<div></div>
<p></p>
<div>棒棒棒</div>
</body>
// 答案:15px
-
margin负值
(1)margin-top、margin-left负值,元素分别向上向左移动
(2)margin-right负值,自身不动,右侧元素左移
(3)margin-bottom负值,自身不动,下侧元素上移 -
BFC相关问题(BFC详细讲解看这里.)
(1)形成BFC常见条件
overflow 值不为 visible 的元素
float不是none
display 值为 flow-root 的元素
position 为 absolute 或 fixed
(2)BFC常见使用场景
两个BFC可以避免margin重叠(但是BFC内部相邻容器不能避免)
可以用来自适应两栏布局(BFC的区域不会与float box重叠)
包含有浮动的元素,不会造成高度塌陷
(3)BFC的布局规则
BFC内部的盒子会垂直排列
BFC区域不会和float盒子重叠
BFC即页面上独立的容器,不会影响外部布局 -
手写clearfix
.clearfix:after {
content: ''
display: table
clear: both
}
-
flex布局
感觉比较简单,这里就不细说了哈,有需要看这里(阮一峰的flex语法.) -
定位
(1)relative和absolute
relative:相对自己定位
absolute:相对上级relative元素,如果没有上级,则相对当前窗口
(2)居中对齐
水平居中
垂直居中
(1)inline元素:line-height = height
(2)position: absolute; top: 50%; margin-top: 50%
(3)position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
(4)position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto
(5)display: flex; flex-direction: cloumn; justify-content: center -
响应式
(1)line-height继承
- 具体数值(eg:20px),直接继承;
- 比例(eg:2),则继承比例
- 百分比(eg:200%),则继承计算后的值
// 比例:p的line-height为16 * 2 = px
body {
font-size: 20px;
line-height: 2;
}
p {
background-color: #ccc;
font-size: 16px;
}
// 百分比:p的line-height为20 * 200% = 40px
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
(2)rem和em区别
都是相对长度,
但rem相对于根元素来定,在根元素中设定font-size后,即可自动相应;
em是相对于父元素来定,可以随着font-size变化,适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值
(3)响应式常用方案(用过哪些说哪些,结合自己项目就行,这里大概罗列一下)
- 百分比;
- rem搭配media query(注意:iphone 6/7/8/x 375-414px)
- vw、vh使用(也可以称作vmax、vmin)
-
浏览器的兼容问题
-
Css动画:菜鸟教程解释的很全面
// 一个简单的栗子
{
background:red;
animation:mymove 5s infinite;
/*Safari 和 Chrome:*/
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}