CSS布局——水平垂直居中、等分布局、圣杯布局

简介: CSS布局——水平垂直居中、等分布局、圣杯布局

引言


信息时代,互联网是一个重要的信息传播载体。网页成为人们查找资源,获取信息,发布信息,学习交流的重要平台。现今世界,也是一个各项技术都飞速发展的时代。网页的设计制作依傍于互联网而生,并且风格设计在不断更新。因此,对网页的设计要求也不断提高,尤其是在创新的社会背景下网页设计的新理念和新方法,不断推陈出新。CSS对网页的布局是网页体系中的重中之重,本文基于此背景,阐述CSS+DIV技术在网页布局方面的应用。


1 CSS盒子模型


CSS盒子模型是网页布局的核心,所有的HTML元素都可以看作是盒子,CSS盒子模型本质上是一个盒子封装周围的HTML元素。盒子模型主要有四种属性:边距(margin)、边界(border)、边框距(padding)和内容(content)。

image.png


1.1水平垂直居中


水平垂直居中顾名思义就是将行内元素在水平和垂直两个方向居中对齐。利用flex来居中布局是非常好的一种方式,几行代码就能优雅的实现元素水平垂直完美居中。使用flex来居中首先我们要了解什么是flex布局,flex布局通常被称为flexible box(弹性布局),是一种一维的布局模型。它给flex的子元素提供强大的空间分布和对齐能力。而采用flex布局的元素叫做容器,在flex布局中的子元素被称为项目(即父级元素采用flex布局,则父级元素为容器,全部子元素自动成为项目);在容器中默认有水平的主轴和垂直的交叉轴,项目在容器中默认沿主轴排列。Flex常用属性有六个:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

如果想实现水平垂直居中的效果,CSS代码设置如下:

.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background-color: #F0000;
width: 100px;
height: 100px;
    }


CSS代码设置父元素背景颜色为橙色,宽度和高度为300px;设置子元素背景颜色为红色,

align-items属性定义了项目在交叉轴上是如何对其的,既使子元素垂直居中;justify-content属性使子元素水平居中。需要注意的是一定要给父元素添加display:flex;这是开启flex布局的钥匙。

image.png


1.2等分布局


等分布局就是将一行分为多列,每一列的宽度是相同的。使用float + padding + background-clip布局的方式。padding 简写属性在一个声明中设置所有填充属性,该属性可以有1到4个值;background-clip属性指定背景绘制区域。即用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景。

如果想实现等分布局的效果,CSS代码设置如下:

.parentWrap {
border: 2pxsolidblack;
overflow: hidden;
}
.parent {
background-color: lightgrey;
margin-right: -10px;
overflow: hidden;
}
.child {
float: left;
height: 300px;
width: 25%;
padding-right: 10px;
box-sizing: border-box;
background-clip: content-box;
}


子元素中float为设置浮动类型,left为向左浮动;height设置高度;本行分为四列,所以宽度为25%,padding-right是设置一个元素的右填充在此填充了10px,即每个子元素之间的空隙。


image.png


1.3圣杯布局


圣杯布局是header和footer各占领屏幕所有宽度,高度固定;中间的container是一个三栏布局;三栏布局两侧宽度是固定不变的中间部分自动填充整个区域;中间的部分是三栏中高度最高的部分。实现圣杯布局效果也可以采用flex布局,就是一个大盒子包含三个子盒子,左右两个盒子固定宽高,中间盒子设置flex:1(占据大盒子剩余空间)。

如果想实现圣杯布局的效果,CSS代码设置如下:

body {
min-width: 550px;  
font-weight: bold;
font-size: 20px;
  }
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
  }
#container {
display: flex;
  }
#container .column {
text-align: center;
height: 300px;
line-height: 300px;
  }
#center {
flex: 1;
background: rgb(206, 201, 201);
  }
#left {
width: 200px;        
background: rgba(95, 179, 235, 0.972);
  }
#right {
width: 200px;           
background: rgb(231, 105, 2);
  }


Header和footer部分高度设置为60px,文本元素设置为排列居中高度为60px;中间部分center设置属性为flex:1该部分空间大小可以改变,left和right部分宽度设置为200px。

image.png


结语


DIV+CSS布局是网页开发的重要部分,它将整个网页分割成多个块使整体变得整齐有序,“DIV+CSS”盒子模型代码实现也相对简单,逻辑清楚,非常适合平时使用。本文只是简单列举了单列布局、双列布局和三列布局布局设计。如果想要搭建一个好看完整的网页还需要很多的技术支持,这就需要不断地学习探索。

目录
相关文章
|
9天前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
32 1
|
9天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
125 1
|
4月前
|
前端开发
用 CSS Grid 轻松构建复杂布局
用 CSS Grid 轻松构建复杂布局
256 83
|
3月前
|
Web App开发 前端开发 数据可视化
用 CSS Grid 实现高效布局的 3 个实战技巧
用 CSS Grid 实现高效布局的 3 个实战技巧
|
11月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
249 0
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
280 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 下一篇
    oss教程