学习要点:

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. [Spring框架]Spring开发实例: XML+注解.

    前言: 本文为自己学习Spring记录所用, 文章内容包括Spring的概述已经简单开发, 主要涉及IOC相关知识, 希望能够对新入门Spring的同学有帮助, 也希望大家一起讨论相关的知识. 一. ...

  2. Atitit  五种IO模型attilax总结 blocking和non-blocking synchronous IO和asynchronous I

    Atitit  五种IO模型attilax总结 blocking和non-blocking synchronous IO和asynchronous I   1.1. .3 进程的阻塞1 1.2. 网络 ...

  3. echart饼状图使用,打发时间。

    新公司,刚来几天,闲着没事,领导让我做些无关痛痒的活,优化报表统计!!!之前是用flash做的,现在要改成echart实现.好吧,之前没用过,抱着学习态度,研究了下.写点东西打发下时间,能帮到需要帮助 ...

  4. 浅谈attr()和prop()

    刚开始学JQ的时候 ,看到attr()和prop()这两个属性的时候感觉很迷茫,而且配合官方给出的推荐使用图: prop()可以做到的attr()完全都可以,而且做不到的attr()也可以做到.何用? ...

  5. Python小爬虫实例

    有几个注意点: # -*- coding: utf-8 -*- # func passport jw.qdu.edu.cn import re import urllib# python3后urlli ...

  6. Oracle之DBMS_RANDOM包详解

    DBMS_RANDOM是Oracle提供的一个PL/SQL包,用于生成随机数据和字符.它具有以下函数. 其中,initialize,random,terminate函数在Oracle11g中已不推荐使 ...

  7. (转)sql的join图解

    假设我们有两张表,Table A是左边的表,Table B是右边的表. 其各有四条记录,其中有两条记录是相同的,如下所示: 1 id name       id  name 2 -- ----     ...

  8. Android基于mAppWidget实现手绘地图(六)–如何展示地图对象

    为了展示选中的点,你需要完成以下步骤: 1.创建或者获得一个已经存在的图层 2.创建代表选中点的地图对象 3.把地图对象添加到图层 创建新图层 使用以下代码片段创建图层 int COFFEE_SHOP ...

  9. 基于TFS实践敏捷-可视化管理

    TFS是基于微软平台一套不错的系统,支持源码管理+运行调试+持续集成+自动化测试+Bug管理+代码评审+任务项管理+文档管理+沟通管理.基于TFS 2015实践看板管理,让团队的数据可视化,让大家更多 ...

  10. Linux - Screen

    GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...