学习要点:

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. WebApi系列~QQ互联的引入(QConnectSDK)

    回到目录 感谢与改进 首先要感谢张善友老兄为大家封装的这个DLL,它将QQ官方的相关API都集成到了这个里面,这对于开发人员来说,是个福音,有人会说,为什么QQ官方没有提供.net版的SDK呢,在这里 ...

  2. 关于stm32的正交解码

    关于正交解码,我先解释何为正交解码,,,,其实名字挺高大上的,,,,还是先说编码器吧 看一下我用过的一种编码器 编码器的 线 数 ,是说编码器转一圈输出多少个脉冲,,,如果一个编码器是500线,,,说 ...

  3. 22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C,在主类的main方法 中测试类A与类B。

    22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表.然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法sh ...

  4. MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作

    一.使用MyBatis对表执行CRUD操作--基于XML的实现 1.定义sql映射xml文件 userMapper.xml文件的内容如下: 1 <?xml version="1.0&q ...

  5. 百度面试题 字符串相似度 算法 similar_text 和页面相似度算法

    在百度的面试,简直就是花样求虐. 首先在面试官看简历的期间,除了一个自己定义字符串相似度,并且写出求相似度的算法. ...这个确实没听说过,php的similar_text函数也是闻所未闻的.之前看s ...

  6. html学习记录之表格、表单基础

    ①编码:charset="utf-8": ​②描述及关键词:name="description":name="keywords": ③a标签 ...

  7. cmder设置打开时的默认目录

    cmder设置打开时的默认目录 打开cmder自动进入工作目录,怎么配置? http://superuser.com/questions/1005285/run-a-bat-file-with-cmd ...

  8. C++11模板类使用心得

    1.推荐使用std::shared_ptr<TaskT>代替指针TaskT*使用,shared_ptr是一种智能指针,能自主销毁释放内存,在c++11中被引入,在多线程编程中有很大的用处, ...

  9. Oracle日期函数和循环总结

    一,日期相关的函数 Select to_char(sysdate,'Q') from dual;--指定日期的季度 Select to_char(sysdate,'MM') from dual;--月 ...

  10. 深入理解PHP内核(九)变量及数据类型-静态变量

    原文链接:http://www.orlion.ga/251/ 通常静态变量是静态分配的,他们的生命周期和程序的生命周期一样长,只有在程序退出后才结束生命周期,这和局部变量相反,有的语言中全局变量也是静 ...