发表于: 2018-06-26 23:40:33

1 615


今天完成的事情

text-indent属性

不定宽常见布局




明天的计划

任务八



遇到的问题





收获

text-indent属性

text-indent 属性规定文本块中首行文本的缩进。

可以是负值。如果值是负数,将第一行左缩进。

text-indent属性值

length    定义固定的缩进。默认值:0。

%       定义基于父元素宽度的百分比的缩进。

inherit   规定应该从父元素继承 text-indent 属性的值


不定宽布局

单列布局

水平居中

水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式

使用inline-block 和 text-align实现

使用margin:0 auto来实现

使用table实现

使用绝对定位实现

垂直居中

使用vertical-align

实用绝对定位

实用flex实现


水平垂直全部居中

利用vertical-align,text-align,inline-block实现

利用绝对定位实现

利用flex实现



多列布局

左列定宽,右列自适应

利用float+margin实现

利用float+margin(fix)实现

使用float+overflow实现

使用table实现

实用flex实现


右列定宽,左列自适应

实用float+margin实现

使用table实现

实用flex实现



两列定宽,一列自适应

利用float+margin实现

利用float+overflow实现

利用table实现

利用flex实现



两侧定宽,中栏自适应

利用float+margin实现

利用table实现

利用flex实现


一列不定宽,一列自适应

利用float+overflow实现

利用table实现

利用flex实现



多列等分布局

实用float实现

利用table实现

利用flex实现



返回列表 返回列表
评论

    分享到