前端-html面试合集

get追加到地址栏，小快不安全。
Form当中method的post和get的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

块级元素：默认独占整行，是一个完整的盒子，可以设置宽高等。
    行级元素：有多宽占多宽，不是完整的盒子，不可以设置宽高、垂直方向的内外边距等。

权重之和,和越大,越优先.和一样,后者覆盖前者.
    !important > 行内样式 > id > 类  > 标签  > * > 继承 > 默认
        无穷        1000    100  10     1     0   
    属性:属性值 !important;

盒子模型是一种思维模式，主要用于实现布局效果。
盒子模型由尺寸+边框+内边距+外边距组成。

1.margin的粘连问题（父随子动）
    1.使用padding替代-记得修改高度
    2.给父元素添加透明边框。  [透明transparent]
        border:1px solid  transparent;
    3.给父元素添加overflow:hidden;
2.margin的塌陷问题
    1.在一个元素身上设置足够的间隔。

概念：他们都是盒子模型，只是是不同的模式而已。
设置：
    box-sizing:border-box怪异模式  | content-box 标准模式;
区别：
    元素实际占据的宽高的计算方式不一致
    标准模式：实际占据的宽度 =  width + border + padding + margin
    怪异模式：实际占据的宽度 =  width + margin
说明：通常在手机端使用怪异模式。

概念：有上下级关系的元素之间，上级元素的样式被下级元素所拥有，这个现象就是继承。
文本相关的属性和列表相关的属性会被继承。
请列举15个会被继承的属性：
1.font-size
2.color
3.font-family
4.font-style
5.font-weight
6.text-align
7.text-decoration
8.text-indent
9.line-height
10.list-style
11.list-style-image
12.white-space
13.opacity
14.cursor
15.list-style-position

1.设置宽度  width:*px;
2.强制不换行   white-space:nowrap;
3.设置溢出隐藏  overflow:hidden;
4.设置溢出的标识是省略号    text-overflow:ellipsis;
多行文本溢出显示省略号，用js实现。

方式是很多的，我常用的是：
方法1：
  position:fixed | absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
方法2：
  position:fixed | absolute;
  top:50%;
  left:50%;
  margin-top:-盒子高度的一半；
  margin-left：-盒子宽度的一半；
  或
  position:fixed | absolute;
  top:50%;
  left:50%;
  transform:translate(-盒子宽度的一半，-盒子高度的一半)；
方法3：弹性盒子实现
  给父元素盒子设置：
    display:flex;
    justify-content:center;
    align-items:center;

opacity:0~1数值；
filter:alpha(opacity=0~100的数值)；  ie浏览器兼容
0为完全透明；opacity:1或filter的100都是完全不透明；
说明：这是让元素整体都透明；若只让背景颜色透明，可以用rgba(R,G，B,透明度)

方式1：
1.给浮动元素的最后面添加一个空的div,并给他一个类名clear    <div class='clear'></div>  
2.给该元素设置唯一的样式 .clear{clear:both; }
  方式2：
1.给浮动元素的父亲添加类名clearfix
2.设置样式
                        .clearfix:after{           //在该元素的内容后面添加一个伪元素
                            display:block;          //伪元素的类型是块级元素
                            content:'';             //元素的内容为空的
                            clear:both;             //清除前面兄弟的浮动
                            height:0;               //处理低版本兼容的
                        }
                        .clearfix{  zoom:1;  }     //IE6清除浮动的
   方式3：
                    1.给浮动元素的父亲添加样式  overflow:hidden;
————————————————
版权声明：本文为CSDN博主「橘 日向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Charlotte_99/article/details/123309697

伪类是一种临时状态，只有状态触发的时候生效。伪元素是一个假的元素，虚拟的dom节点。
    伪类使用单冒号，伪元素使用双冒号。

min-height:*px;
height:auto!important;
_height:*px;

1.display:none; 不占据原位置
2.visibility:hidden; 会占据原位置  [visibility:visible;显示]
3.opacity:0; 会占据原位置。可以点击触摸等。

触发、生成BFC：
    1.浮动
    2.overflow的值不为默认值的时候。--hidden 、 auto 、scroll
    3.定位position的值为fixed和absolute;
    4.display的属性值为inline-block、flex和inline-flex;
应用场景：
    1.清除浮动
    2.解决margin的bug
    3.实现两列自适应布局

上固定，下面自适应:
  上边设置高度，下边设置宽度，不设高度，设置定位；
两列自适应布局:  
  左边固定宽度左浮动，右边不设置宽度+overflow：hidden;
结构&样式如下：

<div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

html,body{
            height: 100%;
        }
        *{
            margin:0;
            padding:0;
        }
        .header{
            height: 50px;
            background:pink;
        }
        .content{
            width: 100%;
            background: skyblue;
            position:absolute;
            top:50px;
            bottom:50px;
            left:0;
        }
        .content .left{
            width: 200px;
            height: 100%;
            background:green;
            float:left;
        }
        .content .right{
            height: 100%;
            background:orange;
            overflow:hidden;
        }
        .footer{
            width: 100%;
            height: 50px;
            background:purple;
            position:absolute;
            bottom:0;
            left:0;
        }

前缀 & 浏览器内核 & 代表浏览器
-o- & presto & 欧朋
-ms- & trident & iE
-moz- & gecko & 火狐
-webkit- & webkit & 谷歌 | safari
    & blink &

精灵图|雪碧图：多张图片组合实现的图； sprites
实现步骤：
  1、实现一个指定大小的盒子
  2、将精灵图设置为该盒子的背景图
  3、调整背景图的位置
优缺点：
  减少请求，提高性能
  减少文件数量，降低命名难度
  占用内存小
  代码冗杂，增删图标麻烦

语义：有意义的，能够见名思意，提倡用正确语义的标签去描述对应的内容
请列出15个html新增的标签：
  1.header
  2.nav
  3.aside
  4.section
  5.footer
  6.main
  7.artical
  8.figure
  9.figcaption
  10.dialog
  11.canvas
  12.output
  13.video
  14.audio
  15source

能够让元素慢慢动起来的方式有两种：
第一种：transition过渡属性
第二种：执行动画animation
  @keyframes 动画名{
    0%{
    }
    中间状态*{
    }
    100%{
    }
  }
二者区别：、
过渡需要触发，只能用来实现比较简单的动画；
animation可不用触发，用来实现复杂的动画

flex:1 1 auto;

<meta name="viewport"   content="width=device-width, initial-scale=1.0";>

有区别的。位移在前，是在旋转的基础上进行位移；旋转在前，是在位移的基础上旋转的；