CSS-语法、文档流、盒模型

coolke
129 阅读5分钟

CSS简介

CSS：层叠样式表，用于设计风格和布局。比如，我们可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

层叠包括：

  • 样式层叠：可以多次对同一选择器选择样式声明。
  • 选择器层叠：可以用不同选择器对同一个元素声明样式。
  • 文件层叠：可以用多个文件层叠。

查询CSS相关样式的兼容性：可以在caniuse.com 上查询CSS样式的在不同浏览器的兼容性。

CSS标准：

  1. 可查询“css spec”查看最新标准；搜索“css2.1 中文版”查看2.1版本的中文版。
  2. 制定者：W3C

CSS语法

语法一：（样式语法）

选择器 {
    属性名:属性值;
}

比如：

demo {
 color: red;
 background:green;
}

注意：

  1. 所有符号都是英语符号，区分大小写；
  2. CSS注释写法：/*注释*/；
  3. 任何地方写错了，浏览器不会报错，会直接忽略；
  4. 需要写分号。

语法二：（at语法）

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

注意：

  1. charst必须放在第一行；
  2. 前两行必须加分号；
  3. charst是字符集；"UTF-8"是字符编码（历史遗留）。

文档流 【Normal Flow】

文档中元素的流动方向（左右流动、上下流动）

流动方向

  • inline元素： 从左到右，到最右边会换行，如果最右边长度不够一个Inline元素，会自动切割为两半，一半在这一行，一半在下一行, 即会跨越两行。
  • Block元素： 是从上到下，每一个都另起一行。
  • inline-block元素： 从左到右，但不会跨越两行。

宽度

  • inline元素： 宽度是内部inline元素宽度的和，不能用width指定。
  • block元素： 默认自动计算宽度 (width: auto) ，并非 (width: 100%) ，即能占多宽就占多宽，可用width指定。
  • inline-block元素： 默认宽度是内部inline元素宽度之和，可以用width指定宽度。

高度

  • inline元素： 高度是由line-height间接 确定 ，和height无关。(大部分情况下，Inline元素和Line-height一样，但如果字体不一样，会有细微的区别，比如差1-2px)。
  • block元素： 高度是由内部文档流元素决定的，可以设height。
  • inline-block元素： 和Block元素一样，可以设height。

注意：

  1. 新的HTML5元素不明确划分“内联元素”和“块级元素”了，如果给一个元素添加display:inline的样式，他就是内联元素；如果给一个元素添加display:block的样式，他就是块级元素；但是如果不添加样式，那么浏览器会给它一个默认样式。
  2. 不要在inline元素内加block元素。
  3. block元素宽度是auto，不是100%，也不要加width: 100%，会引起bug。
  4. 一个空的div的高度是0。
  5. 一个空的span元素的高度不是0，因为span元素的高度是line-height间接决定的。

溢出[overflow]

  • 当内容的高度和宽度大于容器时，内容会溢出
  • 可用overflow来设置是否显示滚动条
    • overflow: hidden: 直接隐藏溢出内容
    • overflow: scroll: 显示滚动条，但如果内容宽度和高度没有溢出，也会有滚动条
    • overflow: auto: 灵活地显示滚动条，只有在需要的时候才会出现滚动条
    • overflow: visible: 直接显示溢出部分，放着不管
  • 如果有滚动条，那么内联元素默认只在第一屏里面出现，后面是留空的。
  • overflow分为overflow-x和overflow-y。

脱离文档流

  • 有些元素可以脱离文档流。
  • 可以脱离文档流的元素：
    • position: absolute
    • position: fixed
    • float
  • block元素的高度是由内部文档流元素决定的，这就意味着，如果元素脱离了文档流，block元素就不会计算它的高度。

盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着

类别

  1. content-box（内容盒）： 内容就是盒子的边界，宽度只是内容的宽度
  2. border-box（边框盒）： 边框才是盒子的边界，宽度包括内容+ padding + border

1659273837995.png

长度单位

  • px：像素
  • em：相对自身font-size的倍数
  • % ：百分数
  • ......

颜色

  • 十六进制：#FF6600 / #F60 / ...
  • RGBA颜色：(R:red G:green B:blue A:透明度)
    • rgb(0,0,0)
    • rgba(0,0,0,0.1)
  • hsl颜色：(自己换一下数值感受一下)
    • hsl(360,100%,100%)

margin合并

块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（也叫外边距合并）。

发生合并的情况

  • 父子margin合并（父元素与其第一个或者最后一个子元素重叠）
  • 兄弟margin合并（相邻子元素重叠）

阻止合并

  • 对于兄弟合并：用display:inline-block
  • 对于父子合并：
    • 给parent加border
    • 给parent加padding
    • 给parent加 overflow:hidden

示例：

  • 链接：
  • “parent”和“孩子1”，“孩子3”是margin合并的；“child”之间也是合并的 1659276449990.png
  • 如果在.parent{ }中加上border:1px solid black;或者padding:1px;会发现父元素和子元素就不再合并了。
  • 如果在.child{ }中加上以下两行代码，那么子元素间也就不再合并了。
width:100%;
display:inline-block;

1659277655163.png

注意：

  • CSS不正交，即调试某个属性，可能引起其他属性变化
  • 写CSS一般第一句写上：
*{
margin:0; padding:0; box-sizing:border-box;
}

「资料来源：饥人谷」
avatar
文章
阅读
粉丝