CSS 布局

最新推荐文章于 2024-07-12 20:49:16 发布

wyzhang0214

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量108

点赞数

文章标签： css

本文链接：https://blog.csdn.net/wyzhang0214/article/details/115070964

版权

文章目录

正常布局流
弹性布局
网格布局
浮动
定位技术
表格布局
多列布局

正常布局流

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

出现在另一个元素下面的元素被描述为块元素，块元素内容的布局方向被描述为块方向。(块方向在英语等具有水平书写模式(writing mode)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。)出现在另一个元素旁边的元素叫内联元素，就像是段落中的单词一样。对应的内联方向是内联内容(如句子)的运行方向。

使用特定的布局技术会覆盖默认的布局行为：

display属性，设置元素在正常布局流中的表现形式：block，inline，或者inline-block；全新的布局方式：display: grid;(网格布局)，display: flex(弹性布局)。
float属性，这个属性意味着使用块布局，让块级元素互相并排成一行，而不是一个堆叠在另一个上面。float: left;, float:right;, float: none;, float:inline-start(表明元素必须浮动在其所在块容器的开始一侧), float:inline-end;(表明元素必须浮动在其所在块容器的结束一侧)
position属性，可以设置盒子中的盒子的位置，正常布局流中，默认为static，还可以取值relative, absolute, fixed, sticky。
表格布局，display: table;用在非表格内容上。
多列布局， Multi-column layout属性，可以让块按列布局。

弹性布局

Flexbox是CSS弹性盒子布局模块(Flexible Box Layout Module)的缩写，被专门设计出来用于创建横向或者是纵向的一维页面布局。

设置步骤：
通过MDN给出的一个栗子来进行设置

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

在上面的例子中，如果不在wrapper类中设置flex布局，那么三个盒子会从上到下排列。

在想要使用flex布局的父元素上应用display: flex;，所有的直接子元素都会按照flex进行布局。

.wrapper {
  display: flex;
}

现在的效果是排成一行，是因为父元素wrapper上flex-direction的初始值是row。他们全都被拉伸至和最高元素的高度相同，是因为父元素上align-items初始值是stretch。尾部留下空白。
在这里插入图片描述
2. 可以在子元素上添加flex属性，并且赋值为1，会使得所有的子元素都伸展并填充容器，而不会在尾部留下空白，会调整自己占用相同宽度的空间。flex可以指定三个值：flex-grow，无单位比例；flex-shrink,无单位比例，表示从每个flex项中取出多少溢出量，从而阻止溢出；flex-basis，有单位，表示首先给每个项的最小值，剩余空间再按比例分。

.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}

在这里插入图片描述

网格布局

Grid布局被设计用来同时在两个维度上把元素按行和列排列整齐。由一系列水平及垂直的线构成的一种布局模式。

使用display:grid配合其它属性设置，如grid-template-rows和grid-template-columns可以定义行和列的轨道。

简单示例1：

<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
    <div class="box4">Four</div>
    <div class="box5">Five</div>
    <div class="box6">Six</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

在这里插入图片描述

简单示例2：

<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

在这里插入图片描述

浮动

设置float属性，会影响该元素本身和在正常布局流中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动(float)的元素周围环绕。

定位技术

定位(position)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。

静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
相对定位(Relative positioning)允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
绝对定位(Absolute positioning)将元素完全从页面的正常布局流(normal layout flow)中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于该元素的最近被定位祖先元素(nearest positioned ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
固定定位(Fixed positioning)与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位(Sticky positioning)是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位。

需要配合其他属性使用，如top和left。

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

.positioned {
    position: fixed;
    top: 30px;
    left: 30px;
}

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

相对定位：在正常布局流中从它的默认位置按坐标进行相对移动；绝对定位：将元素移出正常布局流，以坐标的形式相对于它的容器定位到web页面的任何位置；固定定位：从正常布局流中移出，坐标的计算是对于视口，而不是容器；粘性定位：首先会以默认的static定位在正常布局流中滚动，直到它出现在给他设定的相对于容器的位置，就会停止滚动，以fixed定位方式存在。

表格布局

一个<table>标签之所以能够像表格那样展示，是由于css默认给<table>标签设置了一组table布局属性。当这些属性被应用于排列非<table>元素时，这种用法被称为“使用CSS表格”。

使用CSS表格来进行布局，也可以说是传统方法，会被用于兼容不支持弹性布局和网格布局的浏览器。

实例：

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age">
  </div>
</form>

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  /下面的两行将表格的标题放到了底部*/
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

在这里插入图片描述

多列布局

要把一个块转变成多列容器(multicol container)，我们可以使用 column-count属性来告诉浏览器我们需要多少列，也可以使用column-width来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。

<div class="container">
    <h1>Multi-column layout</h1>

    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>

</div>

  .container {
        column-width: 200px;
    }

在这里插入图片描述

wyzhang0214

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 布局

文章目录正常布局流弹性布局网格布局浮动定位技术表格布局多列布局正常布局流正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。出现在另一个元素下面的元素被描述为块元素，块元素内容的布局方向被描述为块方向。(块方向在英语等具有水平书写模式(writing mode)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。)出现在另一个元素旁边的元素叫内联元素，就像是段落中的单词一样。对应的内联方向是内联内容(如句子)的运行方向。使用特定的布局技术会
复制链接

扫一扫