前端总结--css

1.盒子模型

w3c标准: width: content
ie标准: width: content+padding+border
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 外边距塌陷

当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并,并选取margin大的
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

3.2.1 外边距塌陷情况

    

    blue
    red

3.2.2 外边距塌陷解决

    

    blue
    
        red

3.3 参考

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

4.link与@import

4.1 区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
link引入的样式权重大于@import引入的样式。(@import引入的样式，会被层叠掉了。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠)
4.2参考
https://www.jianshu.com/p/fc1...

5.如何居中一个元素

5.1 水平居中

5.2 垂直居中

5.3 水平垂直居中

5.3.1 已知高度













    
    
    
    Document

5.4 参考

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

6. css继承

6.1什么是css继承

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

不可继承: 其它

所有元素可继承：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

px:像素,px是相对于显示器屏幕分辨率而言的
1920*1024 前者是屏幕宽度总共有1920个像素宽度后者则是高度为1024个像素
8.2 em
em的值并不是固定的；
em会继承父级元素的字体大小。

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

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

8.3 rem

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

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

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(转换)

transform：转换
可以可以对元素进行移动、缩放、转动、拉长或拉伸
2d和3d
13. transition(过渡)
过渡
四个过渡属性
- 规定应用过渡的 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 优劣和适用场景

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

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

16.1为什么会有1px问题

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

物理像素：
移动设备出厂时，不同设备自带的不同像素，也称硬件像素；
逻辑像素：
即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 清除浮动的方法





    
    
    
    Document
    




    
        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