【静态页面架构】HTML之布局

阅读量：6037 次

发布时间：2019-06-20

本文共 1131 字，大约阅读时间需要 3 分钟。

一.布局；

1.水平居中

第一种居中方式；

以text-align属性设置父级元素和设置行内块级元素

第二种居中方式；

以设置块级元素和外边距特性来设置

第三种居中方式；

以设置绝对定位和trannsform属性值来实现居中

第四种居中方式；

以设置相对定位和trannsform属性值(translateX)

2.垂直居中；

第一种居中方式；

以设置父级元素为单元格，垂直方向居中

第二种居中方式；

以设置子级相对定位和transform属性值(translateY)

第三种居中方式；

以设置子级元素相对定位和transform属性值(translateY)

3.居中布局；

第一种居中布局；

以设置父级相对定位和子级绝对定位；transform属性值translate;

第二种居中布局；

以设置父级单元格和外边距特性

4.两列布局；

第一种两列布局；

设置左浮动和外左边距


    
     这是作为左边的定宽

第二种两列布局；

以设置左浮动和开启BFC模式来设置


    
     这是作为左边的定宽

第三种两列布局；

以右浮动和外左边距来设置


    
     这是作为左边的定宽

第四种两列布局；

以设置父级为display属性值(table)


        
     
      这是作为左边的定宽

转载地址：http://eslhx.baihongyu.com/

你可能感兴趣的文章

(原創) 如何設計一個數位相框? (SOC) (Quartus II) (SOPC Builder) (Nios II) (TRDB-LTM) (DE2-70)...

查看>>

/etc/profile文件内容

查看>>

一页纸IT项目管理：大道至简的实用管理沟通工具

2.4 salt grains与pillar jinja的模板

查看>>

VDI序曲二十桌面虚拟化和RemoteApp集成到SharePoint 2010里

Kafka High Level Consumer 会丢失消息

Ubuntu 10.04升级git 到1.7.2或更高的可行方法

查看>>

Spring Security4实战与原理分析视频课程（扩展+自定义）

oracle recyclebin与flashback drop

查看>>