CSS+HTML面试题？

一、CSS3新属性？

border:border-radius、box-shadow、border-image、border-color、border-box

transfrom: rotate(9deg) scale(0.85,0.90) translate(0,-3px) skew(-9deg,0)

background: background-size

二、H5新特性？

新标签：<header><aside><main><nav><footer><section><article><hgrounp><canvas><audio><video>

input的类型：color、datetime-local、button、email、file、tel

新伪类：last-child()、first-child（）、

三、水平、垂直剧中的方法？

①transfrom

style{
position:relative;
margin:0 auto;
top:calc(100vh/2);
transform:translateY(-50%);


}

②flex布局

         display: flex;
         justify-content: center;
         align-items: center;

四、盒模型

①标准模型（W3C）

标准盒模型的width是content的width

②怪异模型

怪异模型的width是padding+border+content-width

五、块元素和行元素和行内块元素

①块元素独占一行可以设置宽高 display：block

div、p、from、h1-h6、p、ul、ol、li

②行元素不能设置宽高 display：inline；

a、span、u、strong、em

③行内块元素可以设置宽高， display：inline-block；

img、input、

六、常见布局

①flex布局

display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;

②表格布局

display:table;
display:table-row;
display:table-cell;

③网格布局

display: grid;
        grid-template-columns: 500px 500px;
        /* 设置每一列的列宽 */
        grid-template-rows: 200px 200px;
        /* 设置每一行的行高 */

七、定位 position

①relative 相对定位

相对于自己进行定位

②absolute 绝对定位

相对于除了static定位以外的最近的父元素进行定位。

③fixed 固定定位

相对于浏览器窗口进行定位

④static 没有定位

⑤inherit 规定应该从父元素继承 position 属性的值。

八、清除浮动的方法？

若一个div中有两个div其中一个浮动了。会导致父元素的高度无法撑开，影响与父元素同级的其他元素。

①在浮动元素后面在加一个标签

设置清除浮动

.d3{
clear：both；
}

②父元素使用 overflow：auto

③父元素使用after伪类

.div : :after{
content:"";
display:block;
clear:both;


}

九、CSS的优先级？

！important>id选择器>class选择器>标签选择器>通配符选择器>继承>浏览器默认属性

十、Viewport了解？

移动端开发常用

content有这么几个属性

①width：宽度 device-width 屏幕宽度

②initial-scale：初始缩放

③maximum-scale：最大缩放

④miximumu-scale：最小缩放

⑤user-scalable：是否允许用户进行缩放

十一、媒体查询@media

响应式布局：不同的设备能够自动调节布局

@media (min-500px)and(max-780px){
}

十二、如何理解H5的语义化标签

①让合适的内容有合适的标签，增加可读性，减少差异化。有利于开发人员更好的理解和维护。

②使得爬虫能够更高的解析文档。

③在没有层级样式的时候也能让页面呈现清晰的结构。

十三、BFC是什么？

BFC是格式化上下文

作用：①使BFC内部的浮动元素不会到处乱跑

②和浮动元素产生边界

<body>

  <div class="div1">
    <div class="div2">

    </div>
  </div>

</body>

    .div2{
        
         100px;
        height: 100px;
      box-sizing: content-box;
      box-shadow: 3px 3px  10px hotpink;
      float: left;
    
    
    }
  
    .div1{
      border: 5px solid red;
    
      }

产生效果：

创建BFC的方式

①父元素浮动元素（float的值不是none）

②决定定位元素（position的值为absolute/fixed）

③行内块元素（display的值为inline-block）

④display：flow-root；触发BFC

产生效果：

十四、单行省略和多行省略

单行省略

.box{

 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;//文本以省略号显示
}

多行省略

.box{

       display: -webkit-box;//将盒子设置为弹性盒子
       -webkit-line-clamp: 2;//显示多少行
       -webkit-box-orient: vertical;//文本显示方式，默认水平
       overflow: hidden;

}

十五、link标签和import标签的区别？

①link标签是页面加载的时候进行加载，@import标签是页面加载完毕后在进行加载。

②link是html标签内的，@import是CSS提供的。

③link的权重要比@import重。

④link存在于html标签内所以不存在兼容性，而@import是在ie5以上才支持的。