超级实用整理笔记，前端三种颜色的表示方式、盒子模型（块级、行内、行内块）、选择器、字体属性。

1.css基本语法

1.1HTML和CSS的关系
css是作用在html元素上的。
1.2HTML之间的关系
子元素，后代元素，父元素，祖先元素，兄弟元素
1.3CSS在HTML的三种使用方式

1. 行内式<p style="css代码"></p>
2. 内嵌式style标签一般放在head标签里，原则上，style放在任何位置都可以生效 <style>css代码</style>
3. 外链式单独定义一个独立的css文件，css代码写在独立的css文件中

<link rel="stylesheet" href="css文件地址">

1.4css基本语法结构

1.4.1内嵌式和外链式的语法选择器{属性名：值；}
选择器：用来选择元素。
声明块：大括号括起来的就是生命块
声明：声明块内部由一条一条的声明组成。
1.4.2
行内式语法

<p style="属性名：值；"></p>

1.5css的基本长度单位
px像素
em 默认字体大小的倍数
百分比：
设置字体大小，参照默认字体大小的百分比
设置元素大小，参照父元素的大小
1.7css三种基本的颜色表示方式
1.7.1colorName方式

background-color:red;

常见颜色：
red,orange,yellow,green,cyan,blue,purple,white,black,pink,skyblue,deeppink
1.7.2rgb方式
计算机三原色 ：red,green,blue

<!--用0~255之间的数字表示每个颜色-->
background-color:rgb(123,255,12);
<!--使用百分比表示每个颜色，0%~100%-->
background-color:rgb(100%,50%,0%)

1.7.3十六进制方式

使用6个十六进制的数字，每两个是一组，原理同rgb一样
background-color:#rrggbb;
如果三组数，组内两个数是相同的，可以简写
#f90相当于ff9900
#ccc=#cccccc
#000黑色
#fff白色

注意：
三原色的数值都是一样的，表示为灰色；
数值越大，灰色越浅，如果数值都是最大，表示白色；
数值越小，灰色越深，如果数值都是0，表示黑色。

2.CSS基本选择器

2.1基本选择器
2.1.1标签名选择器

标签名{}
id名选择器
#id名{}
注意：元素的id值是唯一的。
类名选择器
.类名{}
注意元素的类名可以相同，一个元素可以有多个类名。
全局选择器
*{}
能选择到包括html和body在内所有的元素，
head以及hidden内部的元素选择器选不到

2.2选择器的层叠性
所有可以选择到一个元素的选择所设置的样式都会作用在这个元素上
2.3基本选择器的优先级
选择器优先级：
id名选择器>类名选择器>标签名选择器>全局选择器
如果优先级相同，后面覆盖前面的
行内优先级高于所有选择器（降维打击）

3.盒子模型

任何一个元素都会被当做一个盒子
3.1盒子模型的显式模式
3.1.1块级元素

某个元素的显式模式如果是块级的，该元素称之为块级元素
块级元素能够独占一行。
块级元素默认宽度取父元素，默认高度被内容撑开（没内容就没有高度）
可以对块级元素设置宽高

3.1.2行内元素

某个元素的显式模式如果是行内的，该元素称之为行内元素
行内元素不会独占一行
行内元素的宽高都是被内容撑开，没有内容就没有宽高
无法为行内元素设置宽高

3.1.3行内块元素

某个元素的显式模式如果是inline-block的，该元素称之为行内块
行内块元素同行内元素一样不会独占一行
行内块元素的宽高同行内元素一样被内容撑开（没有内容就没有宽高）
可以为行内块元素设置宽高

注意：
原来的css中，区分行内元素和块元素的唯一标准是：能否独占一行
如果按照这个标准，行内块元素也算行内元素！
3.2元素默认显示模式
3.2.1块级元素

格式排版标签：div h1-h6 p hr br,pre
表格：table thead tbody tfoot caption tr
表单：form

3.2.2行内元素

文本标签：em  strong  sub sup del ins 
无意义：span
超链接 ：a

3.2.3行内块元素

图片：img
表格：th td 
表单：input textarea select button

3.3修改元素显示模式

display:
inline(行内)
block(块)
inline-block(行内块)

4.常用属性

4.1字体属性
font-family字体族科

常见的字体：宋体，黑体，楷体，Microsoft YaHei,兰亭黑，思源。
衬线字体(serif):横竖笔画不等，宋体，楷体，仿宋
非衬线字体(sans-serif):横竖笔画等宽，微软雅黑，黑体，兰亭黑，思源黑体

font-family: 'Microsoft YaHei';
font-family: 'Microsoft YaHei','黑色',sans-serif;

font-size字体大小

font-size：16px；

默认字体是16px
chrome浏览器字体大小最小的是12px,如果小于12，就按照12显示。
font-style字体风格，用于设置斜体

font-style:normal;默认值
font-style:italic;斜体，自带斜体
fon-style：oblique;强制变为斜体

font-weight字体加粗

font-weight:normal;默认值
font-weight:bold;粗体
font-weight:lighter;细字
也可以指定为数字
100-300：细体
400,500.正常
600-900，粗体

font-variant:字体变形
font字体复合属性，同时设置多个子属性的值，多个值用空格隔开

至少设置 字体大小和字体族科，顺序固定
font:20px 'Microsoft YaHei',sans-serif;
字体大小和字体族科必须是最后两个
前面的weight，style，variant没有顺序要求
font:bold 20px '兰亭黑',sans-serif;