css基础总结

1.行内元素 块元素
1）行内元素：a strong b em i del s ins u span
2）块元素：div h1-h6 p ul ol li
3）行内块:img input td
2.使css盒子水平垂直居中

   div{
       position: absolute;
       top: 50%;
       left: 50%;
       width: 200px;
       height: 200px;
       transform: translate(-50%,-50%);
       background-color: aqua;
    }

    **3.href与src的区别**
        1）href:href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
        2）src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
        在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
        当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，
        类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
        补充：link和@import的区别：
            1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
            2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
            3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
            4）ink支持使用Javascript控制DOM去改变样式；而@import不支持。
    **4.定位：**
        1）静态定位static：相当于标准流
        2）相对定位：相对于自己，保留原有的位置，后面的盒子按照标准流对待，典型应用：限制绝对定位
        3）绝对定位：相对于祖元素，如果没有祖元素或者祖元素没有定位，则按照浏览器定位为准，父元素有定位
        以父元素为准，绝对定位不占有原来的位置。
        4）固定定位：以浏览器视口作为参考，固定定位不占有位置。固定定位的盒子一直贴着版心右侧显示
        5）粘性定位：position:sticky top,bottom,left,right有其中一个有效。
    **5.解决margin外边距合并问题**
        1）为父元素设置上边框border-top
        2)为父元素指定内边距 padding 
        3）为父元素overflow:hidden
    **6.三个div左右固定宽度200px,平均分剩下的空间**

div{
    width:800px;
    height:300px;
    display:flex
    justify-content: center;
    justify-content:flex-end;
    justify-content:flex-start;
    justify-content:space-around;
    justify-content:space-between;
}
.div1,.div2,.div3 {
    height:100px;
    width:100px;
}

7.css盒模型的理解
1）盒模型(box model)本质上是一个盒子，用于封装周围的HTML元素
2）包括：内容(content)、内边距(padding)、边框(border)、外边距(margin)
3）盒模型有两种：标准盒模型和IE盒模型
补充: 1）标准和模型宽高度只包括内容的大小
2）box-sizing:border-box:盒子的大小包括边框和内边距(IE盒模型)
8.rem,px,em之间的区别
1）px:像素，用于设置字体带下时，比较稳定和精确，不支持缩放和屏幕大小的适配，因为像素是固定的。
2）em:根据父元素来对应大小，是一种相对值。相对于当前对象文本的字体尺寸。任何人浏览器的默认尺寸
是16px,就是说1em=16px，通常body选择器中声明Font-size=62.5%。
3）rem:CSS3新增的相对单位，相对HTML的根元素
9.cookie,sessionStorage和localStorage的区别
1）相同点：三者都可以在浏览器端存储字符串类的键值对数据
2）sessionStorage和localStorage便于客户端存储数据。cookie用于存储HTTP的状态
3）cookie是浏览器请求服务器，服务器存放在浏览器的一块数据。下一次请求服务器的时候，会携带者cookie
一起发送给服务器。cookie用来判断发送的两次请求是否属于同一个浏览器，从而确认和保持用户的登录状态。
cookie使得无状态的http协议记录稳定的状态成为可能。
4）sessionStorage与localStorage不同的是，sessionStorage将一部分数据在当前会话中保存下来，页面刷新
依然存在，关闭后数据清空。localStorage不清空，没有过期时间，除非手动删除
补充：cookie和session的区别：
1）cookie放在浏览器，session放在客户端。
2）cookie是很不安全的，可以分析存放在本地的cookie并进行欺诈。考虑安全性的问题时，应当使用session。
3）session 会在一定时间保存在服务器上，当访问量增多时，会占用服务器性能，考虑减轻服务器性能时，应当使用
coolie。
4）单个cookie保存的数据不超过4k，浏览器一般限制保存最多20个cookie。
10.减少页面加载时间的方法
1）压缩css、js文件
2）合并js、css文件，减少http请求
3）外部js、css文件放在最底下
4）减少dom操作，尽可能用变量代替不必要的dom操作
5）路由懒加载
11.css优化、提高性能的方法：
1）加载性能
2）选择器性能
3）渲染性能
4）可维护性
12. css定义的权重
标签权重为1、class权重为10、id权重为100、style权重为1000
13. position：fixed，在Android下无效怎么处理
使用JS处理判断当前设备是否是Android，如果是则添加监听当前页面滚动情况，设置position：absolute，
不断改变top值
14. Flexbox（弹性盒子）的适用场景
1）注意:主要应用场景为移动端布局。
2）flexbox的布局是一个用于页面布局的全新css3模块功能。
3）它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。
较为复杂的布局可以通过嵌套一个伸缩器（flex ，container）来辅助实现。
4）flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，flexbox可以
让元素在容器中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。
15. ::before和:after中双冒号和单冒号有什么区别
1）先解释一下这两个伪元素，本质上并不支持伪元素的双冒号（::）写法，而是忽略掉了其中的一个冒号，仍以单引号来解释，所以等同变相支持了::before 2）在before元素前面，after元素的后面插入内容（经典场景使用font-face小图标结合content:" "）
16. 说一下html5的离线储存
1）主要问的是localStorage和sessionStorage 2）localStorage长期储存在数据，浏览器关闭后数据不会丢失。 3）sessionStorage数据在浏览器关闭后自动删除。