[这是我参与「第四届青训营 」笔记创作活动的第8天 ]
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值:
| visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
|---|---|
| hidden | 内容会被修剪,并且其余内容是不可见的。 |
| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值 |
overflow: visible
默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
清除浮动 - 使用 clear
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
元素居中对齐
要水平居中对齐一个元素(如
), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度,并将两边的空外边距平均分配:
文本居中对齐
如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
左右对齐 - 使用定位方式
我们可以使用 position: absolute; 属性来对齐元素:
左右对齐 - 使用 float 方式
我们也可以使用 float 属性来对齐元素: