HTML标签分类
根据在页面中呈现的样式分类为:块元素,行内元素,行内块元素。
-
块元素 (block)
- 例如:div、p、h1-h6、html、无序列表ul,li、有序列表ol、li、项目列表dl、dt、dd
- 特点:独占一行,可以设置宽高 行内元素 (inline)
- 例如:a、b、i、em、span
- 特点:在一行内显示,不可以设置宽高 行内块元素 (inline-block)
- 例如:img、input
- 特点:在一行内显示,可以设置宽高
元素之间可以通过display:(名称)互相转换
css选择器优先级
!important > 行内样式>ID选择器(100)> 类选择器(10)> 标签(1)
盒子模型
盒子模型包含:
内容(content)、内填充(padding)、边框(border)、外边距(margin)
盒子模型的问题:
- 默认情况下大部分元素的margin/padding都为0;但是有一些元素的margin/padding不为0,例如:h1-h6标签\p\body\ul,li\dl,dt,dd\ol,li\input。
- 相邻俩个块元素的margin值会重合,值会取最大
- 行内元素的margin只是左右没有上下。line-hight调高度
- margin可以为负数,但是padding不可以
- 当两个元素发生嵌套关系,如果父元素没有上边框,上padding,父子元素之间没有其他呢绒时,此时子元素的margin-top值会作用到父元素身上。
解决办法:
·给父元素添加padding-top代替margin-top
·给父元素添加overflow:hidden
页面层级
文档层,浮动层(float),定位层(position)
浮动引发的问题:浮动的子元素撑不开父元素
//解决办法
//超出部分影藏
.{
overflow: hidden;
}
//伪类元素
.clearfix:after {
content:".";
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
display: block;
}
.clearfix {
zoom: 1;
}
定位的层级关系
- 相对定位
语法:position: relative;
特点:相对自身去定位;保留自身原来的位置(文档层中的位置);脱离文档流- 绝对定位
语法:position: absolute;
特点:相对于拥有定位属性的父级元素去定位。如果父元素没有定位属性,会一直向着上一级寻找,知道找到拥有定位属性的元素停止。如果一直找不到,则会相对于html去定位。完全脱离文档流- 固定定位
语法:position: fixed;
特点:相对于浏览器的四个边去定位,完全脱离文档流。- 定位属性的五个样式:top,right,bottom,left,z-index(层级)。