博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《Head first HTML与CSS 第二版》读书笔记 第十一章 布局和定位
阅读量:6456 次
发布时间:2019-06-23

本文共 1398 字,大约阅读时间需要 4 分钟。

hot3.png

1、流体布局

浏览器使用流在页面中放置元素。

块元素从上向下流,各元素之间有一个换行。默认的,每个块元素会占浏览器窗口的整个宽度。

内联元素在块元素内部从左上方流向右下方。如果需要多行,浏览器会换行,在垂直方向上扩展外围块元素,来包含内联元素。

内联元素的左右外边距不会折叠在一起,而块元素的上下相邻的外边距会折叠为最大外边距。

流体布局指扩展浏览器窗口时,页面红的内容会扩展以适应页面。

2、浮动元素

将元素添加float属性,指定其为浮动元素。浮动元素会从正常流中取出,浮动到左边或右边。

浮动元素放在块元素之上,不会影响正常的页面流。不过,内联内容会考虑浮动元素的边界,围绕着浮动元素。

浮动元素必须有特定的宽度,不能设置为auto。

clear属性用来指定一个块元素左边或者右边(或者两边)不能有浮动元素。设置了clear属性的块元素会下移,直到它旁边没有浮动元素。

可以浮动内联元素,常见的是浮动图像。可以把浮动元素想成是被块元素忽略的元素,而内联元素却知道它们在哪里。

3、冻结布局是指,元素的宽度固定,不会随浏览器窗口扩展或手速。

4、凝胶布局实质,元素的宽度固定,但外边距会随着浏览器窗口扩展或收缩。通常会把内容放在中央。需要将margin-left和margin-right属性设置为auto。

5、position属性(定位方式)

可是设置4个值:static、absolute、fixed、relative。

(1)static是默认方式,将元素放在页面的正常流中;

(2)absolute 使用这种定位时,浏览器将该元素从流中完全删除,然后将这个元素放置在top和right属性指定的位置上(也可以用bottom和left指定位置);由于在流之外,其他元素不知道有这样一个元素,它们会将其完全忽略。流中的元素不会将其内联元素围绕在一个绝对定位元素周围。

绝对元素可以分成放置,一个元素可以放在另一个绝对定位元素上面。每个定位元素都有一个名为z-index的属性,会指定在虚拟z轴上的位置(z-index越大,元素越靠近你)。

块元素和内联元素都可以进行绝对定位。

指定元素位置除使用像素外还可以使用百分数。

如果一个绝对定位元素嵌套在另一个定位元素中,这个元素会相对于外包含元素定位。

(3)fixed 固定定位元素总是相对于浏览器窗口定位,页面滚动时它不会移动。

(4)relative 相对定位元素首先正常流入页面,然后按指定的量偏移,从而留出它们原来所在的空间。

使用相对定位时,left、right、top和bottom是指距正常流中该元素位置的偏移量。

6、表格布局

创建表格布局时,需要使用对应表格的一个块元素(display: table),对应行的块元素(display: table-row)和对应单元格的块元素(display: table-cell)通常这些元素都是<div>元素。

border-spacing属性为表格中的单元格增加10像素的边框间距。可以把border-spacing看作是常规元素的外边距。

vertical-align属性控制单元格中的内容对于单元格的对齐方式(top、middle和bottom)。

width控制列的宽度。

转载于:https://my.oschina.net/u/2453016/blog/728762

你可能感兴趣的文章
kafka 安装 单机测试
查看>>
MTTR/MTTF/MTBF图解
查看>>
OpenGl中如何在一个在窗口坐标中固定大小绘图
查看>>
Mac OS X 从零开始系列教程 7 --语言输入法设定
查看>>
Cloudera Hadoop 5.2 安装
查看>>
LAMP架构(apache安装,apache工作原理介绍)
查看>>
Spring整体介绍
查看>>
文字超长用省略号
查看>>
如意云使用经验
查看>>
【转自IT168 应用】面向对象存储所需要知道的十四大问题
查看>>
openfire的配置和逻辑简要
查看>>
Application's Security component
查看>>
用大白话聊聊分布式系统
查看>>
正则表达式集合
查看>>
Plasma Active进入Beta阶段
查看>>
被某出行(原名是某单车)给恶心到了,给你们说说我的故事
查看>>
php-fpm文件描述符pid文件应该让nginx有权限访问才行
查看>>
Mac php版本切换
查看>>
php在nginx下输出缓冲
查看>>
编写一个程序,判断输出一个字符串中大写英文字母数,和小写英文字母数,和其他非英文字母数...
查看>>