CSS盒模型

52 阅读1分钟
  • CSS是李爵士的挪威同事Hakon Wium Lie(赖先生)首先提出的

  • 使用最广泛的为CSS2.1,现代版本为CSS3。

  • 使用caniuse.com可以知道哪些浏览器支持哪些特性。

  • 标准制定者:W3C。

CSS语法

语法一

选择器{
    属性名:属性值
    /*注释*/
}

语法二

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
    语法一
    }

使用border调试法调试CSS

  • 怀疑某个元素有问题
  • 加border
  • 观察border结果做出判断

文档流

文档流详细解释

可以脱离文档流的元素

  • float
  • position:absolute/fixed

CSS盒模型

image.png

CSS盒模型分为content boxborder box。区别是,content box的宽度和高度只包含content,border box的宽度和高度包含到border(即,content,padding和border)。

如果没有指定padding和border,那么content box和border box没区别。

盒模型链接

margin合并(仅上下合并,不左右合并)

  • 使用display: inline-block;消除兄弟间合并
  • 两头的孩子会和父母上下合并margin