精通CSS 第8章 布局
程序员文章站
2022-05-07 09:13:28
...
所有css布局技术的根本都是3个基本概念:定位、浮动和外边距操作。
8.1 计划布局
要想创建可伸缩且容易维护的css系统,首先应该检查设计,寻找重复的模式,这包括页面结构中的模式或在站点中元素反复出现的方式。
8.2 设置基本结构
使用margin:auto 让设计居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { text-align: center; } .wrapper { width: 920px; margin: 0 auto; text-align: left; } .header { height: 300px; background-color: green; } .content { height: 800px; background-color: gray; } .footer { height: 300px; background-color: #ff6600; } </style> </head> <body> <div class="wrapper"> <div class="header"> <!-- 头部--> </div> <div class="content"> </div> <div class="footer"> <!--底部 --> </div> </div> </body> </html>
8.3 基于浮动的布局
基于浮动的布局中,只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动。
浮动元素不再占据文档流中的任何空间,它们就不再对包围它们的块框产生任何影响。
为了解决这个问题,需要对布局中各个点上的浮动元素进行清理。非常常见的做法不是连续地浮动和清理元素,而是浮动几乎所有东西,然后在整个文档的 战略点(比如页脚)上进行一次或二次清理。
8.3.1 两列浮动布局
8.4 固定宽度、流式和弹性布局
8.4.1 流式布局
Liquid Fold http://liquidfold.net
多栏布局有三种基本实现方案:固定宽度、流动、弹性
上一篇: mysql lvs keepalived 双主热备
下一篇: 使用if或case when优化SQL
推荐阅读
-
div+css布局必须要知道的css条件注释理论及实践第1/2页
-
div+CSS网页布局的意义与副作用原因小结第1/2页
-
div+CSS网页布局的意义与副作用原因小结第1/2页
-
div+CSS网页布局的意义与副作用原因小结第1/2页
-
新手学DIV+CSS商业网站布局从入门到精通(实战案例版) 朱印宏 pdf扫描版
-
CSS重要知识概述——Java Web从入门到精通第2章
-
CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
-
div+css布局必须要知道的css条件注释理论及实践第1/2页
-
精通CSS:高级Web标准解决方案(第2版)_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose