专栏首页前端客栈CSS基础知识点整理

CSS基础知识点整理

忙忙碌碌的,没空整理。最近遇到些CSS相关问题,之前只是印象中要这么用,不知道之所以然,今天就大概的整理下(会比较零散)。

盒子模型

W3C标准/IE盒子模型

标准盒子模型:宽度=内容宽度(content)+ border + padding + margin IE盒子模型:宽度=内容宽度(content + border + padding)+ margin

box-sizing

用来控制元素的盒子模型的解析模式。默认为content-box content-box: W3C标准盒子模型,设置元素的width/height属性是指content部分的宽/高。 border-box: IE传统盒子模型,设置元素的width/height属性是指(content + border + paddubg)部分的宽/高

块级/行内元素及其区别

常用块级元素

div/table/h1-h6/p/form/ol等,以及html5新增的section/canvas/audio/video等等。 块级元素:

  1. 会另起一行
  2. 可以设置widthmarginborderpaddingwidth属性
  3. 默认宽度是容器的100%

行内元素

a/input/textarea/button/label/select等等 行内元素:

  1. 和其他元素在同一行
  2. 宽度/高度是内容的宽度/高度
  3. 可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
  4. border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

BFC(块级格式化上下文: block formatting context)

BFC规定了内部的Block Box如何布局.。可参考理解CSS的BFC 特征:

  1. 内部的Box会在垂直方向上一个接一个放置
  2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box 的左边,与包含块border box的左边相接触
  4. BFC的区域不会与float box重叠
  5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
  6. 计算BFC的高度时,浮动元素也会参与计算

触发BFC条件:

  1. float的值不为none
  2. position的值不为static或者relative
  3. display的值为inline-blocktable-celltable-captioninline-flex或者flex其中之一
  4. overflow的值不为visiabl

::before和:before中双冒号和单冒号区别

  1. 单冒号:用于CSS3中的伪类,双冒号::用于CSS3中的伪元素
  2. ::brfore就是一个子元素的存在,定义在元素主体内容之前的一个伪元素,并不存在于DOM中。

:before:after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after

常见兼容性问题

  • 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
    div {
        background-color: #ffffff; /* 所有识别 */
        background-color: #fbfbfb; /* IE6、7、8识别 */
        +background-color: #fcfcfc; /* IE7识别 */
        _background-color: #fdfdfd; /* IE6识别 */
    }
  • Chrome支持小于12px 的文字
    p { font-size: 10px; -webkit-transform: scale(0.8); } //0.8是缩放比例
  • position: flxed在android下无效
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

未完待续~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java虚拟机--运行时数据区与内存溢出

    存放的数据是JVM加载的类信息,常量,静态变量和编译器编译后的代码等,这里要注意的是JDK1.8之后已经将这个方法区删除了,使用元空间,metaspace代...

    王小明_HIT
  • flask 项目中蓝本的使用(flask 43)

    from flask import Blueprint admin_bp=Blueprint('admin',name)

    用户5760343
  • C/C++创建多级目录

    C运行时库提供的创建目录的函数_mkdir(),在上级目录不存在时会创建失败。所以自己实现了一下创建多级目录,无论上级目录是否存在。

    charlee44
  • JVM类加载机制和双亲委派模型

    虚拟机类加载机制:虚拟机把描述类的数据从class文件加载到内存,并对数据进行校验、转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型。

    用户3467126
  • 这是最全的水平垂直居中的处理方式

    前端老鸟
  • flask 模板获取静态文件(flask 17)

    {% macro static_file(type, filename_or_url, local=True) %} {% if local -%} {% ...

    用户5760343
  • C++一种高精度计时器

    在windows下可以通过QueryPerformanceFrequency()和QueryPerformanceCounter()等系列函数来实现计时器的功能...

    charlee44
  • 基础知识 | 每日一练(77)

    小林:在 PC 兼容的分段结构下, 很难透明地分配超过 640K 的内存, 尤其是在 MS-DOS 下。

    闫小林
  • 基础知识 | 每日一练(79)

    士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

    闫小林
  • Effective Java--第1条静态工厂方法代替构造方法

    静态工厂方法代替构造器去创建对象, 在可读性,不重复new对象,和灵活性,代码更简洁4方面有优势。

    王小明_HIT

扫码关注云+社区

领取腾讯云代金券