有关布局和定位的属性

有关布局的属性

布局与定位属性，主要是用来确定一个页面上的各个盒子（几乎所有标签都是盒子）怎么排布，以及怎么固定在页面所要求的区域和位置。

6.1 布局属性

6.1.1 盒子的显示效果属性 display

含义：

指设置一个盒子（元素，标签）在网页中的基本显示特性，最常见的就是显示为块元素特性还是行内元素特性。

tip：通过这个属性，则所有表现型元素，都可以任意将其作为块元素或者行内元素来使用！

常用的属性值有：

block： 显示为块状元素

inline： 显示为行内元素

block-inline：显示为行内块元素

含义：整体表现为块元素(不会自动折行)，但可以跟其他行内元素并行在一行(表现为行内元素)。

说明：一个img就是典型的行内块元素（它本身不会折行，但一行可以放置多个）。

none：不显示（隐藏元素）

关于元素按显示特性分类：

块状元素：

元素独占“一行”。

典型标签：div, p, h1~h6, pre, hr, ul, ol, li, dl, dt, dd, table。

行内元素：

元素在一行内从左到右“流式显示”，直到碰到行尾，再自动换行下一行显示。

典型元素：span, a, b, strong, i, font, em,

行内块元素：

元素本身不换行（不折断），但只要能显示得下，则一行可以显示多个（跟行内元素一样）。

典型元素：img, input, select, textarea, button, video, audio

特别注意：

1，行内元素不能设置宽高值。行内元素的宽高值由其中的内容多少、文字大小和行高决定。

2，行内元素不能设置上下外边距和上下内边距（实际可以设置，但无效，不占空间）。

3，行内元素可以设置边框，但上下边框不占空间（左右边框会占空间）。

4，行内块和块元素都具有盒子的所有属性，唯一区别是行内块可以多个出现在一行中。

6.1.2 浮动特性 float

浮动就是让一个元素往左或右边“尽量挤靠”，以使其周边文字（行内元素）可以围绕该浮动元素显示。

其典型的表现就是一张图片向左对齐（align=”left”）的时候，图片标签前后的文字都能够绕着图片展示。

浮动属性float的值包括：

left（向左浮动）， right（向右浮动）， none（不浮动）。

语法： float：left； 或 float：right；

6.1.2.1 浮动的特性

1，对行内元素来说：浮动元素会先于同一行中的行内元素而占据其所设定方向的水平空间；

2，对块状元素来说：浮动元素相当于“浮起来了”，块状元素会被浮动元素“遮挡”；

3，多个浮动元素会依次往设定的方向“挤靠”，直到放不下，再往“下一行”，继续“挤靠”；

4，浮动元素往下一行挤靠时，如碰到“突出物”，则会被“卡住”，但仍然按挤靠规则进行显示；

5，浮动盒子失去“垂直支撑力”，表现为不占它外层盒子高度，但仍然有宽度；

6.1.2.2 浮动的清除

当一个盒子内部出现浮动元素，则该盒子不会被该浮动元素“撑高”，也就是说，父盒子失去了理应包住子盒子的高度。

（当然，如果父盒子中有其他非浮动元素撑着，也就具有该其他非浮动元素所应该撑出的高度）

这通常都不符合正常的文档布局的需要——正常的需要就是外层盒子需要包住内层盒子。

怎么办？

——清除浮动。

使用属性clear，有常见的3个值：

clear: left:表示该元素左边不要出现浮动元素；

clear: right：表示该元素右边不要出现浮动元素；

clear:both：表示该元素两边都不要出现浮动元素；——这是最常见的需求（场景）。

所谓清除浮动，其实就是让父盒子中的浮动特性“终止”（结束）。这样父盒子就具有了正常的高度，可以正常包住其内部的浮动盒子。

做法1： 设置父盒子的overflow属性为hidden；

做法2： 在父盒子内部的末尾添加一个“清除浮动”的空盒子。

做法3： 给父盒子的末尾添加一个“清除浮动”的伪元素（:: after）。 ——推荐做法！

6.1.3 溢出浮动 overflow

当一个盒子里面有浮动元素，则：

1，如果该盒子不设置高度，就应该清除浮动。

2，如果该盒子设置了高度，此时就应该考虑溢出时的处理效果！

3，如果该盒子设置了高度，则里面盒子的浮动，清不清除都无关紧要。

含义：

就是设置一个盒子内部的内容，超出了该盒子的设定大小的时候，怎么显示该内容的问题。

overflow常用值有：

auto： 自动，按浏览器的默认设置自动处理，可能各浏览器会有所不同。

scroll： 滚动，就是超出范围的时候，盒子出现滚动条（像浏览器的滚动条那样）。

hidden： 隐藏，就是将超出部分隐藏起来（视觉上不可见）。

visible： 显示，就是虽然，超出去了，但仍然显示出来，这是这个属性的默认值，无需设置。

此时，虽然可能超出外层盒子，但不会影响外层盒子后续的位置（布局）。

6.1.4 可见性属性 visibility

含义：设置元素的可见性。

主要有两个值：① visible： 可见；

​ ② hidden： 隐藏。

特别注意： 设置visibility为hidden，虽然元素不可见了，但元素原本所占的空间仍然存在（效果是一片空白）

对比：设置display为none，也是隐藏，但此时该元素不但不可见，而且不占版面空间。

定位属性

定位就是通过有关定位的属性来明确设定一个盒子的在以下两个方面的位置：

1，在（x,y）平面上所处位置。

2，在高度（z轴）方向的位置（层次）。

这是相对于一个盒子的“自然位置”和“浮动位置”而言的。

自然位置就是所谓的正常的文档流所确定的位置。

浮动位置就是由于浮动的特性而确定的位置。

6.2.1 定位方式属性 position

position用于设定一个元素的位置按什么方式来确定。

通俗说就是设定元素“放在哪个位置”（可由4个定位属性确定：top，left, right, bottom）。

有如下4个值可用：

static： 静态定位（其实就是没有定位）

是一个元素的默认定位方式，也就是一个文档中元素的正常文档流所确定的定位。

对其给定定位位置（top，left, right, bottom）的值无效。

relative：相对定位

相对于其本来应该所处的位置而设定一个相对性定位。

需给定位置（top，left, right, bottom）

absolute：绝对定位

相对于其上层最近的一个非static定位元素而设定的一个绝对性定位。

需给定位置（top，left, right, bottom）；

而如果其所有上级都没有非static 定位元素，就相对于窗口来定位——手册上说的相对于body，是不准确的！

fixed： 固定定位

相对于当前网页窗口而设定的一个绝对性定位。

需给定位置（top，left, right, bottom）。

注意：

1，relative定位虽然会改变元素的位置，但不影响上级盒子和相邻盒子该有的正常宽高和位置。

2，absolute定位和fixed定位的元素脱离了文档流，也就是上级盒子中不会计算其宽高（像没有一样）

6.2.2 定位位置的属性 :top left right bottom

就是对于3种定位方式（relative， absolute， fixed），所给定的具体位置值。

可以是使用距离“上”，“左”，“下”，“右”各多少来定。

比如：

.cc1{
position: absolute;
left: 5px;  top: 10px;
}
​

注意：top和bottom不能同时用；left和right不能同时用！

6.2.3 层叠属性 z-index

含义： 就是将一个元素（盒子）默认情况下所展示在的那个平面（就是屏幕所在面）的垂直线当做z轴方向（就是眼睛盯屏幕时的那个“视线”方向），朝眼睛方向为z轴的正方向。则z-index可以设定一个元素（盒子）在z轴方向的“叠放层次”的高低，用整数表示。越大值表示越高，也就是离眼睛越近，自然就会覆盖住比它低的其他盒子。