学习要点:

1.定位布局

2.box-sizing

3.resize

主讲教师:李炎恢

本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的。

一.定位布局

在使用定位布局前,我们先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。

属性

说明

static

默认值,无定位。

absolute

绝对定位,使用 top、right、bottom、left进行位移。

relative

相对定位,使用 top、right、bottom、left进行位移。

fixed

以窗口参考定位,使用 top、right、bottom、left 进行位移。

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

header {
position: absolute;
top: 100px;
left: 100px;
}

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

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

属性

说明

auto

默认层次

数字

设置层次,数字越大,层次越高

//设置在 100 层上

header {
z-index:;
}

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

header {
position: fixed;
top: 100px;
left: 100px;
}

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

header {
position: relative;
top: 100px;
left: 100px;
}

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

//第一步,将需要设置参考点的父元素设置为相对,且不设置坐标

body {
position: relative;
}

//第二步,如果父元素设置了参考点,子元素的绝对定位将以它为基准

header {
position: absolute;
top: 0px;
left: 0px;
}

1.固定布局

//CSS 部分

body {
width: 960px;
margin: 0 auto;
position: relative;
} header {
width: 960px;
height: 120px;
position: absolute;
top:;
left:;
} aside {
width: 200px;
height: 500px;
position: absolute;
top: 120px;
left:;
} section {
width: 760px;
height: 500px;
position: absolute;
top: 120px; /*left: 200px;*/
right:;
} footer {
width: 960px;
height: 120px;
position: absolute;
top: 620px;
}

在上面,基本都用了定位来进行固定布局。但细心的可以发现,其实只有右侧需要实行绝对定位,其他就按照普通的摆放即可。对于设计成流体布局,只要将长度设置成百分比即可。

二.box-sizing

在盒模型那个章节,我们了解到元素盒子如果加入了内边距 padding 和边框 border 后,它的总长度会增加。那么如果这个元素用于非常精确的布局时,我们就需要进行计算增减。这其实是比较烦人的操作,尤其是动态设置页面布局的时候。

CSS3 提供了一个属性 box-sizing,这个属性可以定义元素盒子的解析方式,从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

属性

说明

content-box

默认值,border 和 padding 设置后用于元素的总
长度。

border-box

border 和 padding 设置后不用于元素的总长度。

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

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

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

Opera

Firefox

Chrome

Safari

IE

支持需带前缀

2 ~ 28

4 ~ 9

3.1 ~ 5

8.0+

支持不带前缀

10.1+

29+

10+

6+

9.0+

//完整形式

-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 才会出现可拖拽的图形。

//允许修改

aside {
resize: both;
overflow: auto;
}

第 27 章 CSS 传统布局[下]的更多相关文章

  1. 第 27 章 CSS 传统布局[上]

    学习要点: 1.布局模型 2.表格布局 3.浮动布局 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一.布局模型 在早期没有平 ...

  2. 《深入理解bootstrap》读书笔记:第4章 CSS组件(下)

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  3. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  4. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...

  5. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...

  6. 第五章 CSS页面布局基础

    1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...

  7. CSS传统布局之页面布局实例

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  8. CSS传统布局之布局模型

    刚开始准备这篇文章的时候,查到的有很多包含“布局模型”的中文博客或是资料,但是google上并未找到类似字眼,google到的是“flex layout module”“grid layout mod ...

  9. 《CSS网站布局实录》学习笔记(三)

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

随机推荐

  1. Atitit. Atiposter 发帖机 新特性 poster new feature v11  .docx

    Atitit. Atiposter 发帖机 新特性 poster new feature v11  .docx 1.1.  版本历史1 2. 1. 未来版本规划2 2.1. V12版本规划2 2.2. ...

  2. salesforce 零基础学习(三十)工具篇:Debug Log小工具

    开发中查看log日志是必不可少的,salesforce自带的效果显示效果不佳,大概显示效果如下所示: chrome商城提供了apex debug log良好的插件,使debug log信息更好显示.假 ...

  3. vue-cli需要的包

    vue-cli需要的包 npm install webpack webpack-dev-server --save-dev npm install vue-loader vue-html-loader ...

  4. git忽略以点开头的文件夹

    git忽略以点开头的文件夹 好像不是什么问题,可是我用的时候不好使,还是记录下 参考:http://www.oschina.net/question/1437985_2181276

  5. 复杂 XML 的 序列化 反序列化

    已知.xml(再此命名default.xml)文件,请将其反序列化到一个实例对象. <?xml version="1.0" encoding="utf-8" ...

  6. Leetcode 69 Sqrt(x) 二分查找(二分答案)

    可怕的同时考数值溢出和二分的酱油题之一,常在各种小公司的笔试中充当大题来给你好看... 题意很简单,在<二分查找综述>中有描述. 重点:使用简单粗暴的long long来避免溢出,二分均方 ...

  7. Mybatis中SqlMapper配置的扩展与应用(1)

    奋斗了好几个晚上调试程序,写了好几篇博客,终于建立起了Mybatis配置的扩展机制.虽然扩展机制是重要的,然而如果没有真正实用的扩展功能,那也至少是不那么鼓舞人心的,这篇博客就来举几个扩展的例子. 这 ...

  8. javaweb回顾第十一篇过滤器(附实现中文乱码问题)

    1:过滤器概念 过滤器就是一种在请求目标资源的中间组件,比喻把污水转换成纯净水中间需要一个污水净化设备,那么这个设备就好比一个过滤器.那么我用图来表示过滤器(可以有多个过滤器)运行的过程 2:Filt ...

  9. SQL Pass北京举行2014年第一次线下活动

    地点:北京微软(中国)有限公司[望京利星行],三层308室 时间:2014年 3 月15日 13:30-16:30 SQL PASS 北京QQ群号:2435349 报名地址:http://1drv.m ...

  10. 【VS技巧】根据XML自动生成类型

    .NET 4.5对应的VS版本(不要问我哪个版本)中新增了一个功能,严重实用,可以根据XML文档生成新类型.这个功能在VS的[编辑]>[选择性粘贴]菜单中.怎么玩?不急,咱们实际操作一下. 以网 ...