前端学习总结——CSS布局方式之传统布局

传统布局

传统布局即是早期在平板电脑、智能手机等移动设备并不流行的时候使用的布局方式。

一、表格布局

例如：采用表格方式实现如下简单模型的布局

（1）固定布局

即用具体的像素值来确定模型的宽和高等值。

HTML代码如下所示

<table border="0"><tr><td colspan="2" class="header">header</td></tr><tr><td class="aside">aside</td><td class="section">section</td></tr><tr><td colspan="2" class="footer">footer</td></tr>
</table>

css代码

@charset "utf-8";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的width值设置为100%.

流体布局css代码

@charset "utf-8";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;
}

二、浮动布局

浮动布局主要采用float和clear方式两个属性来构建

（1）固定布局

HTML代码片段

<body><header>header</header><aside>aside</aside><section>section</section><footer>footer</footer>
</body>

CSS代码

@charset "utf-8";body {width: 960px;margin: 0 auto;
}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;
}

注意：aside和section这两部分必须要添加浮动并且两者总长度不能超过body的总长度，否则无法将两者并排显示

（2）流体布局

流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20% 和 80%即可。

流体布局css代码

@charset "utf-8";body {width: auto;   //此处改为auto或者100%margin: 0 auto;
}header {height: 120px;background-color: olive;
}aside {width: 20%; //此处改为百分比height: 500px;background-color: purple;float: left;
}section {width: 80%;  //此处改为百分比height: 500px;background-color: maroon;float: right;
}footer {height: 120px;background-color: gray;clear: both;
}

三、定位布局

在使用布局前先了解一下css2关于position属性的用法。

属性说明

static 默认值，没有定位

absolute 绝对定位，使用top,right,bottom,left来进行位移

relative 相对定位，使用top,right,bottom,left来进行位移

fixed 以窗口参考定位，使用top,right,bottom,left来进行位移

属性	说明
static	默认值，没有定位
absolute	绝对定位，使用top,right,bottom,left来进行位移
relative	相对定位，使用top,right,bottom,left来进行位移
fixed	以窗口参考定位，使用top,right,bottom,left来进行位移

//absolute 绝对定位：，脱离文档流，以窗口文档左上角 0,0 为起点

CSS代码

@charset "utf-8";body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: absolute;top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}

效果图如图所示

所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。

由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过 z-index 属性来判定它们的层次关系。

属性	说明
auto	默认层次
数字	设置层次，数字越大，层次越高

示例如下：

html代码

<body>
body
<header><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</header>
</body>

css代码

header {position: relative;
}div {width: 150px;height: 150px;position: absolute;
}.div1 {background-color: olive;left: 0px;z-index: -1;   //设置在-1层。
}.div2 {background-color: purple;top: 100px;left: 100px;z-index: 10;   //设置在第10层
}.div3 {background-color: gray;top: 200px;left: 0;z-index: 100;   //设置在100层
}

//relative 相对定位，不脱离文档流，占位偏移

CSS代码

@charset "utf-8";body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: relative; //相对定位top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}

效果图如下

//fixed 以窗口参考定位，脱离文档流，会随滚动条滚动而滚动

css代码

@charset "utf-8";body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: fixed;  // 以窗口参考定位top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}

这三种分别都在各自的情况下使用，均比较常用。但还有一种情况，就是：1.既要脱离文档流（这样元素之间不会相互冲突）；2.以父元素，比如 body 或其他父元素为参考点（这样可以实现区域性绝对定位）；3.还必须是绝对定位。

HTML代码

<body><header>header</header><aside>aside</aside><section>section</section><footer>footer</footer>
</body>

CSS代码

@charset "utf-8";body {width: 960px;margin: 0 auto;//第一步，将需要设置参考点的父元素设置为相对，且不设置坐标position: relative;
}header {width: 960px;height: 120px;background-color: olive;//第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准 position: absolute;top: 0;left: 0;
}aside {width: 200px;height: 500px;background-color: purple;position: absolute;top: 120px;left: 0;
}section {width: 760px;height: 500px;background-color: maroon;position: absolute;top: 120px;right: 0;
}footer {width: 960px;height: 120;background-color: gray;position: absolute;top: 620px;left: 0;
}

效果图

四、box-sizing

在盒模型中，元素盒子如果加入了内边距 padding 和边框 border 后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。
为了解决这个精确计算的问题，CSS3 提供了一个属性 box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

属性	说明
content-box	默认值，border 和 padding 设置后用于元素的总长度。
border-box	border 和 padding 设置后不用于元素的总长度。
inherit	规定应从父元素继承 box-sizing 属性的值。

示例：设置 border-box 让 border 和 padding 不在额外增加元素大小

aside {width: 200px;height: 500px;background-color: purple;border: 5px solid green;padding: 10px;box-sizing: border-box;float: left;
}

box-sizing 是 CSS3 推出的，各个厂商在实现时设置了私有前缀。

Opera	Firefox	Chrome	Safari	IE
支持需带前缀	无	2 ~ 28	4 ~ 9	3.1 ~ 5
支持不带前缀	10.1+	29+	10+	6+

//完整形式

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

五：resize

CSS3 提供了一个 resize 属性，来更改元素尺寸大小。

属性	说明
none	默认值，不允许用户调整元素大小。
both	用户可以调节元素的宽度和高度。
horizontal	用户可以调节元素的宽度
vertical	用户可以调节元素的高度。

一般普通元素，默认值是不允许的。但如果是表单类的 textarea 元素，默认是允许的。而普通元素需要设置 overflow:auto，配合 resize 才会出现可拖拽的图形。
示例如下

HTML代码

<body><header>header</header><aside>aside</aside><section>section<textarea></textarea></section><footer>footer</footer>
</body>

css代码

@charset "utf-8";body {width: 960px;margin: 0 auto;
}header {height: 120px;background-color: olive;overflow: auto;  //必须resize: both;  //设置为用户可以调节元素的宽度和高度。
}aside {width: 200px;height: 500px;background-color: purple;border: 5px solid green;padding: 10px;box-sizing: border-box;float: left;
}section {width: 760px;height: 500px;background-color: maroon;float: right;
}footer {width: 960px;height: 120;background-color: gray;clear: both;
}textarea {resize: none;
}

效果图如下

附 W3School中css3文档

学习参考资料：李炎恢HTML5第一季视频教程

前端学习总结——CSS布局方式之传统布局相关推荐

前端学习之CSS第三天
前端学习之CSS第三天一.圆角边框 border-radius 圆形 :正方形的盒子是圆形,长方形的盒子是椭圆 boder-radius:50% 圆角矩形:高度或者是宽度的一半 border-rad ...
(:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
【前端学习】CSS入门
前端学习:CSS入门文章目录前端学习:CSS入门前言 1.class01 1.我的第一个CSS 2.导入方式 3.基本选择器 (1)ID选择器 (2)标签选择器 (3)类选择器 4.层次选择器 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局
1.表格布局(不推荐) 父级容器为display:table 表格子级容器为display:table-cell 一个单元格特点:在没有特别设置的情况下,子级是自动平分宽度并填满父级的. tabl ...
自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
Web前端学习html css（一）
10.15 1.1 导学 1.拨云见日 html ,css, 切图流程, PC企业布局, PC游戏布局 2.溯本求源扩展html , 扩展css, html5新语法,css3新语法,兼容与hack ...

前端学习总结——CSS布局方式之传统布局

传统布局

前端学习总结——CSS布局方式之传统布局相关推荐

最新文章

热门文章