利用HTML和CSS实现常见的布局

  单列布局


  水平居中

水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

使用inline-block 和 text-align实现

 

优点:兼容性好;

不足:需要同时设置子元素和父元素

使用margin:0 auto来实现

 

优点:兼容性好

缺点: 需要指定宽度

使用table实现

 

优点:只需要对自身进行设置

不足:IE6,7需要调整结构

使用绝对定位实现

不足:兼容性差,IE9及以上可用

实用flex布局实现

缺点:兼容性差,如果进行大面积的布局可能会影响效率

  垂直居中

vertical-align

  我们都知道,每个人都有不同的嗜好,有的人喜欢吃甜食,有的人喜欢吃辣的东西,有的人不喜欢吃芹菜,有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样,他们有的只对牛奶感兴趣,有的只喜欢吃坚果和果冻,而讨厌牛奶。而vertical-align呢,是个比较挑食的家伙,它只喜欢吃果冻,从小吃果冻长大,没有了果冻,它就会闹脾气,对你不理不睬。我称之为“果冻依赖型元素”,又称之为“inline-block依赖型元素”,也就是说,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识

在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;

实用绝对定位

实用flex实现

 

  水平垂直全部居中

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

利用绝对定位实现

利用flex实现

  多列布局


  左列定宽,右列自适应

该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局

 

利用HTML和CSS实现常见的布局
  利用float margin实现

注:IE6会有3px的bug

利用float margin(fix)实现

 

利用HTML和CSS实现常见的布局

使用float overflow实现

overflow:hidden,触发bfc模式,浮动无法影响,隔离其他元素,IE6不支持,左侧left设置margin-left当作left与right之间的边距,右侧利用overflow:hidden 进行形成bfc模式

如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高

使用table实现

实用flex实现

利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等

  右列定宽,左列自适应

实用float margin实现

使用table实现

实用flex实现

  两列定宽,一列自适应

 

利用HTML和CSS实现常见的布局
  基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应

利用float margin实现

利用float overflow实现

利用table实现

利用flex实现

  两侧定宽,中栏自适应

 

利用HTML和CSS实现常见的布局
  利用float margin实现

利用table实现

利用flex实现

  一列不定宽,一列自适应

 

利用HTML和CSS实现常见的布局
  利用float overflow实现

利用table实现

利用flex实现

  多列等分布局

多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。

 

利用HTML和CSS实现常见的布局
  html结构如下所示

实用float实现

利用table实现

利用flex实现

  九宫格布局

使用table实现

实用flex实现

  全屏布局


 

利用HTML和CSS实现常见的布局

  利用绝对定位实现

  利用flex实现

  响应式布局


meta标签的实用

设置布局宽度等于设备宽度,布局viewport等于度量viewport

  媒体查询

  HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果。

语法

 

weinxin
我的微信
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!
avatar

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: