css清除浮动的几种方法_CSS 分享几种传统布局方法[上]
本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的。
一.布局模型
在早期没有平板和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么,从这种比例上来看,长度总是大于宽度的。从最低分辨率 1024 * 768 设计即可。为了使浏览器底部不出现滚动条,需要减去适当的宽度,比如减去 28,最终固定长度设置为 996 即可。当然,也有一些网站在近两年讲最低分辨率设置为 1280 减去滚动条宽度,因为大显示器逐步主流。
除了刚才所说的固定长度的布局,还有一种是流体布局,就是布局的长度为百分比,比 如 100%。不管你是什么分辨率,它都能全屏显示,当然,局限性也特别大,只适合一些单一页面,复杂的页面,会随着不同浏览器产生各种阅读障碍。
我们创建一个三行两列模型。并采用表格布局和浮动布局,构建固定和流体布局的方式,模型图如下:
二.表格布局
表格布局,就是通过设定固定的单元格,去除表格边框和填充实现的布局。当然这个布局非常不建议使用,只是教学了解。表格应该用它最为语义的地方,就是二维表的数据显示。
1.固定布局
HTML 部分
header
asidesection
footer
CSS 部分
body {margin:0;}
table {margin:0 auto; width: 960px; border-spacing: 0;}
.header {height: 120px; background-color: olive;}
.aside {width: 200px; height: 500px; background-color: purple;}
.section {width: 760px; height: 500px; background-color: maroon;}
.footer {height: 120px; background-color: gray;}
2.流体布局
表格的固定布局改成流体布局非常简单,只需要设置 table 为 100%即可。
table {
width: 100%;
}
三.浮动布局
浮动布局主要采用 float 和 clear 两个属性来构建。
1.固定布局
HTML 部分
header
aside
section
footer
CSS 部分
body { width: 960px; margin: 0 auto; color: white;}
header {height: 120px;background-color: olive;}
aside {width: 200px; height: 500px; background-color: purple; float: left;}
section { width: 760px; height: 500px; background-color: maroon; float:right;}
footer { height: 120px; background-color: gray; clear:both;}
2.流体布局
流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20%和 80%即可。
CSS 部分
body {width: auto;}
aside {width: 20%;}
section {width: 80%;}
如果您觉得有用,记得在下方点赞、关注、留言,小编会定期奉 上更多的惊喜哦,您的打赏支持才是小编继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术,陪有梦想的人一起成长!
css清除浮动的几种方法_CSS 分享几种传统布局方法[上]相关推荐
- CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- div为空的时候 浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达 作者:html中文网 | 编辑:前端妹 来源:html.cn/web/css/19613.htm ...
- CSS清除浮动的四种方法
CSS清除浮动的四种方法 第一种:使用div空标签法 第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
- css清除浮动大全,共8种方法。
本文转载自:http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果 ...
- html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow ...
- Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...
- CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
- css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达 作者:html中文网 | 编辑:前端妹 来源:html.cn/web/css/19613.htm ...
最新文章
- CentOS7 php7.0 升级到php7.3
- 区块链智能合约入门:Hello world(2)
- No error message available, result code: E_FAIL(0x80004005)
- 传输协议不安全,数据泄露谁之过?——流量劫持技术分析
- 计算机硬件:固态硬盘选购的技巧
- LeetCode 207. 课程表(拓扑排序)
- IIS 7.0 部署MVC
- 142.4. Gearman
- R语言数据集合并、数据增减、不等长合并
- 狮子鱼社区团购独立版安装方法
- 大作家超级写作软件_3种对作家有用的Atom文本编辑器软件包
- 解构语音交互产品--人工智能AI技术
- 【MySQL】sql查询分组数据的前几名,mysql分组查询前三名
- yarn 错误There appears to be trouble with your network connection. Retrying
- 小米与vivo相争,高通成为最大受益者
- 微软这个系统,90% 的人都没用过!
- Airbnb房源信息爬取(一)——获取城市列表
- shell编程之sed
- onsubmit和submit()详解
- 《周志明的软件架构课》学习笔记 Day15
热门文章
- 从html导出带样式的excel,Jquery导出带样式的Excel
- schoolcms - 学习笔记
- 如何利用echarts图表获取条状图点击名称和值
- 【机器视觉学习笔记】Harris 角点检测算法(C++)
- 小程序 遮罩层(阻止事件穿透)
- python基础-类
- 解决表字段使用关键字导致Mybatis Generator生成代码异常的解决方案
- [算法] 求排列组合: 从n个数中任选m个数组成一个新数
- 在dos下运行.exe程序(C++)
- 前端学习(3034):vue+element今日头条管理-markdown补充