CSS布局常用属性介绍

不良帅.

已于 2024-07-28 14:57:55 修改

阅读量381

点赞数 8

文章标签：前端 css

于 2024-07-27 17:24:14 首次发布

本文链接：https://blog.csdn.net/m0_75116965/article/details/140738352

版权

css布局属性介绍

块元素可以设置盒模型的全部样式，但会独占一行
通过设置display:inline-block来满足行内元素和块级元素的特点
- 元素会像行内元素一样排列，默认宽度由行内元素决定
- 可以像块级元素一样设置宽度和高度，并且可以包含块级元素。

overflow属性用于元素内容太大，无法容纳在指定区域时候，是否要裁剪内容或添加滚动条

若希望对水平和垂直方向溢出设置不同属性，可通过设置overflow-x、overflow-y

若要示意读者：内容不全可以点击查看详细内容

.test_txt{
    overflow:hidden;
    white-space:nowrap /*设置文本内容只在一行显示*/
    text-overflow:ellipsis;/*溢出的文本内容用省略号*/
}

添加 float浮动属性，使目标元素脱离文档流，如图所示浮动

float常用属性有：left、center、right，均仅在水平左右浮动

方法1.overflow:auto：对于浮动超出边界的元素，父元素可以自动的做调整

方法2.clear属性，用于不希望某个元素受前面浮动元素影响时使用

常用属性：left、right、both表示元素不受到左、右、左右浮动影响

设置属性position实现各种定位，以下是常用属性值

relative：相对定位
- 需要配合left、top、right、bottom这些定位属性才能生效
- relative相对的是容器自身的屏幕坐标(0,0)点
- 容器位置发生位移后，原来占据的空间依然保留
- 默认会覆盖没有定位的容器
absolute：绝对定位
- 使用后脱离文档流
- 默认情况下，绝对定位的参照点是body元素的坐标起始点
- 绝对定位的参照点为，有定位设置(static定位除外)的离他最近的祖先元素的(0,0)点坐标
- 默认会覆盖没有定位的容器
fixed：固定定位
- 固定定位的元素是相对与浏览器视口定位的，这意味着即使页面发生滚动，它也始终保持在同一位置
- left、top、right、bottom属性被用来定位元素，但不是必须的
sticky：黏性定位
- 父元素不能添加overflow:hidden或者overflow:auto属性
- 元素自身必须声明left、top、right、bottom一个或多个属性，否则就相当于静态定位了，这里设置的位置值并不是该元素初始位置，而是滚动页面时当达到基于父元素的此位置值时生效
- 父元素的高度不能低于sticky定位元素的高度
- sticky定位元素仅在其父元素内生效
static：静态定位，默认值