-
> 水平居中布局的概念:
当前元素相对于谁水平居中。可以是页面,也可以是父级元素。核心是左右方向放中间。
>水平居中布局:
-我知道的:
1.块级元素:margin:0 auto;
2.行内元素:text-align:center
-课程中讲的(常用的有3种,但不止这些):
inline-block+text-align配合(其实跟"我知道的2"差不多,只不过是用css定义元素类型为内联元素了。)
table+margin属性配合使用(其实跟"我知道的1"差不多,只不过是用css定义元素类型为块级元素了。)
absolute+transform配合使用(这个其实也知道,但是就是用的不太熟,百分比还是/2的数值应用在哪个样式,老是整不明白)
查看全部 -
居中布局分类,3种:水平,垂直,水平+垂直
查看全部 -
> 布局为何头疼:难
原因1:逻辑性及设计感强
原因2:不能debugger代码定位(语言开发,比如JS,可以跟代码)
原因3:没有套路规律可行
> 布局不是技术内容(html和css),而是一种设计思想(活学活用,而非只是语法堆砌)
需要不断练习,才能融会贯通
查看全部 -
float + margin
查看全部 -
两列布局的方式
查看全部 -
absolute + transform 实现垂直居中
查看全部 -
display:table-cell vertical-align 垂直居中
查看全部 -
垂直居中布局实现方式
查看全部 -
absolute + transform实现水平居中
查看全部 -
margin :auto实现水平居中
查看全部 -
inline-block + text-align 实现水平居中的优点
查看全部 -
水平 水平居中布局的三种实现方式
查看全部 -
一旦子级元素脱离文档流后,使用dispaly:table margin: 0 auto 的居中对齐方式将 失效
查看全部 -
居中布局的核心在于父级元素变为行内块属性,使用dispaly:inline-block;
子级元素使用text-align:center;
查看全部 -
优点:
- 无论父级元素是否脱离文档流,都不影响子级元素水平居中效果。
缺点:
- transform属性是CSS3中新增的属性,浏览器支持情况不好
查看全部
举报