2021-11-03第一阶段

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. 写出常见的特殊字符，以及含义？
&nbsp;
&lt;
&gt;
&copy;
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;
}