行级元素与块级元素
块级元素： 自己占一行 嵌套块级元素、行级元素 h1~h6 p ul li ol div
行级元素/行内元素： 多个元素占一行 只能嵌套行级元素 a span label
CSS选择器 标签选择器 如:p{} 类选择器 如.xxx{} ID选择器 如#xxx{} 伪类选择器 如:hover 伪元素选择器 如:before 子代选择器 如:#content>li 后代选择器 如:p span
css超链接 a:link{}:未被访问之前的样式 a:visited{}:已被访问过的样式 a:hover{}:鼠标悬停时的样式 a:active{}:在鼠标点击与瞬间释放之间发生的事件时的样式
盒模型
外边距合并
1.给父元素 设置边框 1px solid transparent
2.给父元素设置 溢出隐藏 overflow: hidden
3.给父元素或子元素设置定位 position: absolute;
4.给父元素 或 子元素 设置浮动
浮动
浮动后造成的结果:父元素塌陷
解决办法:
1.父元素设置高度;
2.父元素设置溢出隐藏overflow:hidden;
3.在父元素内添加最后一个子元素,并且在子元素上设置清除浮动:clear:both;
4.clearfix
选择器优先级
选择器的权重
!important 最高
内联样式 1000
id 100
class 10
伪类 10
标签 1
伪元素 1
内联>ID选择器>类选择器=伪类选择器>标签选择器=标签选择器
注：同一元素的相同样式 权重相同的话 后面的样式会覆盖前面
同一元素的相同样式 权重不同的话 按照权重大小展示
同一元素的不同样式会合并
定位
position 定位
relative 相对定位 相对于元素本身进行定位 定位后空间不会释放
absolute 绝对定位 相对于最近已定位的祖先元素进行定位 定位后空间释放
fixed 固定定位 相对于浏览器定位 定位后空间释放
position
常规取值：
1.static(静态）
2.Relative(相对）
3.Absolute(绝对)
4.fixed(固定)
static(静态)：HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中
Relative(相对):相对定位。
特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的 位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
Absolute(绝对)：绝对定位
特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。
fixed(固定)：固定定位。 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。(空间释放,相对于浏览器定位)
注意! absolute(绝对定位)以最近定位的父元素元素为基准进行定位 定位后可用z-index设置层级
