learning website——菜鸟教程
16. 尺寸（Dimension）
CSS 尺寸 (Dimension) 属性允许控制元素的高度和宽度。同样，允许增加行间距
height: 设置元素的高度line-height: 设置行高max-height: 设置元素的最大高度max-width: 设置元素的最大宽度min-height: 设置元素的最小高度min-width: 设置元素的最小宽度width: 设置元素的宽度
17. 显示(Display)和可见性（Visibility）
-
隐藏元素 -
display:none或visibility:hidden对于 CSS 里的
visibility属性，通常其值被设置成visible或hiddenvisibility: hidden相当于display:none，能把元素隐藏起来，但两者的区别在于：display:none元素不再占用空间visibility: hidden使元素在网页上不可见，但仍占用空间
visibility还可能取值为collapse当设置元素
visibility: collapse后，一般的元素的表现与visibility: hidden一样，即其会占用空间。但如果该元素是与 table 相关的元素，例如table row、table column、table column group等，其表现却跟display: none一样，也即其占用的空间会释放 -
块和内联元素
- 块元素是一个元素，占用了全部宽度，在前后都是换行符 ，如
<h1><p><div> - 内联元素只需要必要的宽度，不强制换行，如
<span><a>
- 块元素是一个元素，占用了全部宽度，在前后都是换行符 ，如
-
改变元素属性
display:block– 显示为块级元素display:inline– 显示为内联元素display:inline-block– 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
18. 定位（Position）
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性
-
static 定位
-
HTML 元素的默认值，即没有定位，遵循正常的文档流对象
-
静态定位的元素不会受到 top, bottom, left, right影响
-
-
fixed 定位
-
元素的位置相对于浏览器窗口是固定位置 ，即使窗口是滚动的它也不会移动
-
Fixed定位使元素的位置与文档流无关，因此不占据空间 -
Fixed定位的元素和其他元素重叠
-
-
relative 定位
-
相对定位元素的定位是相对其正常位置 ，移动相对定位元素，但它原本所占的空间不会改变
-
相对定位元素经常被用来作为绝对定位元素的容器块
-
-
absolute 定位
-
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html> -
absolute定位使元素的位置与文档流无关，因此不占据空间 -
absolute定位的元素和其他元素重叠
-
-
sticky 定位
-
position: sticky;基于用户的滚动位置来定位 ，在position:relative与position:fixed定位之间切换 -
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位 ；它的行为就像
position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置
-
-
重叠的元素
-
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
-
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） -
一个元素可以有正数或负数的堆叠顺序
-
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
注意： 如果两个定位元素重叠，没有指定
z - index，最后定位在HTML代码中的元素将被显示在最前面 -
-
More
-
裁剪元素的外形
clip:rect(0px,60px,200px,0px); -
overflow属性
<span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br>
-
19. 布局（Overflow）
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意： overflow 属性只工作于指定高度的块元素上
20. 浮动（Float）
-
元素浮动
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动 ， 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 浮动元素之前的元素将不会受到影响 ， 浮动元素之后的元素将围绕它
-
彼此相邻的浮动元素
如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
Ex ：对图片廊使用float属性
.thumbnail { float:left; width:110px; height:90px; margin:5px; } -
清除浮动
clear 属性：指定元素两侧不能出现浮动元素
.text_line { clear:both; //值：left,right,both,none,inherit }