CSS笔记之CSS其他属性（七）

七，其他CSS属性

1，浮动和清除

1.1 浮动属性

通过float属性实现元素有浮动，可以让块级元素脱离常规文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行。（对于子元素使用，对于父元素则没用)

常用取值:

• left 左浮动

• right 右浮动

• none 不浮动，默认值

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己的尺寸，通常会在容器末尾添加一个清除了float的空div来解决

1.2 清除属性

通过clear属性实现清除，设置元素的哪一侧不允许有浮动元素，目的是为了和其他浮动元素换行隔开，只对

块级元素有效

常用取值：

• left 左侧不允许有浮动元素

• right 右侧不允许有浮动元素

• both 两侧不允许有浮动元素

• none 允许两侧有浮动元素，默认值

结论：

• 对于非浮动元素，两边都可以设置清除（常用）

• 对于浮动元素，向哪边浮动，就只能设置哪边清除

2.元素的显示和隐藏

2.1 display

通过display属性设置元素是否显示，以及是否独占一行

常用取值：

取值	含义	说明
none	不显示
inline	显示为内联元素，行级元素的默认值	将块级元素变为行级元素，不再独占一行
block	显示为块级元素，行级元素的默认值	将行级元素变为块级元素，独占一行
inline-block	显示为内联元素，但可以设置宽和高	在inline基础上允许设置宽和高（不占一行)

注：行级元素默认无法设置宽和高，可以为行级元素设置display:inline-­block，然后就可以设置宽和高了

2.2 visibility

也可以通过visibility属性设置元素的显示和隐藏

常用属性：

取值	含义	说明
visiable	显示
hidden	隐藏

2.3 区别

• display隐藏时不再占据页面中空间，后面的元素会占用其位置

• visibility隐藏时会占据页面中空间，位置还保留在页面中，只是不显示

3，轮廓属性

3.1 简介

轮廓 outline，用于在元素周围绘制一个轮廓，位于border的外围，可以突出显示元素

3.2 基本用法

常用属性：

• outline-­width 轮廓的宽度

• outline­-color 轮廓的颜色

• outline­-style 轮廓的样式

• outline 简写  与border形式一样

在浏览器中，当鼠标点击或使用Tab键让一个表单或链接获取焦点时，该元素会有一个轮廓 outline

优点：可以提高使用表单的用户体验

缺点：有时会影响美观

3.3 outline 与 border的区别

• border可应用于所有的html元素，而outline主要用于表单元素、超链接等

• 当元素获取焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器的默认行为

• outline不影响元素的尺寸和位置，而border会影响

4.其他属性

4.1 宽高相关

• max­-width 设置元素的最大宽度

• min­-width 设置元素的最小宽度

• max­-height 设置元素的最大高度

• min­-height 设置元素的最小高度

4.2 overflow属性

当元素内容溢出时该如何处理

常用取值：

• visiable 溢出时可见，显示在元素外，默认值

• hidden 溢出的部分不可见（常用）

• scroll 无论是否出现溢出始终出现滚动条

• auto 溢出时自动会出现滚动条

注意:

overflow可以清除浮动。当出现浮动的元素超出容器的范围时，可以使用overflow属性来清除浮动。具体来说，可以在浮动元素的父容器上设置overflow属性为hidden或auto，这样就可以将超出容器范围的浮动元素隐藏，从而达到清除浮动的效果。