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 超出自动显示滚动条，不超出不显示滚动条