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
或hidden
visibility: 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 }