Internet学习记录：三件套_CSS布局_display三件套-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49564079/article/details/115563281

没有布局

如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离
在解决这个问题之前，我们需要了解一个很重要的属性： display

"display"属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block 或 inline
一个block 元素通常被叫做块级元素
一个inline 元素通常被叫做行内元素

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器
其他常用的块级元素包括p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等

inline

span 是一个标准的行内元素。一个行内元素可以在段落中像这样包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接

none

另一个常用的display值是none 。一些特殊元素的默认display 值是它，例如script。display:none 通常被JavaScript 用来在不删除元素的情况下隐藏或显示元素
它和visibility 属性不一样。把display 设置
成none 元素不会占据它本来应该显示的空间，但是设置成visibility: hidden; 还会占据空间

其他display 值

还有很多的更有意思的display 值，例如 list- item 和 table 。这里有一份详细的列表
之后我们会讨论到 inline-block 和flex
每个元素都有一个默认的display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单

margin: auto;

#main { width: 600px; margin: 0 auto; }
设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面

max-width

#main { max-width: 600px; margin: 0 auto; }
在这种情况下使用 max-width 替代width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧

盒模型

在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样

box-sizing

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做box-sizing 的CSS属性。当你设置一个元素为box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了box-sizing: border-box;
既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

这样可以确保所有的元素都会用这种更直观的方式排版

position

为了制作更多复杂的布局，我们需要讨论下position 属性。它有一大堆的值：
.static { position: static; }
static 是默认值。任意position: static; 的元素不会被特殊的定位。一个static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”
为了制作更多复杂的布局，我们需要讨论下position 属性。它有一大堆的值：
- relative
  - .relative1 { position: relative; }
  - .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; }
- fixed
  - .fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }
  - 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative 一样， top、right、bottom和 left 属性都可用
  - 注意页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：
- absolute
  - absolute 是最棘手的position值。absolute与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是static 的元素
  - .relative { position: relative; width: 600px; height: 400px; }
  - .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }

position例子

通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局

.container { position: relative; }
nav { position: absolute; 
left: 0px; 
width: 200px; }
section {
/* position is static by default */
margin-left: 200px; }
footer { position: fixed; 
bottom: 0; left: 0; 
height: 70px; 
background-color: white; 
width: 100%; }
body { margin-bottom: 120px; }

float

另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：

clear

clear 属性被用于控制浮动。比较下面两个例子：

<div class="box">...</div> <section>...</section>
.box { float: left; width: 200px; height: 100px; margin: 1em; }

<div class="box">...</div> <section>...</section>
.box { float: left; width: 200px; height: 100px; margin: 1em; }
.after-box { clear: left; }

清除浮动（clearfixhack）

在使用浮动的时候经常会遇到一个古怪的事情
img { float: right; }

浮动布局例子

百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果

百分比宽度布局

你可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时nav 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式
nav { float: left; width: 25%; }
section { margin-left: 25%; }

媒体查询

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：

@media screen and (min-width:600px) {
nav { float: left; width: 25%; } 
section { margin-left: 25%; }}
@media screen and (max-width:599px) {
nav li { display: inline; } }

inline-block

创建很多网格来铺满浏览器，在过去很长的一段时间内使用float 是一种选择，但是使用 inline- block 会更简单
用display 属性的值 inline-block 来实现相同效果

inline-block 布局

可以使用 inline-block 来布局。有一些事情需要牢记：
vertical-align 属性会影响到 inline-block 元素，可能会把它的值设置为 top 。
需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

column

可以很轻松的实现文字的多列布局

 .three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em; column-count: 3;
column-gap: 1em; }