CSS学习笔记
旨在将项目中常用的css概念、属性记录下来。
css简介
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css
目前css最新的版本是css3，css3提供了例如翻转、过度、渐变等效果。
盒模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒模型设置属性是box-sizing，有两个值 content-box border-box
在标准盒模型中，设置的宽度和高度指的就是元素中内容的宽高，对应的是content-box
在IE早期浏览器中，盒子的宽高是包含了padding和border，对应的是border-box
我们在设置padding或border时，为了不影响盒子之前的宽高，有时会设置盒子为border-box
css选择器
选择器是css的基础，利用选择器可以使css样式作用于被选中的元素。
选择器的优先级如下
!import > style > id > class > 元素
在css中!import的优先级最高，一般用在例如要修改element-ui或者其他ui框架时，强制生效自己修改的样式。
常用属性
背景
background-color背景颜色background-image设置背景图片background-repeat设置背景图像是否及如何重复background-size背景图像的大小background-position设置背景图像的起始位置
字体
font-size字体大小font-weight字体粗细color字体颜色
border
border属性是以下三个属性的简写，顺序如下
border-width边框宽度border-style边框样式 dotted solid double dashedborder-color边框颜色
内边距、外边距
内边距padding在标准盒模型下可以增加元素盒子内部的宽度或者高度，是以下四个属性的简写，顺序如下。
padding-top上边距padding-right右边距padding-bottom下边距padding-left左边距
外边距margin指的是盒子和其他盒子之间的距离。是以下四个属性的简写，顺序如下
margin-top上边距margin-right右边距margin-bottom下边距margin-left左边距
flex布局
Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
