0. 写出移动端html根元素字体大小设置为100px时,使用vw的推导过程
/* 750px html{font-size:26.67vw}
640px html{font-size: 31.25vw;} */
1. 元素的类型分类?元素类型的特点?
块状元素:独占一行,可以设置宽度和高度 margin,padding都支持
行内元素(内联元素):不独占一行,不可以设置宽度和高度,支持左右padding,左右margin。
行内块元素(置换元素):img input select textarea
行内块元素水平居中:给父元素设置text-align:center
竖直方向:height和line-height(行内块元素加vertical-align:middle)
2. 常见的标签的属性?比如a标签常见的属性? img常见的属性
<a href='' title='' target='blank/self/new' ></a>
<img src='' title='' alt =''> seo
3. 盒子模型的组成?盒子模型分为哪两种,有什么区别?
margin padding border width height
margin padding border content(width+height)
触发怪异盒模型:box-sizing:border-box;
怪异盒模型(ie盒模型):
标准盒模型:box-sizing:content-box;
4. 浮动的属性float的属性值有哪几个?
left/right/none
5. 浮动元素的特点,如何清除浮动,有哪些方案?
脱标(脱离标准文档流)
空盒子 <div style='clear:both'></div>
高
.clearfix::after{
content:'';
display: block;
visibility: hidden;
clear:both;
overflow:hidden;
height:0;
}
父元素:overflow:hidden
6. 写出定位属性position的属性值有哪些?以及明显特点?
static 静态定位 ,默认
relative 相对定位 不脱标 相对于自身进行定位的,位置上不会影响元素。
absolute 绝对定位 脱标 相对于具有定位的父级元素来进行定位。位置上会影响其他元素。内联元素支持宽度和高度
fixed 固定定位 脱标 相对于浏览器窗口
sticky 吸顶
postion:
left/right
top/bottom
z-index:
7. 说出相对定位和绝对定位的特点?
8. 写出css常见的选择器,css3常见的选择器
*
标签选择器(元素选择器)
类选择器
id选择器
交叉选择器
子代选择器
后代选择器
群组选择器
伪类选择器
css3选择器
a标签的四个伪类选择器 :link{} :visited{} :hover{} :active{}
目标伪类 :target
UI元素状态 :enabled :disabled :checked
否定伪类: :not() body :not(p){}
属性选择器:[class='b'] [type*='a'] [type^='a'] [type$='a']
结构伪类::nth-child()
:first-child
:last-child
:only-child
::first-line 第一行
::first-letter 第一个字
获取焦点 :focus
相邻选择器: E+F
E~F
9. 写出html5新增常见的标签有哪些?
header
main
footer
article
section
aside
figure
figcaption
nav
video controls autoplay loop muted poster
audio
10. 写出css3新增背景相关的属性有哪些?
background-size:cover 、contain、百分比,px
background-origin: border-box/ content-box/padding-box(默认值)
background-clip: border-box/ content-box/padding-box
11. 写出bfc的特点,解决哪些问题?
独立容器,独立渲染,块级格式化上下文
1. 独立渲染区域内的元素不会影响到外部的元素
2. 独立渲染区域内的元素排列是从上向下一次排列
3. bfc和浮动元素不会发生重叠
4. bfc在计算高度的时候,浮动元素的高度计算其中
外边距重叠
高度塌陷
可以清除浮动
12. 写出常见的表单控件?以及表单的一些属性?
email required(必填项) multiple(书写多个邮箱,中间由,隔开),autofocus(自动获得焦点)
url
number step='' min ='' max=''
range step='' min ='' max=''
color
search
time
date
week
month
datetime-local
13. 写出表格的标签以及 标签上的属性有哪些?
table width height border bgcolor align bordercolor cellpadding cellspacing
tr height bgcolor align valign
td/th width height bgcolor align valign
thead
tfoot
tbody
列分组:<colgroup>
<col span='2' style='background:red'>
<col>
</colgroup>
caption
14. 写出css中可以继承的属性有哪些?
color
font-size font-style font-weight font-family line-height
letter-spacing word-spacing
text-align text-decoration text-indent text-tansform
15. 写出对css层叠性(也就是优先级)理解?
行内样式》内部样式》外部链接
16. 写出overflow的属性值以及区别?
overflow:visible( 默认值,默认超出不隐藏)
hidden(默认溢出隐藏)
auto(没有超出没有滚动条,超出出现滚动条)
scroll(存在滚动条,多出来的内容以滚动形式出现)
17. 写出多余内容显示省略号的代码
width:;
overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
white-space: nowrap;(设置文字在一行显示,不能换行)
text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)
18. 写出媒体查询不同像素宽的屏幕显示不同的背景颜色?
如: 小于678px时,红色背景
678px-980px,黄色背景
大于980px,黑色背景
@media screen and (max-width:678px){
body{
background-color: red;
}
}
@media screen and (min-width:678px and max-width:980px){
body{
background-color: yellow;
}
}
@media screen and (min-width:980px){
body{
background-color: black;
}
}
19. 写出超链接的内部跳转语法?
<a href='#m'></a>
<标签 id='m'></标签>
20. 写出超链接的几种伪类选择器?
:hover{}
:visited{}
:link{}
:active{}
21. 写出外边距重叠解决的方案?
给父元素加overflow:hidden
给父标签加透明的边框
23. 写出几种可以是负数的属性?
text-index:-2em;
letter-spacing:-10px;
margin-left:-10px;
transform:translate(-10px,-10px)
26. 写出弹性布局中设置主轴方向的属性?写出弹性布局中交叉轴(侧轴)的对齐方式有哪些?
主轴方向属性:flex-direction;
交叉轴(侧轴)对齐方式:align-items:
27. 使用代码写出一个三角形?
div{
width:0px;
height:0px;
border-width:10px;
border-style:solid;
border-color:red transparent transparent transparent;
}
29. 写出倾斜,旋转,平移,缩放的写法?
transform:skew(7deg);
transform:rotate(7deg);
transform:translate(10px);
transform:scale(2,2);
20. 写出使样式可以发生过渡的属性和属性值?
transition:
21. 写出常见的特殊字符,以及含义?
<
>
©
22. 写出em,rem,vw的含义?
1em = 1个父元素的字体大小
1rem=1个根元素的字体大小
1vw=视口宽度的1%
23. 写出解决高度塌陷的方案?
1. 父元素加overflow:hidden
2. 加空标签,清除浮动
3. 父元素加类名,加.clearfix::after{}
24. 写出使用transform来使元素居中的代码?
.zi{
width:100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
25. visibility:hidden和display:none 的区别?
visibility:hidden; 消失占位置
display:none;消失不占位置
26. 给元素加一个自定义动画的条件?
先定义动画
@keyframes 动画名称 {
}
再使用动画
div{
animation:动画名称 过渡时间 过渡函数类型 延迟时间 播放次数
}
27. 设置样式的三种方案,优先级
行内样式>内部样式>外链样式
28. flex是哪几个属性的复合?
border是哪几个属性的复合?
background是哪几个属性的复合?
list-style是哪几个属性的复合?
font是哪几个属性的复合?
font-style font-weight font-size/line-height font-family
29.对于多列布局中设置 列数的属性?
column-count
属性列与列之间间距的属性?
column-gap
列与列之间边框的样式的属性?
column-rules
30. 对于图片间隙的解决方案?
img{
display:block;
}