前端css——小总结

最新推荐文章于 2024-08-31 14:41:23 发布

十二er

最新推荐文章于 2024-08-31 14:41:23 发布

阅读量432

点赞数 1

css

1.css常用布局

为盒模型div+css、其中需要注意的IE的怪异盒模型，通常用box-sizing解决。传统盒模型布局方式中我们可以细分为文档流布局、浮动布局、定位布局。在ie10+中我们可以使用flex布局，最为核心的容器和轴的概念。二维布局中，我们可以使用Grid布局。对于三栏布局，除了浮动实现方式，还有双飞翼布局和圣杯布局（上一篇文章双飞翼布局和圣杯布局有说明）。其实双飞翼布局就是对圣杯布局的bug修复，一种改造升级

2.了解BFC么？

BFC（block formatting context）即为块级格式化上下文。

BFC的作用与特点：

不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖。

如何产生BFC，当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell, table-caption, inline-block中的任何一个
d、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

3.居中方面问题

a.利用text-align：center实现水平居中：

left：居左对齐 
right：右对齐 
center：居中 
start：如果方向是左向右（ltf）的话=left end：同上 
justify：两端对齐，最后一行无效 
justify-all：强制最后一行两端对齐 
match-parent：和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或者right。

b.flex布局的justify-content:center

c.margin:auto这个属性的意思是，父元素-子元素/2的外边距。所以如果给定了父子宽高的话话，会很容易居中。

d.position:absolute

  <style>
        .father {
            height: 100px;
            background-color: #ccc;
            position: relative;
            
        }
        .son {
            height: 50px;
            width: 50px;
            background-color: blue;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute;
                    
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

e.vertical-align和line-height

.father {
    height: 100px;
    border: 1px solid #ccc;
    line-height: 100px;
}

.father {
    height: 100px;
    border: 1px solid #ccc;
}

.father span{
    vertical-align: middle;
    background-color: red;
}

f.flexbox

.father {
    height: 100px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
}

4.session、cookie、sessionStorage、localStorage区别

cookie 作为存储在本地的浏览器，容器大小限制在4KB，对于绝大部分开发者来说真的指望不上什么

session 作为存储在服务器，存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源，但是现在服务器已经发展至今，一些session信息还是绰绰有余的

sessionStorage 针对一个session的数据存储（内存方式存储）

localStorage 没有时间限制的数据存储（持久化本地），不会因为你打开新的网站，刷新页面，乃至关闭您的浏览器而消失（移动端开发不可缺少的）

怎样检测浏览器是否支持本地存储？

在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。只要window.localStorage返回值为true，则浏览器支持本地存储。代码如下：

window.onload = function() {
    if(window.localStorage) {
        alert('支持');
    } else {
        alert('不支持');
    }
}

localStore的API

length	唯一的属性，只读，用来获取storage内的键值对数量
key	根据index获取storage的键名
getItem	根据key获取storage内的对应value
setItem	为storage内添加键值对
removeItem	根据键名，删除键值对
clear	清空storage对象

window.onload = function() {
    //1、获取本地存储对象
    var ls = window.localStorage;
    //2、往本地存储中存储数据
    ls.setItem("name", "TV");
    //3、获取本地存储的数据个数
    console.log(ls.length);
    //4、获取本地存储中健对应的值
    console.log(ls.getItem("name"));
    //5、遍历本地存储中健值对
    for(var i = 0; i < ls.length; i++) {
        alert("key:" + ls.key(i) + "   value:" + ls.getItem(ls.key(i)));
    }
    //6、清除本地存储中所有的数据
    ls.clear();
    //7、清除本地存储中指定的数据
    ls.removeItem("counts");
}

存储json数据

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用JSON来处理，可以直接调用JSON.stringify()将其转为字符串，读取出来后调用JSON.parse()将字符串转为json格式。

/**
 * 定义json对象
 */
var stu1 = {
    'name': 'dream',
    'age': 32,
    'password': '123456'
};
/**
 * 把json对象转换成字符串进行存储
 * JSON.stringify() json转换字符串
 */
localStorage.setItem("stu1", JSON.stringify(stu1));
// 存放到sessionStorage中
sessionStorage.setItem("stu1", JSON.stringify(stu1));
/**
 * 读取JSON数据
 * 先把字符串转换成json 在进行取值
 */
var stu = JSON.parse(localStorage.getItem("stu1"));
console.log(stu.name);
// 从session中读取
var stuSession = JSON.parse(sessionStorage.getItem("stu1"));
console.log(stuSession.name);

5.px/em/rem的区别

px 顾名思义就是我们通常说的像素大小；

em和rem都是相对大小，不过em是继承父级元素的字体大小，rem是相对于根元素的大小，这个单位可谓是集相对大小和绝对大小为一身。通过它可以做到只修改根元素即可修改所有字体的大小，又可以避免字体大小逐层复合的连锁反应。当rem相对于浏览器进行缩放，1rem默认为16px

6.animation和transition？

animation：name duration timing-function delay iteration-function direction

transition为过渡动画，这个效果可以在事件中触发，并且圆滑的以动画效果改变css的属性值

7.css编写注意事项

比如0后面不带单位，尽量使用简写、使用子选择器、合理使用id等