css的盒子模型及其它

盒子模型

盒子模型的概念

• 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
• 盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成
  • 内容区域：你书写的内容或者子元素能够显示的区域
  • 内边距：撑开内容与边框的距离
  • 边框：元素的边框
  • 外边距：撑开元素和其他元素之间的距离

margin 0 auto居中

• 在正常的布局中，块级元素具有满屏的属性，也就是在水平方向上占满父级的宽度
• 满屏以后，内部元素的内容+内边距+边框+外边距 刚好是等于 父级的 内容区域的大小
• 所以当水平方向上的 宽度 边框 内边距都是固定值的时候，在水平方向上margin设置auto的时候，默认左右平分剩余空间，达到水平居中效果
• 当水平方向出现auto的时候，剩余空间会进行分配，当某一边不要 另外一边出现auto， 剩余空间就会直接给另外一边

垂直方向上的 margin ： auto 0 为什么不行

• 相对于水平方向来说，块元素在垂直方向上并没有满屏的属性，margin默认在上下的值都是0
• 无论是否设置垂直方向的auto，表现出来的都是元素多高就占用多少，并没有剩余空间去平分

margin的父级塌陷

• margin垂直方向叠加，父级塌陷

• 当一个父级中 第一个元素的margin-top会塌陷给父级

• 最后一个元素的margin-bottom会塌陷给父级

  防止父级和其他元素之间的间隙过大，当第一个和最后一个子元素的margn塌陷给父级以后 父级就可以和兄弟元素在垂直方向上进行叠加

• 避免父级塌陷

  1. 给父级设置一个边框 边框的宽度不能为0

     防止影响视觉，可以设置透明（transparent）颜色

  2. 开启BFC（块级格式化上下文）

对行标签：

• margin在垂直方向上不生效
• 水平方向：margin-left：元素右移动，margin-right：如果右边有元素 后边的元素右移动

边框的设置

• border-width:边框宽度
• border-style:边框样式 solid 实现 dashed 虚线 dotted 点线
• border-color：边框颜色
• 合写：border：border-width border-style border-color
• 注意：
  • 边框是在margin里边
  • 背景颜色在边框中显示（实线的时候，我们看不到）
  • 背景图片原点没有从边框开始 而是从padding开始的，但是可能会平铺到边框中

盒子模型概念总结

将一个元素设置盒模型显示

• box-sizing属性：

  content-box:标准盒模型

  border-box:怪异盒模型

• 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间

• 盒子模型由 内容（content）、内边距（padding）、边框（border）、外边距（margin）四个构成

• 盒子模型分为怪异盒子模型和标准盒子模型

• 标准盒子模型的所占用空间的计算方式是 content+padding+border+margin

• 怪异盒子模型所占的的空间计算方式是 content+margin（content内容是包含内容内边距和边框的）

• 使用box-sizing属性可以切换盒子模型的方式

其它

a标签的4个伪类

• 四个伪类

  link：当有链接属性时

  visited:当连接被访问过以后

  hover：当连接被鼠标悬浮的时候

  active:当连接在激活状态的时候

• 位置不能互换

  这4个选择器 优先级是一样的。

  顺序改变就可能后边覆盖前边的

  比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active

• 记忆：爱恨法则 love-hate

• hover适用于多数其他元素，并且伪元素也可以使用

常用伪元素

• 伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。

• 虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等

• after:

  /*在当前元素的最后边插入一个伪元素*/
  .box:after{
          content:"必须有";
          display: block;
          width: 100px;
          height: 100px;
          background-color: pink;
  }
  

  before：

  /*在当前元素的最前边插入一个伪元素*/
  .box:before{
          content:"hahahah";
          display: block;
          width: 100px;
          height: 100px;
          background-color: pink;
          position: absolute;
          left: 300px;
          top: 80px;
  }
  

• 伪元素必须拥有content属性 ，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的

css hack(浏览器兼容)

• 由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器

• 比如：

  after伪元素清浮动，只有ie8及以上支持，所以要针对ie6、7书写一个开启haslayout

  *代表ie6,7 zoom代表开启haslayout 所以可以书写 *zoom：1；

  那么这个代码只有ie 6 7 认识

• 为什么使用css hack

  第一种理解：让我们css 的代码兼容不同的浏览器

  第二种理解：我们可以为不同的浏览器定制不同的样式

• css hack有3种表现方式：

  1、css属性前缀法 2、选择器前缀法 3、IE条件注释法

  空元素和替换元素

  空元素

  • 在html中 ，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素

  • 通常在空元素上使用 闭合标签 是无效的

    <input type="text"></input> ：闭合标签无效

    br、hr、img、input、link、meta、source

  替换元素

  • 浏览器根据元素的标签和属性，来决定元素具体显示的内容
  • img、input、textarea、select、video、iframe是替换元素
  • audio、canvas标签在某些时候也是替换元素

BFC(块级格式化上下文)

它是页面 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 的创建

以下元素会创建 BFC：

• 根元素（html）

• 浮动元素（float 不为 none）

• 绝对固定定位元素（position 为 absolute 或 fixed）

• 表格的标题和单元格（display 为 table-caption，table-cell）

• 匿名表格单元格元素（display 为 table 或 inline-table）

• 行内块元素（display 为 inline-block）

• overflow 的值不为 visible 的元素

  BFC 的范围

• 简单来说，子元素如果又创建了一个新的 BFC，那么它里面的内容就不属于上一个 BFC 了，这体现了 BFC 隔离 的思想

• 也就是所说，一个元素不能同时存在于两个 BFC 中。

BFC 的应用

• 自适应多栏布局

中间栏创建 BFC，左右栏宽度固定后浮动。由于盒子的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC 重叠，所以中间栏的宽度会自适应

• 防止外边距折叠

  创建新的 BFC ，让相邻的块级盒位于不同 BFC 下可以防止外边距折叠

• 清除浮动

  BFC 内部的浮动元素也会参与高度计算，可以清除 BFC 内部的浮动