博客
关于我
CSS网页布局
阅读量:565 次
发布时间:2019-03-09

本文共 1935 字,大约阅读时间需要 6 分钟。

网页布局与CSS学习总结

网页开发是前端开发的核心内容之一,而CSS作为表现标准语言,与HTML结构化语言和JavaScript行为语言共同构成了网页开发的三大标准语言。了解网页布局的基础是掌握前端开发的重要技能之一。

网页布局主要包括三种定位机制:标准文档流、浮动布局和绝对定位。这些机制共同决定了网页内容的显示方式。


1. 标准文档流

标准文档流是网页默认的布局方式,块级元素和行级元素共同构成标准文档流。块级元素从上到下、从左到右依次排列,每个块级元素都占据独立的一行。例如,divullip等标签常用作块级元素。

行级元素可以在同一行内并列显示。例如,spanstrongemimginput等标签作为行级元素。

每个元素都可以看作一个盒子模型,盒子模型由四个部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子数据从外到里依次为:border(边框)、content + padding(内容与内边距)、background-image(背景图片)、background-color(背景颜色)和margin(外边距)。

盒子的尺寸由四个方向的宽度和高度属性决定。例如,border: 1px 2px 3px 4px;表示上边框1个像素,右边框2个像素。如果只设置三个值,默认为上、左右、下;只设置两个,默认为上下和左右;只设置一个,默认四个方向相同。

从三维角度看,盒子模型的层次结构为:外到里依次是bordercontent + paddingbackground-imagebackground-colormargin

元素居中的实现方法有多种。如果需要在水平方向居中,可以通过设置文本对齐为中心(text-align: center;)实现。对于块级元素,可以通过设置margin: Xpx auto;实现水平居中。为了实现垂直居中,可以将父元素的高度和行高设置为相同值(height: 1.5remline-height: 1.5rem;),然后在子元素中设置垂直对齐(vertical-align: middle;)。需要注意的是,块级元素的垂直居中可能在IE6和IE7中存在兼容性问题。


2. 浮动布局

浮动布局是一种常用布局方式,通过设置float属性实现。浮动可以设置为leftrightnone,块级元素并列显示后会从左到右排列。如果某个元素设置了浮动属性,其宽度会根据内容自动适应,而不是占据整行。周围元素会根据浮动元素的宽度产生高度变化。

为了避免浮动带来的布局问题,可以通过设置clear: both;width: 100%; overflow: hidden;来清除浮动带来的影响。


3. 绝对定位

绝对定位是通过position: absolute;实现的,最强的定位方式。绝对定位的元素完全脱离标准文档流,相对位置由leftrighttopbottomz-index决定。绝对定位的元素会相对于最近的定位元素(position: relative;position: absolute;position: fixed;)进行偏移。如果没有相对于的定位元素,绝对定位的元素会相对于HTML根节点进行偏移。

需要注意的是,父元素的高度必须大于绝对定位的子元素,否则子元素会将父元素撑高。


4. 元素居中

在网页设计中,元素居中是一个常见需求。对于行内元素,可以通过设置text-align: center;实现水平居中,同时结合父元素的高度和行高设置垂直居中。例如:

.img-wrapper {    text-align: center;    height: 1.5rem;    line-height: 1.5rem;}.img-wrapper > img {    width: 80%;    vertical-align: middle;}

对于块级元素,如果需要居中,可以将父元素设置为display: flex;,然后在子元素中设置margin: auto;。这种方法在子元素宽高不固定的情况下仍然有效。


5. 其他常用CSS特性

  • 不透明背景色:可以通过设置background: rgba(255,255,255,0.8);实现不透明的背景效果。
  • 位置固定到底部:可以通过设置position: fixed;bottom: 0;实现元素固定在页面底部。

通过合理运用标准文档流、浮动布局和绝对定位,可以实现不同需求的网页布局设计。同时,掌握元素居中和背景效果的设置方法,可以进一步提升网页美观度和用户体验。

转载地址:http://wdfpz.baihongyu.com/

你可能感兴趣的文章
Mysql 常见ALTER TABLE操作
查看>>
MySQL 常见的 9 种优化方法
查看>>
MySQL 常见的开放性问题
查看>>
Mysql 常见错误
查看>>
MYSQL 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>