## CSS元素分类及CSS样式居中的方式
文章目录
前言:
一、css元素分类
行内块(内联)元素
块级元素
行内块元素
元素之间的模式转换
二、css水平居中方式
块级元素水平居中
行内元素水平居中
行内块元素水平居中
三、css垂直居中方式
行内元素垂直居中
块级元素垂直居中
行内块元素垂直居中
一、css元素分类
1、样式特点
- 内嵌式:样式只作用于当前文件,没有真正实现结构表现分离
- 外链式:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离
- 作用范围仅限于当前标签,范围小,结构表现混在一起
2、标签分类(显示的方式)
1)行内块(内联)元素
典型代表:input img
特点:在用一行上显示、可以设置高度
2)块元素
、
、
、
......
、
-
、
-
、
、、
、
、
-
、
-
、、
、
、
典型代表:div h1-h6 p ul li
特点:独占一行、可设宽高、嵌套(包含)下子块元素宽高度(没有定义的情况下)和父块元素宽度默认一致
3)行内元素
、、
、、、、、、
典型代表:span a strong em lable
特点:在同一行上显示、不能直接设置宽高、元素的宽和高就是内容撑开的宽度
4) 元素之间的模式转换
块元素转换内元素:div,p{display:inline;}
行内元素转换块元素:a,span{display:block}
块元素和行内元素转行内块元素:
div,a,ui,ul{display:inline-block;}
二、css水平居中方式
- 块级元素水平居中
代码如下:
效果图:
2、行内元素水平居中
代码如下
效果图:
3、 行内块元素水平居中
代码如下:
效果图:
三、css垂直居中方式
1、行内元素垂直居中
代码如下:
效果图
2、 块级元素垂直居中
代码如下
效果图
3、行内块元素垂直居中
代码如下:
效果图
总结