CSS——总结

CSS：层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

• 内联样式(Inline style)
  

• 内部样式表(Internal style sheet)
  

• 外部样式表(External style sheet)
  
  

3、CSS的写法
3.1 类型选择器

3.2 类选择器

3.3 id选择器

3.4 属性选择器

3.5 伪类选择器

4、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

4.1 IE模型

4.2 标准模型

4.3、css如何设置获取这两种模型的宽和高
通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）

5、样式权重
样式权重是指样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

5.1 权重的等级

• !important,加在样式属性值后，权重值为10000
• 内联样式，如：style=“”，权重值为1000
• ID选择器，如：#content，权重值为100
• 类，伪类和属性选择器，如：content、：hover权重值为10
• 标签选择器和伪元素选择器，如：div,p,:before权重值为1
• 通用选择器（ * ) 、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

6、如何使用控制台工具

6.1 选择需要修改的样式，点击鼠标右键=》点击检查

6.2 按 F12 ，自动打开控制台，点击下方第一个箭头图标，去页面上点击你想要查看的元素

6.3 快速得到当前元素的选择器，选中你所要得当前元素==》点击鼠标右键==》点击Copy==》点击Copy selector

7、了解标签：块级标签、行内标签、行内块标签
7.1 块级元素
7.1.1 块级标签的特点：

• 可以直接写宽高；
• 独占一行；
• 默认宽度是父级标签的宽度
• 一般用于作为容器布局 可以嵌套其他块级元素或者行内元素

7.1.2 哪些标签是块级标签？
div、p、h1-h6、ol、ul、li、dl、dt、dd、header、footer、nav、aside、article、section

7.2 行内元素
7.2.1 行内标签的特点：

• 宽高对于行内元素没有作用
• 可以允许其他行内元素排成一排
• 内容有多大就撑多大，如果没有内容，那么没有大小
• 一般用来包裹文字或者做一些小的装饰（行内标签不要嵌套块级标签，a除外）
• 行内标签与display、float、position会擦除火花（行内标签会具有行内块级元素属性）

7.2.2 哪些是行内标签？
span、a、strong、ins、b、del、s、u、i、em

7.3 行内块标签
7.3.1 行内块标签的特点：

• 行内块标签其实本质上是一种特殊的行内标签（text-align和line-height都可以控制行内块元素）
• 允许其他的行内元素排一排
• 可以设置宽高
  7.3.2 哪些是行内块标签？
  img、input

7.4 三种标签属性转换
7.4.1 display的用法

• dispaly:bloak;//行内转块级
• dispaly:inline;//块级转行内
• dispaly:inline-bloak;//块级转行内块

CSS学习参考文档：

• CSS教程：https://www.runoob.com/css/css-tutorial.html
• Web开发技术CSS教程：https://developer.mozilla.org/zh-CN/docs/Web/CSS