百度前端技术学院 第七天学习笔记（CSS 布局）

CSS学习, 百度前端技术学院 本文总阅读量次

display属性

  • display 是CSS中最重要的用于控制布局的属性。
  • 每个元素都有一个默认的 display 值，这与元素的类型有关。
  • 列举一些已经学过的属性值：
属性值 描述
block 一个 block 元素通常被叫做块级元素。
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。
其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
inline 一个 inline 元素通常被叫做行内元素。
span 是一个标准的行内元素, a 元素是最常用的行内元素。
inline-block 它可以让内联的盒子像一个块元素，使元素在一行显示，仍然保持样式可设置
flex 用于设置元素为弹性盒子的父容器
none 一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
  • 每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

max-width属性更好地处理小窗口情况

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        #main {
            max-width: 600px;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="main">
        设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
        唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
    </div>
</body>

例子
可以看到缩小窗口以后下方的水平滚动条：
注意窗口下方的水平滚动条
使用 max-width 替代 width 使用 max-width后可以注意到缩小窗口后也不会出现水平滚动条:
使用 `max-width`后

替代盒模型注意事项

box-sizing是个很新的属性，目前应该像下面例子中那样使用 -webkit- 和 -moz-前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

1
2
3
4
5
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

position属性与CSS<footer>标签（页脚）

  • 如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！比如：在 body 上面加上足够的 margin-bottom 。
  • 例子

float属性

Float 可用于实现文字环绕图片，如下：

1
2
3
4
img {
  float: right;
  margin: 0 0 1em 1em;
}

效果图

nav元素与float属性

这个例子在容器比nav元素高的时候可以正常工作。如果容器比nav元素低，那么nav会溢出到容器的外面。
nav改用浮动以后可以解决易出问题。

响应式设计——媒体查询

  • MDN 媒体查询
  • 一个例子：当屏幕宽度大于600px时执行的CSS样式表与小于599px时执行的CSS样式表有所不同，当窗口缩小到宽度小于599px时，nav中的li元素就会转变为行内元素并出现在section元素上方。

vertical-align属性设置行内元素垂直方向对齐方式

  • vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
  • 注意： vertical-align 只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素。
  • 作用于行内元素的属性值（分为“相对父元素的值”和”相对行的值”）：
    相对父元素的属性值 描述（这些值使元素相对其父元素垂直对齐）
    baseline（默认值） 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如<textarea> ，这意味着这些元素使用此值的表现因浏览器而异。
    sub 使元素的基线与父元素的下标基线对齐。
    super 使元素的基线与父元素的上标基线对齐。
    text-top 使元素的顶部与父元素的字体顶部对齐。
    text-bottom 使元素的底部与父元素的字体底部对齐。
    middle 使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
    <length> 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
    <percentage> 使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。
相对行的属性值 描述(下列值使元素相对整行垂直对齐)
top 使元素及其后代元素的顶部与整行的顶部对齐。
bottom 使元素及其后代元素的底部与整行的底部对齐。
没有基线的元素，使用外边距的下边缘替代。

vertical-align属性可被用于两种环境：

  1. 使行内元素盒模型与其行内元素容器垂直对齐。例如，**用于垂直对齐一行文本的内的图片<img>**：
    不同属性值的对应效果
  2. 垂直对齐表格单元内容:
    不同属性值的对应效果

MDN vertical-align属性

inline-block属性值可方便创建网格

这种效果

  • 想要创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float ，但是使用 display:inline-block; 会更简单。
  • 让我们看下使用这两种方法的例子对比

注意：

  1. vertical-align 属性（默认值为baseline）会影响到 inline-block 元素，你可以把它的值设置为 top（使元素及其后代元素的顶部与整行的顶部对齐） 。（例子）
  2. 你需要设置每一列的宽度
  3. 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
  • 你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的就可以了。如果你对此很感兴趣，可以在这个链接中找到更详细的信息。

columns属性轻松实现文字的多列布局

  • CSS columns是很新的标准，所以你需要使用前缀（如下方例子中），并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。
  • 一个例子
  • MDN 关于columns属性

使用flexbox居中布局

  • 同时在父容器设置align-items: center;（沿交叉轴居中）与justify-content: center;（沿主轴居中）可以使子项元素在父容器中居中。
  • 例子

布局模型

1. 流动模型（Flow） [默认的]
流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：

  1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
  2. 在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。

2. 浮动模型 (Float)
使用CSS的float属性。

3. 层模型（Layer）
层模型有三种形式：

  1. 相对定位(position: relative)
  2. 绝对定位(position: absolute)
  3. 固定定位(position: fixed)
    注意：固定定位是相对视图定位，不会随着滚动条的操作而移动位置。而绝对定位相对于其最接近的一个非默认position属性值的父元素进行定位，在父元素全部是默认position属性值时则是相对body元素（即相对于浏览器窗口）进行定位，会随着滚动条的操作而移动位置。【注意区分“视图”与“浏览器窗口”】

注意：
更改堆叠顺序的z-index属性只适用于定位元素（position属性值为 static的对象不是定位元素）
父子元素都设置z-index属性时只要父元素z-index属性生效则子元素z-index属性不生效，默认与父元素属性值相等并按照文档流排列，子元素出现在父元素上方。（父元素未设置position属性值或设为默认值 static时z-index属性失效，则子元素z-index属性生效）

什么时候用定位，什么时候用浮动

float被设计出来的初衷是用于——文字环绕图片

float是部分脱离文档流，而absolute是完全脱离文档流。
也就是说，使用float属性时，其他元素会无视这个float元素，但是其他元素内的文本依然会为这个元素让出位置，环绕在周围，所以称为部分无视。
而使用absolute脱离文档流的元素，其它盒子无论是本身还是盒子内的文本都会无视这个元素，也就是完全脱离文档流。

float多个特性

具体例子请参考这个链接

  1. 破坏性：被设置了float的元素会脱离文档流
  2. 包裹性：块级元素设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
  3. 清空格：根本原因是由于float会导致节点脱离文档流结构,float元素都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

float具有“破坏性”，它会导致父元素“坍塌”（即父元素无法包裹float子元素），此时可以为父元素添加overflow:hidden,这样父元素就有高度了 ，父元素的高度便不会被破坏。

网页布局方式

网页实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块。
三种关系：相邻，嵌套，重叠。
参考

一列布局（固定宽高，水平居中）

一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等:

1
2
3
4
5
6
7
        .main{
            width: 200px;
            height: 100px;
            background-color: grey;
            margin: 0 auto;
        }
<div class="main"></div>

两列布局（常用float）

  • 最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，需要及时清除浮动。
  • 设置左左浮动，或设置左右浮动（需要设置父元素的宽度）
  • 如果父级元素没有设置高度，则需要设置overflow:hidden/display:flow-root创建BFC/display:flow-root创建BFC避免父元素“高度坍塌”。
    • 当一个父元素的子元素设置了浮动或者绝对定位时，父元素的高度可能会丢失，从而导致所谓的“高度坍塌”问题。这是因为浮动或者绝对定位的元素脱离了文档流，不再占据父元素的空间，导致父元素无法自动计算出正确的高度。
    • 通过设置 overflow:hidden，可以触发 BFC（块级格式化上下文）的生成，从而使得父元素包含其浮动或绝对定位的子元素。BFC是一种渲染区域，其中的元素布局是相互独立的，不会影响到外部元素。当父元素生成了BFC后，其高度将被计算为包含其子元素的高度，从而避免了高度坍塌问题。
    • 因此，使用 overflow:hidden 可以有效避免父元素高度坍塌问题。但需要注意的是，这也可能导致溢出内容被隐藏，需要根据实际情况进行权衡和选择。**display:flow-root可以创建无副作用的BFC**
1
2
3
4
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.main{
    width: 400px;
    background: red;
    overflow: hidden;
}
.left{
    background: yellow;
    float: left;
}
.right{
    background: green;
    float: left;
}

效果图

三列布局（浮动或子绝父相）

浮动：
首先设置父级元素的宽度（width: 100%;overflow: hidden;）

  1. 可以左左右设置浮动。然后中间设置margin调整间距。
  2. 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动！

子绝父相：
为父元素设置relative属性，再为子元素设置absolute属性，再分别定位，调间距。

混合布局

在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。

对齐方式

水平居中

补充：img是行内元素，为什么可以设置框高？（面试题）

（题目来自魅族一面）
问题：既然img是行内元素，那为什么可以通过CSS设置框高呢？
答案：尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。

引申问题：那么什么又是“置换元素”呢？
答案：置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理select也是置换元素。

行内元素的水平居中

  • 注意：text-align 属性虽然规定元素中的文本的水平对齐方式，但他是作用于块级元素的（p/h1等等）。
  • 如果被设置元素为文本、图片等行内元素时，则需要**在父元素中设置text-align:center**实现行内元素水平居中（必要时可以将子元素的display设置为inline-block，使子元素变成行内元素的同时可设置样式）。

补充：图片等比缩小可借助max-width和max-height

1
2
3
4
5
6
7
8
9
10
11
12
.dad {
    text-align: center;
}
img {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
}
p{
    text-align: center;
}
1
2
3
4
5
6
7
<div class="dad">
    <img src="../上校.jpg">
</div>
<div class="dad">
    <span>上校</span>
</div>
<p>喵呜</p>

效果图

CSS学习, 百度前端技术学院