css 常用知识点全在这里了。哪位大侠还能补充?

努力学习与总结是对自己能力的提升,也希望能帮助到同学们。

BFC

块状格式化上下文(block formatting context)简称 BFC:是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

如何触发BFC?

  1. 根元素(html): 最大的BFC
  2. position 设置为 fixed 或者 absolute
  3. display 设置为 inline-blocktable-blocktable-caption
  4. overflow 的值不为 visible
  5. float 的值不为 none
  6. MDN 格式化上下文

BFC的定位方案

  1. 内部的box会在 垂直方向上 一个接一个的摆放
  2. 属于同一个BFC中的两个相邻元素的 垂直方向上 margin 会重叠
  3. BFC中每个元素的左边margin会与包含块的左边border相接触
  4. 计算BFC的高度时,浮动元素也会参与计算

选择器权重

Css选择器优先级

  1. !important -> 最高
  2. 内联style -> 1000
  3. id -> 100
  4. class -> 10
  5. tag -> 1
  6. 继承样式

margin 属性

  1. margin 属性为给定元素设置所有四个(上下左右)方向的外边距属性。
  2. 普通元素的 百分比margin 都是相对于容器的宽度计算的
  3. 绝对定位元素的 百分比margin 相对于其定位祖先元素的宽度计算的
  4. 上下margin会重叠:只会发生在 block 元素上,(取最大值)

    1. 解决重叠方法:
    2. 父元素设置 BFC(如overflow:hidden;如position:absolute等)
    3. 父元素设置 border/padding
  5. 当 margin 的值为 auto 时。浏览器会自动选择一个合适的margin来应用(自动分配剩余空间)

    1. 需要元素是 块状元素
    2. 需要元素 设置宽度
  6. margin 可以为 负值

水平居中 简单版

  1. 内联元素
    text-align: center;
  1. 固定宽度的 块状元素
    // 设置 左右 margin 为 auto
    margin: 0 auto;

垂直居中 简单版

  1. 单行文本 垂直居中 -> line-height
  2. 多行文本 垂直居中
    // vertical-align 只对行内元素、表格单元格元素生效
    // 指定 行内元素/表格单元元素 基线相对于 块状元素基线的位置

    .center-table {
        display: table;
    }
    .center-table p {
        display: table-cell;
        vertical-align: middle;
    }

元素居中(水平且垂直) 进阶

  1. 固定宽高 居中

通过 绝对定位 + 负margin

    #main{
        position: relative;
        // ... 略
    }
    #center{
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin: -50px;
    }

通过 绝对定位 + margin: auto;

    #main{
        position: relative;
        // ... 略
    }
    #center{
        width: 100px;
        height: 100px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }
  1. 不定宽高

transform 居中

    #main{
        position: relative;
        // ... 略
    }
    #center{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

flex 居中(一)

    #main{
        display: flex; 
        justify-content: center; 
        align-items: center;
    }

flex 居中(二)

    #main{
        display: flex;
        // ... 略
    }
    #center{
        margin: auto;
    }

浏览器如何解析 css

  1. css 的解析是从上往下
  2. 渲染顺序也是从上往下
  3. 下载和渲染是同时进行的。
  4. css的解析和js的解析是不能同时进行的
  5. css选择器 的解析是从右向左解析

    1. (jQuery选择器解析方式同理)
    2. 能先确定元素位置,减少匹配次数

CSS属性支持判断

  1. 利用属性覆盖原理

将高版本浏览器支持的特性写在后面。利用浏览器的2个CSS解析特性:

  • 后面的属性覆盖前面的属性
  • 遇到不认识的语法,CSS parser 不解析。
    div {
        background: red;
        background: linear-gradient(90deg, red, yellow)
    }
  1. 使用 .css@supports 来判断属性支持情况
    // 支持特定属性的处理
    @supports (position:sticky) {
        div {
            position:sticky;
        }
    }
    
    // 不支持特定属性:用not处理
    @supports not (background: linear-gradient(90deg, red, yellow)) {
        div {
            background: red;
        }
    }

    // 如果是多个css属性:用and处理
    @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
        p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
  1. 使用 JS 判断 CSS 属性支持情况

作为 @supports 的另一种形式出现的,我们可以使用 javascript 的方式来获得 CSS 属性的支持情况。

CSS.supports('display', 'flex'); 必须2个参数, 否则返回false,(目前不支持IE浏览器)

  1. 使用 JS 库 modernizr

如果浏览器不支持@supports,可以通过调用ele.style来判断属性支持情况(库:Modernizr

  1. 通过判断 赋值再查询 来判断是否支持
    var root = document.documentElement; //HTML
 
    for(var key in root.style) {
        console.log(key);
    }

    // 将会打印
    // alignContent
    // alignItems
    // alignSelf
    // alignmentBaseline
    // all
    // animation
    // ...

元素可能有 background 属性,但是不支持具体的 linear-gradinet() 属性值。这个时候该如何检测呢?只需要将具体的值赋值给某一元素,再查询这个属性值能否被读取。

    var root = document.documentElement;
 
    root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';
    
    if(root.style.backgroundImage) {
    // 支持
    } else {
    // 不支持
    }

简单的 CSS 属性支持封装

通过页面隐藏的元素进行测试。

    /**
    * 用于简单的 CSS 特性检测
    * @param [String] property 需要检测的 CSS 属性名
    * @param [String] value 样式的具体属性值
    * @return [Boolean] 是否通过检查
    */
    function cssTest(property, value) {
        // CSS && CSS.supports
        // CSS.supports('display', 'flex');  必须2个参数, 否则返回false
        
        // 用于测试的元素,隐藏在页面上
        var ele = document.getElementById('test-display-none');
    
        // 只有一个参数的情况
        if(arguments.length === 1) {
            if(property in ele.style) {
                return true;
            }
        // 两个参数的情况
        }else if(arguments.length === 2){
            ele.style[property] = value;
    
            if(ele.style[property]) {
                return true;
            }
        }
    
        return false;
    }

position定位 细节

position: absolute;

  • 相对于 非static的先辈元素定位
  • 如果先辈元素全是static,那么相对于视口定位

position:fixed

  • 相对于视口定位
  • 如果先辈元素有非nonetransform属性,那么相对于该先辈元素定位

    • (不注意容易产生BUG)

visibility:hidden、display:none、z-index=-1、opacity:0

清除浮动

浮动元素脱离了文档流,不能撑开元素。需要清除浮动。

清除浮动的方法

  1. 伪元素 + clear: both;
    // 全浏览器通用的clearfix方案
    // 引入了zoom以支持IE6/7
    .clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

    // 全浏览器通用的clearfix方案【推荐】
    // 引入了zoom以支持IE6/7
    // 同时加入:before以解决现代浏览器上边距折叠的问题
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
  1. 给父元素设置 overflow: hidden;
  2. 空白元素 + clear: both; (和伪元素实现原理一样,不过 low 很多)

rem em px vw

  • px:(pixel 像素的缩写),相对于显示器屏幕分辨率
  • em:相对于父元素的 font-size
  • rem:可想成 root-em,相对于 root(html)的 font-size
  • vw:相对视口(viewport)的宽度而定的,长度等于视口宽度的 1/100

伪类和伪元素的作用和区别

伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类(:first-child :link :visitive :hover :focus :lang)

伪元素:伪元素控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,不存在于文档中,所以叫伪元素(:first-line :first-letter :befoe :after)


欢迎关注公众号「前端进阶课」认真学前端,一起进阶。

Image placeholder
smallflowers
未设置
  55人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Vuex的一些常用知识点介绍

一、为什么要使用Vuex1、多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。2、需要全局保存的数据,例如用户、权限信息,全局系统设置二、Vuex的五个核心属性1、state:

云原生时代,分布式系统设计必备知识图谱(内含22个知识点)

作者|杨泽强(竹涧)阿里云技术专家我们身处于一个充斥着分布式系统解决方案的计算机时代,无论是支付宝、微信这样顶级流量产品、还是区块链、IOT等热门概念、抑或如火如荼的容器生态技术如Kubernetes

可能是全网最好的MySQL重要知识点

什么是MySQL?MySQL是一种关系型数据库,在Java企业级开发中非常常用,因为MySQL是开源免费的,并且方便扩展。阿里巴巴数据库系统也大量用到了MySQL,因此它的稳定性是有保障的。MySQL

面试题总结:可能是全网最好的MySQL重要知识点

作者:Snailclimb 整理编辑:SegmentFault本文原载于SegmentFault专栏JavaGuide,如侵删。标题有点标题党的意思,但希望你在看了文章之后不会有这个想法——这篇文章是

这 20 多个高并发编程必备的知识点,你都会吗?

转载自并发编程网–ifeve.comhttp://ifeve.com/%e9%ab%98%e5... 一、前言借用Java并发编程实践中的话”编写正确的程序并不容易,而编写正常的并发程序就更难了”,相

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

机器扭碎,强力消磁还能恢复!数据中心年年升级,废弃“云垃圾”让谷歌头大

大数据文摘出品作者:蔡婕、林安安、曹培信今年7月1日,《上海市生活垃圾管理条例》正式实施,它被称为“史上最严垃圾分类措施”。条例一出,这4种颜色的桶,就彻底改变了上海人民的生活。但是一种新型的垃圾——

母延年:希望以后提到Lucene除了ES还能想到录信

在搜索领域你可能没有听过“录信”,但是一定听过Lucene。录信数软CTO母延年“‘录信’是‘Lucene’的谐音,我的Lucene发音不太准。”在刚刚过去的SACC2019大会上,录信数软CTO母延

四面受敌!ARM暂停与华为合作,芯片备胎计划还能执行么?

大数据文摘出品作者:周素云、蒋宝尚一波未平,一波又起,华为四面受敌。继谷歌限制华为的安卓服务后,当地时间5月22日,BBC报道英国芯片设计商ARM刚刚宣布暂停与华为合作!根据BBC获得的内部文件,AR

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

一些JavaScript 类(class)中需要了解的知识

JavaScript使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在JavaScript中不存在,原型继承仅处理对象。原型继承可以模拟

多场景数据库如何选型?五位大咖这样说!

2019年5月9日,第十届中国数据库技术大会(DTCC2019)作为国内顶级的数据领域技术盛会,在第二天主会场上迎来了五位大咖,他们分别从开源数据库、数据仓库架构、数据库一体机、电商数据库架构、Ora

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

干货:计算机网络知识总结

一计算机概述 (1),基本术语 结点(node): 网络中的结点可以是计算机,集线器,交换机或路由器等。 链路(link): 从一个结点到另一个结点的一段物理线路。中间没有任何其他交点。 主机

IOS APP开发需要学什么知识和技能?

IOSAPP开发需求学什么学问和技艺?目前IOS系统的APP和Android系统的APP,是手机APP开发的两大主流。就拿IOS系统的APP开发来说,需求和安卓完整不同的开发言语和工具。本文着重来讨论

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

网易裁员事件,我给大家挖了这些法律知识,建议收藏!

网易裁员事件搞得沸沸扬扬的,这两天网易也对事件进行了回复,基本上可以确认事情属实,不了解事件经过的朋友可先看这篇文章:《有态度的网易(暴力裁员),难道这就是网易的“态度”?》。从这个事件中其实也暴露了

看《长安十二时辰》可以了解哪些算法知识

最近,小吴在追一部古装剧—-《长安十二时辰》。故事讲得是在上元节前夕,长安城混入可疑人员,身陷囹圄的张小敬临危受命,与少年天才李必携手在十二时辰内破除隐患。该剧的一大亮点就在于 时间很紧迫,需要在二十

亚马逊将公布超过最大会话和知识数据集,超400万字

4月1日,亚马逊宣布:他们计划向公众公开“TopicalChat”数据集,超410万单词21万句子的语料库将于2019年9月17日发布。该数据集是为参加AlexaPrizeSocialbotGrand

史上规模最大的中文知识图谱以及估值两个亿的 AI 核心代码

——大声告诉我,怎样才能可以让你变得更强?——充钱——???——都什么玩意?还有啥子咧?——充更多钱执迷不悟,无可救药了。所以,正确答案应该是什么呢?答:是知识。反正,说这些就是为了切入「知识」这个话

你需要的前端知识收集好了,请查收!

github地址记录学习成长收获的知识,不断进步,Front-end-go-on目前包含的模块有 HTML基础 CSS基础 JS基础 数据结构基础 Http基础 JS代码练习 算法代码练习 CSS代码

《零知识证明在区块链上的应用》

2019年11月26日,同济创业谷与PPIOCodeTalks联合举办了《创新X-区块链与创新创业》区块链技术分享会。在本次分享会中,我们有幸邀请到了四位重量级嘉宾来做主题分享。在本期文章中,我们先向