CSS 2020

CSS三大知识点

• 盒子模型
• 浮动
• 定位

标签显示模式

• 块级元素 block-level 常见元素（div ） 宽度 默认100% 高度为0

  • 独自占一行
  • 宽度，高度、外边距以及内边距都可以控制
  • 宽度默认100%
  • 是一个容器盒子，里面可以放行内元素或者块元素

• 行内元素 inline-level 常用（span）

  • 一行可以显示多个
  • 高宽设置无效
  • 行内元素只能容纳行内元素或文本
  • 默认宽度就是它本身内容的宽度

• 行内块元素 inline-block (input img)

  • 中间有白色缝隙

  • 和相邻元素放置一行，一行可以显示多个

  • 默认宽度就是本身内容的宽度

  • 宽度，高度、外边距以及内边距都可以控制

标签显示模式转换 display

• 块转行内 display:inline
• 行内转块 display:block
• 块 行内转行内块 display:inline-block

CSS布局方式

• 普通流

  // 就是默认布局 块级元素自上而下，行内元素自左到右
  display:block;
  display:inline
  

浮动

• 脱离标准流 / 浮动在标准流的上方 / 不占用标准流的位置

• 移动到指定位置

• 让多个盒子水平排成一行

• 实现盒子左右对齐

• 实现文字围绕图片效果

// 特 浮动特性：默认相当于行内块 display:inline-block 
// 多个浮动元素的话 自左向右 一次排开 一行显示不下 就另起一行显示
float:left/right

// 使用时 建议使用父布局包裹 父布局处于标准流
* {
    margin:0,
    padding:0
}

浮动元素与父盒子的关系

• 子盒子的浮动参照父盒子对齐
• 不会与盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系

• 浮动只会影响后面的盒子，不会影响钱前边的盒子
• 如果一个盒子里面，有一个盒子浮动了，建议其他盒子全浮动

清除浮动本质

• 父级没高度 && 子盒子浮动 && 影响下面布局 就需要清除浮动了

• 清除浮动主要为了解决父级元素因为子级元素浮动引起的高度为0的问题，清除浮动后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

• 子元素浮动后，不属于标准流，所以父元素的高度为0

1. 选择器 { clear:属性值} clear 清除 / left / right / both 
2. 父级增加 overflow 为 hidden | auto | scroll 都可以实现

CSS属性书写顺序

样式书写顺序

• 布局定位属性 display position float
• 自身属性 width margin padding border
• 文本属性 color font text-align
• 其他属性 content cursor border-radius

定位

将盒子定位，标准流在最底层，浮动的盒子在中间层，定位的盒子在最上层

• 定位 = 定位模式(static relative absolute fixed) + 边偏移（top bottom left right）

static 静态定位

• 静态定位是元素的默认定位方式 从来不用 标准流就是
• 标准流的子盒子总是以父盒子为准

relative 相对定位

• 相对于原来在标准流的位置 进行移动
• 原来在标准流的区域继续占有，后面的盒子依然以标准流的方式对待它

absolute 绝对定位

• 绝对位置是元素以带有定位的父级元素来移动位置
• 如果父级有定位，那么以父级为准进行定位，一级一级往上找
• 如果父级没有定位，那么以浏览器为准进行定位
• 不保留原来的位置（标准流的位置）
• 子级使用绝对定位 父级使用相对定位 日常固定搭配

flxed 固定定位

• 完全脱标 完全不占位置

定位改变display属性

• 使用dispaly:inline-block 转换为行内块
• 使用浮动float默认转为行内块
• 绝对定位和固定定位也和浮动类似，可以转为行内块儿

垂直外边距

• 浮动元素、绝对定位的元素 都不会触发外边距问题

  定位模式	是否脱标	移动位置基准	模式转换（行内块）	使用情况
  相对定位relative	不脱标，占位位置	相对自身位置移动	不能	基本单独使用
  绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素配合使用
  固定定位fixed	完全脱标	相对于浏览器的移动位置	能	单独使用，不需要父级

  注意

  • 边偏移需要和定位模式配合使用
  • top和bottom不要同时使用
  • left和right不要同时使用

CSS高级技巧

元素的显示和隐藏

• display:none 隐藏元素 不占有位置

• display:blocl 显示元素

• visibility: hiddin 隐藏 依然占有位置

• visibility: visible 显示元素

• overflow 溢出

  • visible 显示
  • hidden 溢出隐藏（超出部分隐藏）
  • scroll 不管超出内容与否 总会显示滚动条
  • auto 超出自动显示滚动条，不超出不显示滚动条