前端总结--css

1.盒子模型

1. w3c标准: width: content
2. ie标准: width: content+padding+border
3. elementUi,bootstrap: box-sizing:border-box;
   

2.选择器优先级

!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

3.BFC

块级格式化上下文（Block Formatting Context，BFC）
块级格式化上下文（Block Formatting Content）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域
简而言之，可以把BFC理解成一个箱子，箱子内部的元素如何摆放都不会影响外部

3.1 触发条件

1. 根元素
1. position: absolute/fixed
2. display: inline-block / table
3. float 元素
4. ovevflow !== visible

3.2 外边距塌陷

1. 当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并,并选取margin大的

2. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

3. 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

3.2.1 外边距塌陷情况

    

    
blue
    
red

3.2.2 外边距塌陷解决

    

    
blue
    

        
red
    

3.3 参考

https://www.cnblogs.com/ianya...

4.link与@import

4.1 区别

1. @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2. 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3. @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4. 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5. link引入的样式权重大于@import引入的样式。(@import引入的样式，会被层叠掉了。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠)

   4.2参考

   https://www.jianshu.com/p/fc1...

5.如何居中一个元素

5.1 水平居中

5.2 垂直居中

5.3 水平垂直居中

5.3.1 已知高度

5.4 参考

https://github.com/ljianshu/B...

6. css继承

6.1什么是css继承

继承就是指子节点默认使用父节点的样式属性。
1.可继承：颜色，文字，字体间距行高对齐方式，和列表的样式可以继承

2. 不可继承: 其它

   所有元素可继承：visibility和cursor。
   内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
   终端块状元素可继承：text-indent和text-align。
   列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

   6.2参考

   https://www.nowcoder.com/ques...

   7.css选择器

   7.1 参考

   8.px,em,rem

   8.1 px

3. px:像素,px是相对于显示器屏幕分辨率而言的

4. 1920*1024 前者是屏幕宽度总共有1920个像素宽度后者则是高度为1024个像素

   8.2 em

5. em的值并不是固定的；
6. em会继承父级元素的字体大小。

7. 任意浏览器的默认字体高都是16px

        .p1 {
            font-size: 1em;
        }
        
        .div {
            font-size: 30px;
        }
        
        .div p {
            font-size: 1em;
        }
    
    
        
   我的父级是body
        
   
            
   我的父级是div
        
    

8.3 rem

1. rem是css3中新增加的单位相对的只是HTML根元素，默认也是16px
2. 通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应；
3. 区别em是根据父元素继承相应大小而不是固定的，rem是继承html根元素的大小
4. 只有改变根元素html的值才能改变rem的值

psd设计图的宽度是750px,如何做移动端的适配?

    
    
    
    
    
    



    

        
i am p
    
    
    

8.4 移动端布局终极解决方案

hotcss

8.5 参考

https://www.jianshu.com/p/a0b...

9. 文字超出显示省略号

9.1 单行

    
    
        
CSS文本溢出显示省略号CSS文本溢出显示省略号
    

9.2 多行

    
    
        
CSS文本溢出显示省略号CSS文本溢出显示省略号CSS文本溢出显示省略号
    

10. CSS创建一个三角形的原理

11 chrome显示小于12px字体

在chrome谷歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px; ie、火狐正常

    
    

        shrink
    

12.transform(转换)

1. transform：转换
2. 可以可以对元素进行移动、缩放、转动、拉长或拉伸

3. 2d和3d

   13. transition(过渡)

4. 过渡

5. 四个过渡属性

   • 规定应用过渡的 CSS 属性的名称
   • 定义过渡效果花费的时间。默认是 0。
   • 规定过渡效果的时间曲线。默认是 "ease"。
   • 规定过渡效果何时开始。默认是 0。

14. animation(动画)

定义一个属性， @keyfframes + 属性

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}
@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

15 opacity: 0、visibility: hidden、display: none 优劣和适用场景

1. display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
2. visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
3. opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）

16 移动端 1px 像素问题及解决办法

16.1为什么会有1px问题

要处理这个问题，必须先补充一个知识点，就是设备的物理像素[设备像素] & 逻辑像素[CSS像素]；

1. 物理像素：
   移动设备出厂时，不同设备自带的不同像素，也称硬件像素；
2. 逻辑像素：
   即css中记录的像素。

在开发中，为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，通常可以用 javascript 中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。当然，比例多少与设备相关。

在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==2，而border-width: 1px;描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

16.2 解决方案

transform: scale(0.5) 很灵活
设置height: 1px，根据媒体查询结合transform缩放为相应尺寸

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

16.3 参考

https://www.jianshu.com/p/31f8907637a6

17 浮动

17.1 float 浮动的原因

使用浮动之后，元素会脱离标准的文档流。

17.2 float 浮动的副作用

两个块级元素，会被浮动元素覆盖

一个块元素，一个行内元素。行内元素如文字会浮动在浮动元素的周围，为浮动元素留出空间

两个块级元素浮动，出现父元素塌缩

17.3 清除浮动的方法

    
    
    
    
    




    

        
Left
        
Right
    
    

        div2
    

前后对比

总结

• 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
• 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
• 缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
• 建议：推荐使用，建议定义公共类，以减少CSS代码

17.4 参考

https://blog.csdn.net/u012832088/article/details/82215539
https://www.cnblogs.com/nxl0908/p/7245460.html

伪元素、伪类