css基础

css：层叠样式表

css是一门语言，但不是一门编程语言

书写/使用方式：

行内式：
style=“属性：属性值；”

内部样式：

<style>
	选择器：{
		属性：属性值；
	}
</style>

外部样式（2种）：

 <link rel="stylesheet" href="style.css">

属于xmail标签
先加载css完毕后，再继续加载html
密封性更好

@import url("../../.css")

属于css
加载时碰到import，先跳过，等加载完所有的html后，再加载css文件
在某些浏览器会失效
后加载的话，刚开始显示可能会不全，用户体验差

优先级：
行内式>内部样式>外部样式

作用范围区别：
外部样式>内部样式>行内式

注：有多个内部和外部样式的话，写在最后的一个生效，相同的样式覆盖上一个

选择器：

html标签选择器
id
class
伪类
*通配符
后代选择器
群组选择器
子元素选择器
交集选择器
序列选择器
相邻同级选择器
同级选择器

伪类：
书写顺序：link :visited :focus :hover :active（多用于a标签，input等等）

*通配符：
选择所有标签，实际开发中不推荐使用

后代选择器：
写法：选择器+空格+选择器

群组选择器：
写法：选择器+逗号+选择器

子元素选择器：
写法：选择器+大于号+选择器

交集选择器：
写法：选择器+选择器

序列选择器：
：first-child
：last-child

相邻同级选择器：
写法：选择器+加号+选择器
选中该名称（class、id）/种类（html元素 div、p等等） 相邻 的 同级 选择器
注：由于网页加载顺序，只能选中下方的选择器

同级选择器：
写法：选择器+波浪号+选择器
选中该名称（class、id）/种类（html元素 div、p等等） 所有 的 同级 选择器
注：由于网页加载顺序，只能选中下方的选择器

权重：

继承：
子元素沿用父元素的某些样式

布局属性：
指的是一种页面的渲染规则。从上到下，从左到右。

标准文本流：
块级元素
行内元素（内联元素）

常见的微观特性：
空白折叠
高度不齐，底边对齐
文本自动换行

空白折叠：
空格键多个默认为一个空格。
多个<img>代码书写换行，会出现间隔（指的是一个img写完，写下一个img时直接换行书写）
<img>问题解决方法：
<img ></img><img> 连写，img与img之间不换行，不加空格
<img><!----><img> img与img之间加注释标签

文本自动换行：
书写时如果连续书写，没有空格或换行，文本不换行。

块级元素：
独占一行，不与其他元素并列 代表性的有：<div>
能设置宽高
常见块级元素：div p form ul ol li 等
注：如果不设置宽度，宽度默认为父级宽度的100%。如果父级没设宽度，就与父级的父级宽度相同。若显示不足100%，记得要除去padding与margin的样式。

行内元素（内联元素）：
高度为行高
宽度为文本堆叠宽度
可与其他元素共用一行。代表性的有：<span>
常见的行内元素：span strong em等
替换元素：浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。
宽高（width与height）:
不是所有的行内元素都不能设置宽高，替换元素就可以
注：行内元素添加属性float时，我们也可以给它设置宽高。因为不论元素本身是什么，当它浮动时，就会生成一个块级框。行内元素也就会生成相应的行内框。此时我们为它设置宽高，宽高就会起作用了。

盒子模型：
网页由标签组成，而任何一个标签都可看做为一个盒子模型

宏观：整个网页就是由一个又一个的盒子构建而成的
微观：每个盒子都包含5个元素：width、height、border、padding、margin

怪异盒子模型（早期ie独有）
普通盒子模型

padding 内边距：内容到边框的距离
特性：能够在没有设置宽高的情况下撑起盒子的宽度与高度
冲突：写在下方的覆盖上访的重复部分；
margin 外边距：两个盒子之间的距离
border 边线
宽高（width,height）

怪异盒子模型：
实际宽度：css样式里设置的width的值 （设置的宽度）
内容宽度：宽度-padding-border
注：某些情况下怪异盒子模型比正常的盒子模型要好用，列入：把1200px的宽度4等分，可直接设置4个300px的div。而正常盒子模型则需要计算宽高。