css 布局常用属性

CSS 布局常用属性主要包括 display、position 和 float，它们在控制元素显示方式、定位机制和浮动行为方面起着关键作用。以下是对这些属性的详细归纳：

1. display 属性

display 属性定义了元素生成的显示框类型，常见的属性值包括：

block：元素显示为块级元素，会独占一行，可以设置宽高、内边距、外边距等盒模型属性。如 div 标签的默认 display 属性就是 block。
inline：元素显示为行内元素，不会独占一行，只会占领自身宽高所需要的空间。给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用。如 span 标签的默认 display 属性就是 inline。
inline-block：元素既具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性。
inherit：元素从父元素继承 display 属性值。
none：元素不显示，也不占用空间位置。
flex：用于 flex 布局，但在此不详细展开。

2. position 属性

position 属性用于定义元素的定位机制，常见的属性值包括：

static：默认值，元素正常出现在文档流中，top、right、down、left 无效，可以设置 margin 来移动。
relative：相对定位，相对于元素的正常位置进行定位，不脱离文档流，top、right、down、left 可能会遮挡附近元素，一般使用 margin 来移动。
absolute：绝对定位，相对于除 static 定位以外的元素进行定位，会一直往上查找，直到找到非 static 定位的元素或者浏览器窗口进行定位，脱离文档流，一般用 top、right、down、left 来移动，也可以设置 margin。
fixed：固定定位，相对于浏览器窗口进行定位，常用于实现网站中的固定 header 和 footer。

3. float 属性

float 属性定义元素在哪个方向浮动，常用属性值有 left 和 right，即向左浮动和向右浮动。设置了 float 的元素会脱离文档流，然后向左或向右移动，直到碰到父容器的边界或者碰到另一个浮动元素。块级元素会忽略 float 元素，文本和行内元素却会环绕它。

当子元素设置浮动属性后，可能会导致父元素的高度塌陷，即父元素的宽高不会被子元素的内容撑开。解决这个问题的方法包括使用 after 伪元素法或 overflow 法来清除浮动。

总结

CSS 布局常用属性 display、position 和 float 在控制元素显示方式、定位机制和浮动行为方面起着关键作用。通过合理运用这些属性，可以实现各种复杂的页面布局效果。

热门标签