1.块级元素
*address 地址;
*blookquote 块应用;
*center 居中对齐块;
*dir 目录列表;
*div CSS盒子标签;
*dl 自定义列表;
*form 表单;
*h1--*h6 标题标签(由大到小);
*hr 水平分割线;
*menu 菜单列表;
*ol 有序列表;
*p 段落标签;
*pre 格式化文本;
*table 表格;
*ul 无序列表;
以上则是我们较常用的块元素。
2.内联元素(也称行内元素)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量这些则是我们的行内元素
行内元素与块级元素的区别:
1).块级元素会独自占据一行,它的宽度则会填满至其父级元素的宽度
2).行内元素不会独自占据一行,相邻元素与其排布在同一行,当该行满了才会换行
3).块级元素是可以设置width和height属性的,而行内元素不可以且设置了也不会生效,当然块级元素即使设置了宽度也仍旧是块级元素
4).块级元素可以设置margin(外边距)和padding(内边距)。此外有点需要注意,水平方向是会产生边距的而竖直方向的边距不会产生效果
CSS的position内的常用属性:
可以给HTML的某个标签加上position属性,使其固定在页面内的任何位置。position的值有:relative,absolute,fixed,static。
<!-- 定义两个div -->
<div class="box">
<div class="box1"></div>
</div>
1.相对定位(该为父级)
.box {
width: 50px;
height: 50px;
position: relative;
top: 50px;
left: 10px;
}
以上代码将实现将box以box最初的位置(一般是在浏览器的左上角,左上角为我们页面的原点0)向右(left表示距离左边的距离)移动50px,向下(top表示距离顶部的距离)移动10px。
2.绝对定位
.box1 {
width: 10px;
height: 20px;
position: absolute;
top: 10px;
left: 10px;
}
以上代码将实现将box1的位置以当前的视口位置(此处即我们绝对定位的定点)的原点为基准位置进行移动相应得距离;
.box {
position: relative;
}
.box1 {
width: 10px;
height: 20px;
position: absolute;
top: 10px;
left: 10px;
}
如果将box1的父级设置了relative,那么box1将会以box的原点进行位移。
3.固定定位
.box {
width: 50px;
height: 50px;
position: fixed;
top: 20px;
left: 0px;
}
以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。(固定定位便是直接以我们窗口的左上角为基点进行偏移)
注意事项:
1.绝对定位会使元素脱离文档流,位于定位元素后面的元素将会移动到该元素的位置去填补空白区域;
2.一般情况下,绝对定位都会和相对定位一起使用;
3.使用fixed和absolute时,一定要认清谁是基准位置。