CSS布局技巧实践 | 青训营

用户2498662493669
48 阅读4分钟

CSS布局技巧实践 | 青训营

CSS盒子模型

CSS盒子模型是CSS布局的基础概念之一。CSS盒子模型将每个HTML元素看作是一个矩形的盒子，这个盒子由四部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

  • 内容（Content）：盒子中实际显示内容的部分，大小可以通过width和height属性进行设置。
  • 内边距（Padding）：内容周围的空白区域，可以用来设置元素内容和边框之间的距离，大小通过padding-top、padding-right、padding-bottom和padding-left属性进行设置。
  • 边框（Border）：内边距和内容之间的边界线，可以通过border属性设置边框的样式、粗细、颜色等。
  • 外边距（Margin）：盒子与其他盒子之间的空白区域，可以用来设置元素与其他元素之间的距离，大小通过margin-top、margin-right、margin-bottom和margin-left属性进行设置。

布局方式

非常简单，传统的盒子模型并不能满足网页的需求，所以需要加上一些布局方式来使得页面能够更加自由以达到设计者的预期效果。

浮动布局

浮动的特点

浮动常用来做PC端网站布局。 语法：

  • float: left 左浮动
  • float: right 右浮动

浮动的作用：让块元素水平排列

浮动解决了直接使用行内块布局的一些问题：

  • 块元素换行有空格
  • 块内容可能非顶线对齐
  • 屏幕适配差

清除浮动

默认在html标准流中，父元素大小可以由子元素撑开

然而，一旦子元素全部设置了浮动，就不能再撑开父元素

如果父元素没有设置高度，那么高度就是0，这将导致后面的元素上移，页面布局错乱

这时就要用到清除浮动 （清除浮动带来的影响，让父元素高度可以由内容撑开）

清除浮动的三种方法

1. 额外标签法

在父元素末尾添加新的块级子元素：

<div style="clear: both"></div>

2. overflow属性

给父元素添加 overflow: hidden; 属性，实现BFC

3. 单双伪元素法【常用】

给父元素添加 clearfix 类，然后利用伪元素清除浮动：

/* 单伪元素法 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

定位布局

通过设置position属性实现，能够实现横向多列布局及较为复杂的定位

拥有3种定位形式：

  1. 静态定位
  2. 相对定位
  3. 绝对定位

可设置4个属性值：

  1. static 静态定位
  2. relative 相对定位
  3. absolute 绝对定位
  4. fixed 固定定位
  • absolute和fixed都属于绝对定位形式
  • 静态定位是元素没有设置position定位的默认状态，元素还处于标准文档流中

相对定位

特点：

  1. 相对于自身原有位置进行偏移
  2. 相对定位的元素仍处于标准文档流中，会占据标准文档流的空间 
    （元素仍然保持其未定位前的形状，它原本所占的空间仍保留）
  3. 随即拥有偏移属性和z-index属性 
    （元素仍然保持其未定位前的形状，移动元素会导致它覆盖其他框）
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>绝对定位布局</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .div1{
            background-color: red;
            height:130px;
        }
        .div2{
            background-color: blue;
            height:150px;
            position:relative;
            top:50px;
            left:20px;
        }
        .div3{
            background-color: green;
            height:130px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

蓝块被设置相对定位后，相对自身原有位置进行偏移，原本所占的空间仍保留，并且浏览器会出现滑块。

绝对定位

特点：

  1. 相对于其包含块进行偏移 
    （包含块可能是文档中的另一个元素或者是初始包含块）
  2. 脱离标准文档流，不占据空间 
    （原先在标准文档流中所占的空间会关闭，好像该元素原来不存在）
  3. 随即拥有偏移属性和z-index属性 
    （不论原来它在正常流中生成何种类型的框，元素定位后生成一个块级框）

相对定位和绝对定位在标准文档流上的区别：

  1. 相对定位元素仍处于标准文档流中，占据空间
  2. 绝对定位元素脱离标准文档流，不占据空间

弹性盒子布局

Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式

（1）在不同方向排列元素

（2）重新排列元素的显示顺序

（3）更改元素的对齐方式

（4）动态的将元素装入容器

avatar
文章
阅读
粉丝