9.【CSS】文档流&盒模型

LuChou
194 阅读4分钟

1.本文目录

  • CSS历史
  • CSS是艺术
  • 体系化学习
  • 文档流

2.什么是CSS

给html（或者其他对象）加样式

3.CSS的优势点

3.1.层叠样式表

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

4.查看哪些特性被浏览器支持的方法

caniuse.com

5.为什么color:red可以让字体变红色？

没有为什么，就是这样。

6.体系化学习

6.1.学习一门语言必须学会什么

  • 语法（如何写代码）
  • 如何调试（如何知道自己代码写错了）
  • 在哪里查资料
  • 标准制定者是谁：W3C

6.2.如何学习 Copy-Run-Modify 抄-运行-修改

7.CSS语法

7.1.CSS语法一

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

示例

p{
    color:red;
    /*这里是注释*/
}

7.1.1注意事项

  • 区分大小写
  • 最后的分号可以省略（建议不要省略）

7.2.CSS语法二 @语法

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

7.2.1.注意事项

  • @charset必须放在第一行
  • 前2个at语法必须以英文分号结尾
  • charset是字符集的意思，但UTF-8是字符编码

9.调试方法

border调试法
将代码border:1px solid red加入CSS代码中，如果生成了边框，那么该行代码前的所有代码都是对的，否则是错的

10.文档流

文档中元素流动的方向，inline元素从左到右，block元素从上到下

10.1.几个重要概念

  • 文档流 Normal Flow：元素的流动方向，从左到右，从上到下
  • 块、内联、内联块
  • margin 合并（强记）
  • 两种盒模型（border-box更符合人类思维）
  • span元素是最典型的内联元素
  • 一个div元素占一整行
  • 元素不分内联和块级，可以随意修改，只与样式有关，display:inline;定义该元素为内联元素，disply:block;定义该元素为块级元素

10.2.流动方向

  • inline（内联）元素从左到右，到达行的最右端会换行
  • block（块级）元素从上到下，每一个元素都会另起一行
  • inline-block元素从左到右，但是不会在元素内部换行，也就是说不会把自己分成几部分

10.3.inline元素的宽与高

  • 一个inline元素的宽度=包含的所有内联元素的宽度之和（禁止在inline元素中加入block元素）
  • 无法通过样式来指定宽度
  • inline元素的高度由inline-height间接确定，与height和padding无关

10.4.block元素的宽与高

  • 宽度自适应为最宽（不是100%，不要写width:100%;）
  • 可以通过width来指定宽度
  • 高度由包含的所有文档流元素之和决定

10.5.inline-block元素的宽与高

  • 一个inline-block元素的宽度=包含的所有内联元素的宽度之和
  • 但是，宽度可以被设置
  • 高度由包含的所有文档流元素之和决定，且height可以被设置

10.6.overflow溢出（内容突破容器边界时）

当内容的宽度或者高度大于容器时，会溢出，可用overflow属性来设置是否显示滚动条

  • overflow:auto; 灵活设置，不溢出的话不显示滚动条
  • overflow:scroll; 可以滚动显示超出的部分
  • overflow:hidden; 隐藏溢出部分
  • overflow:visible; 显示溢出部分
  • overflow可分为overflow-x和overflow-y

10.7.脱离文档流 以下属性可以让元素脱离文档流，元素脱离了文档流，该元素所在的容器就不会把该元素计算到总高度中

  • float:left;
  • position:absolute/fixed

11.盒模型

11.1.内容盒模型和边框盒模型的区别：width

  • border box：width指定border外侧的宽度，包含border、padding、content
  • content box：width指定内容的宽度，只包含content
  • margin：外边距
  • padding：内边距
  • border：边框

11.2.如何指定元素的盒模型类型？

box-sizing:border-box; /*border box*/
box-sizing:content-box; /*content box*/

11.3.margin合并(只在高度上合并，宽度不会合并)
两个block元素之间的margin会合并，解决办法：

margin:10px 0;

直接指定margin高度为30px

avatar
文章
阅读
粉丝