前端CSS笔记

你不知道的 CSS 之包含块 一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。 但是一说到 CSS

如何让红色框的部分在导航栏下面的区域处于中心？ calc 是css3用来计算高度的，下面的代表视口垂直高度的100%，然后减去上面的70%，然后设置了父元素的高度，子元素就可以使用flex实现水平垂直

概述 flex布局是目前web开发中使用最多的布局方案 flex布局又叫Flexible 布局，或者弹性布局。目前特别在移动端用的最多，目前PC端也使用越来越多了 两个重要的概念 开启了 flex 布

Grid 布局需要学习和练习 Grid 布局需要学习和练习 Grid 布局需要学习和练习 Grid 布局需要学习和练习 Grid 布局需要学习和练习

定位和浮动是不是都撑不开高度？宽度呢？ 浮动元素是可以通过清除浮动的影响，去撑开浮动父元素的大小。 但是定位已经脱离了常规流，无法撑开父元素。 由于浮动元素和定位元素内部会创建BFC，默认他们的宽度和

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式 important相关： !important写在属性值的后面，分号的前面! !important不能提升继承的优先级，只要是

块级元素： 元素有这些： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...... 行内元素 元素：a、span 、b、u、i、s、strong、in

浮动的特点：会半脱离标准流，也是盒子本来是独占一行的，可能不独占一行。可以想象地上很多盒子，盒子悬空了，后面的盒子可以靠着前面的盒子排了。又为什么说他是半脱流呢，是因为现在的盒子可以占着原来盒子的位置

盒子模型是规定了单个盒子的规则，那如何定义盒子和盒子之间的规则呢？ 视觉格式化模型（布局规则）：页面的多个盒子排列规则 视觉格式化模型，大体将页面中的盒子的排列分为三种方式： 常规流 浮动 定位 常规

###1.CSS 的书写顺序： 定位/浮动/display 盒子模型 文字属性 ###2.CSS 的几种定位 a. 静态定位 这个是默认值, 标准流就是静态定位 下面的情况你改变 position 的

定位 视觉格式化模型： 常规流 浮动 float 定位 position position属性 默认值：static，静态定位（不定位） relative：相对定位 absolute：绝对定位 fix

长度单位 px 像素 em 当与 font-size 属性一起使用时，em 继承其父元素的 font-size 大小： rem 根元素字体大小的倍数，只与根元素字体大小相关 vw    viewpor

css两个网站 1.http://css.doyoe.com 2.https://caniuse.com/ 下面的网站更权威一些，更新速度更新。 更多的选择器 css 提供的选择器是在代码写的很乱的时

@规则 at-rule: @规则、@语句、CSS语句、CSS指令 a. import @import "路径"; 导入另外一个css文件 b. charset @charset "utf-8"; 告诉

透明度 opacity，它设置的是整个元素的透明，它的取值是0 ~ 1 在颜色位置设置alpha通道(rgba ) 用opacity 的问题是设置后，他是将他自己和他里面的子元素都设置进去了。而通过颜

块盒子在常规流中的宽度默认是宽度包含块的宽度的100%，高度随着内容而撑开 在浮动和定位里面，快盒的宽度默认不是100%，默认是auto，即适应内容的宽度，高度也是适应内容的高度。

浮动 视觉格式化模型，大体上可以将页面中盒子的排列方式分为三种方式： 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为： left：左浮动，元素靠左靠上排列 r

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行。 渲染每个元素的前提条件：该元素的所有CSS属性必须有值。 一个元素，从所有属性都没值，到所有的属性都有值，这个计算过程，叫做属性值计算过

继承 子元素会继承父元素的某些CSS属性 通常，跟文字内容相关的属性都能被继承继承 子元素会继承父元素的某些CSS属性 通常，跟文字内容相关的属性都能被继承继承 子元素会继承父元素的某些CSS属性 通

声明冲突：同一个样式，多次应用到同一个元素 层叠：解决声明冲突的过程，浏览器自动处理（权重计算） 1. 比较重要性 重要性从高到底： 1） 作者样式表中的!important样式 2) 作者样式表中的