CiCi喜之郎

小白入门之HTML--第六章流动，浮动模型，菜单和页面布局

1.本章面试题

1.1 什么是流动模型

1.2 网页中基本的布局方式有哪些

2.知识点

2.1 上一章内容回顾

上一章我们学习了网页元素的基本分类和盒子模型。

2.2 本章内容重点

本章主要学习网页定位模型和基本布局。

3.具体内容

3.1 CSS定位属性

CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属性进行定位。

3.1.1 正向流向

正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。

换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。

在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行内元素盒子则会按照由左至右的顺序排列。




正常流向


            
div1

    div2
    b元素1
    b元素2
    b元素3

div3

3.1.2 定位偏移属性top、bottom、right、left

基本语法：

top: auto | 长度 | 百分比;
bottom: auto | 长度 | 百分比;
right: auto | 长度 | 百分比;
left: auto | 长度 | 百分比;

语法说明：

auto：无特殊定位，根据HTML定位规则在文档流中分配。
长度：用长度值来定义偏移量，可以为负值。
百分比：用百分比来定义偏移量，百分比参照包含块的高度，可以为负值。

3.1.3 定位方式position

定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。

基本语法：

position : static | relative | absolute | fixed | center | page | sticky;

1.相对定位

静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。

相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通常需要top、bottom、right、left属性配合完成，设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占的空间仍保留，元素移动后可能会覆盖其它元素。

相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。




相对定位


            
div1

    div2
    b元素1
    b元素2
    b元素3

div3

2.绝对定位

绝对定位absolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子偏移位置不影响常规文档流中的任何元素。

绝对定位的盒子不存在正常流向问题，也不会影响到正常流向中的其它BOX。




绝对定位


            
div1

    div2
    b元素1
    b元素2
    b元素3

div3

3.固定定位

固定定位fixed，与absolute一致，偏移量定位一般以窗口为参考，当出现滚动条时，对象不会随着滚动。元素原有位置空间不保留，对象脱离常规流。

固定定位是绝对定位的一个子类，唯一的区别是对于连续介质，固定BOX并不随着文档的滚动而移动，类似于固定的背景图像。对于分页介质，固定定位BOX在每页中重复，当需要在每一放置同一个内容时（例如在底部放置一个签名），这个方法非常有用。




固定定位


            
页眉
侧栏
主体内容
页脚

4.吸附定位sticky

sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实中我们见到的吸附效果。

sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外边时，则会表现出fixed的吸附效果。




吸附定位


            
div1
div2
div3

3.1.4 分层呈现z-index

基本语法：

z-index: auto | 数字;

语法说明：

auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
数字：用整数值来定义堆叠级别。z-index的值越小，表明该BOX层级越低，堆叠发生时处于下层，反之则处于上层。如果两个元素的z-index一样，则按照出现的先后顺序来决定，出现较晚的元素堆叠在上层。




堆叠次序


            
div1
div2
div3

3.1.5 裁切clip

基本语法：

clip：auto | 
：rect(|auto |auto |auto |auto)

语法说明：

auto：默认，不裁剪。
rect(|auto |auto|auto|auto)：依据上-右-下-左的顺序提供以对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
上-左”方位的裁剪：从0开始剪裁直到设定值，即“上-左”方位的auto值等同于0；“右-下”方位的裁切：从设定值开始裁切直到最右边和最下边，即“右-下”方位的auto值为盒子的实际宽度和高度。




裁切



未被裁剪的效果
被裁切后的效果

3.2 CSS布局属性

CSS布局（Layout）属性控制已应用CSS样式规则的HTML元素与页面上的其它元素进行交互。例如，隐藏元素、设置元素的浮动效果、设置溢出属性确定滚动条能否出现等。

3.2.1 可见性visibility

基本语法：

visibility: visible | hidden | collapse;

语法说明：

visible：元素可见。
hidden：元素隐藏，但元素保留其占据的原有空间，影响页面的布局。
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其它内容使用。对于表格外的其它对象，其作用等同于hidden。

3.2.2 溢出overflow

基本语法：

overflow：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;
overflow-x：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;
overflow-y：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;

语法说明：

visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：无论是否溢出都出现滚动条。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body元素和textarea的默认值。
page-x、page-y、page-x-controls、page-y-controls和fragments属性值都是CSS3新增，目前主流浏览器均不支持，不做详述。




溢出


            

守得莲开结伴游。
约开萍叶上兰舟。
来时浦口云随棹，

采罢江边月满楼。
花不语，水空流。
年年拚得为花愁。

明朝万一西风动，
争向朱颜不耐秋。
  

守得莲开结伴游。
约开萍叶上兰舟。
来时浦口云随棹，

采罢江边月满楼。
花不语，水空流。
年年拚得为花愁。

明朝万一西风动，
争向朱颜不耐秋。


守得莲开结伴游。
约开萍叶上兰舟。
来时浦口云随棹，

采罢江边月满楼。
花不语，水空流。
年年拚得为花愁。

明朝万一西风动，
争向朱颜不耐秋。


守得莲开结伴游。
约开萍叶上兰舟。
来时浦口云随棹，

采罢江边月满楼。
花不语，水空流。
年年拚得为花愁。

明朝万一西风动，
争向朱颜不耐秋。

3.2.3 显示display

基本语法：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box| flexbox | inline-flexbox| flex| inline-flex;

语法说明：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。
inline：指定对象为内联元素。block：指定对象为块级元素。list-item：指定对象为列表项目。inline-block

指定对象为内联块元素。table：指定对象作为块元素级的表格。类同于html标记

。

inline-table：定对象作为内联元素级的表格。类同于html标记

。

table-caption：指定对象作为表格标题。类同于html标记

。

table-row-group：指定对象作为表格行组。类同于html标记

。

table-column：指定对象作为表格列。类同于html标记

。

table-column-group：指定对象作为表格列组显示。类同于html标记

。

table-header-group：指定对象作为表格标题组。类同于html标记

。

table-footer-group：指定对象作为表格脚注组。类同于html标记

。

run-in：CSS3新增关键字，根据上下文决定对象是内联对象还是块级对象。

box：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最老版本）

inline-box：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最老版本）。

flexbox：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒过渡版本）。

inline-flexbox：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）。

flex：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最新版本）。

inline-flex：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）。




display构造的table




    学生信息表
    
        
            学号
            姓名
            年龄
        
    
    
        
            201677001
            袁天一
            19
        
        
            201677002
            马丽娜
            18
        
        
            201677003
            侯雨欣
            20

3.2.4 浮动float

基本语法：

float: none | left | right

语法说明：

none：设置元素不浮动；
left：设置元素浮在左边；
right：设置元素浮在右边。

3.2.5 清除clear

基本语法：

clear: none | left | right | both;

语法说明：

none：允许两边都可以有浮动元素。
both：不允许有浮动元素。
left：不允许左边有浮动元素。
right：不允许右边有浮动元素。




清除浮动



     

H1左浮动
H2左浮动
H3右浮动
H4不浮动

     

H1左浮动
H2左浮动
H3右浮动
段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。

     

H1左浮动
H2左浮动
H3右浮动
H4不浮动，清除两侧浮动

     

H1左浮动
H2左浮动
H3右浮动
段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。