百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页？

一、

在项目源代码页面链接前缀那加上 http://htmlpreview.github.com/? 举个例子:
需要打开的项目页面 https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html
给加上前缀 http://htmlpreview.github.com/?
最终链接 http://htmlpreview.github.io/?https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html

二、

GitHub & BitBucket HTML Preview
把github中html文档的链接直接复制进去，就可以了。

盒子显示类型

　　常见的显示类型

　　display 可以有很多种不同的值, 其中三种常见的值为 block, inline（行内元素设置宽高以及margin/padding-top/bottom无效）, 和 inline-block。

　　不常见的显示类型

　同时， display 属性也有一些不常用的值，这些值通常是为了使创建网页/网页应用更简单而被创造出来。最被关注的有这些: 　　

display: table — 允许你像处理table布局那样处理非table元素，而不是滥用HTML的<table>标签来达到同样的目的。
display: flex — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
display: grid — 给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架。

CSS布局

浮动
定位
CSS 表格
弹性盒子
网格

1. 正常布局（文档流布局）

正常的布局模式即为文档流的默认渲染模式
元素按照其在 HTML 中的先后顺序自上而下布局
行内元素水平排列，直到行被占满然后换行
块级元素则会被渲染为一个完整的新行
所有元素默认的布局方式都是普通流

2. 浮动布局

浮动布局主要依赖 float 属性，可以设置的值为 left 和 right，代表浮动的元素会脱离文档流并向左或向右浮动，直到碰到父元素或者另一个浮动元素

浮动的元素类似于 inline-block，具有内联的性质，且可以设置宽高

浮动的元素会脱离文档流，也就是浮动的元素不会影响普通元素的布局，不会占据文档流的位置，所以会导致父元素高度坍塌

为了解决父元素高度坍塌的问题，需要 清除浮动

2.1. 清除浮动

2.1.1. 父级定义高度

原理：父级定义固定高度，以此解决父级无法自动获取高度的问题
优点：简单，代码少，浏览器支持好
缺点：只适合父级与子级高度固定的布局，需要给出精确的高度
建议：只建议高度固定的布局时使用

2.1.2. 结尾处添加空标签并清除浮动

原理：在父级内的结尾处添加一个空 DIV，利用 CSS 的 clear: both; 来清除浮动，让父级能自动获取到高度
优点：简单，代码少，浏览器支持好
缺点：需要额外增加节点
建议：是以前主要使用的清除浮动方法

2.1.3. clearfix 清除浮动类

.clearfix::after {
  content: "";
  display: block; height: 0; clear: both; visibility: hidden; }

原理：为父级的伪元素（::after）清除浮动
优点：浏览器兼容好
缺点：代码多，理解困难
建议：推荐使用，建议提供公共类 clearfix 作为清除浮动使用

2.1.4. 父级定义溢出隐藏

原理：必须定义 width，同时不能定义 height，浏览器会自动检查浮动区域的高度
优点：简单，代码少
缺点：不能和 position 配合使用，因为超出的尺寸会被隐藏
建议：只推荐没有使用 position 和不涉及 overflow 的场景

3. 定位布局

3.1 静态定位

　　静态定位是每个元素获取的默认值

3.2 相对定位

　　相对定位是我们将要看的第一个位置类型。它与静态定位非常相似，占据在正常的文档流中，包括让它与页面上的其他元素重叠。

3.3 绝对定位

　　相对自身第一个非 static 定位的父元素定位（定位上下文——绝对定位的元素相对于其定位的元素）

　　特点：脱离文档流--不占据页面空间

3,4 固定定位　　

　　相对浏览器视口定位

4. 弹性盒子

在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同

CSS实现强制不换行、自动换行、强制换行

强制不换行
p { white-space:nowrap; }

自动换行
p { word-wrap:break-word; word-break:normal; }

强制英文单词断行
p { word-break:break-all; }

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
span { display:block; }

块状元素的流体特性与自适应布局

流体特性
块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄。

流体特性不仅可以实现两栏自适应效果，多栏自适应效果也不在话下。然而利用块状元素流体特性实现的自适应布局有个不足，就是，我们需要知道浮动或绝对定位内容的尺寸。没法单纯使用一个公用的类名，类似.clearfix这样，整站通用。因为不同自适应场景的留白距离是不一样的。

元素的BFC特性与自适应布局

BFC 定义

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，并且与这个区域外部毫不相干。

什么时候会触发BFC呢？常见的如下：

body根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC 的特性及应用：

外边距折叠
- 同一个 BFC 下外边距会发生折叠
- 如果想要避免外边距的折叠，可以将其放在不同的 BFC 容器中
阻止元素被浮动元素覆盖

margin 越界问题

当父元素没有边框时，第一个子元素的 margin-top 和最后一个子元素的 margin-bottom 会被加在父元素上

解决方式：

给父元素加 border（如果不需要 border 可以设置 border 的宽度为 0.1px）
给父元素设置 padding 值
父元素添加 overflow: hidden
父元素加前置内容生成（推荐）

.parent::before {
  content: '';
  display: table;
}

z-index

利用z-index，可以改变元素相互覆盖的顺序。

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

1.只对定位元素有效

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。

2.父子关系处理

如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方。

3.相同z-index谁上谁下

1.如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素；

2.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

居中布局

一、水平居中：

(1). 行内元素的水平居中

如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(2）块状元素的水平居中（定宽）

当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

        .child{
            width: 200px;
            margin: 0 auto;
        }

(3)块状元素的水平居中（不定定宽）

在实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。

当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为行内元素显示或行内块元素）

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

二、垂直居中：

和水平居中一样，这里要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定

场景1：子元素是行内元素，高度是由其内容撑开的

这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

 .wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

场景2：子元素是块级元素但是子元素高度没有设定，在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整，但是还是存在一些解法。

通过给父元素设定display:table-cell;vertical-align:middle来解决

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

结果

场景3：子元素是块级元素且高度已经设定

计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2

<div class="wrap ">
    <div class="div1">111111</div>
</div>

  .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

结果

七种实现左侧固定，右侧自适应两栏布局的方法

常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是，利用CSS中的新型布局flex layout与grid layout。

首先创建基本的HTML布局和最基本的样式。

<div class="wrapper" id="wrapper"> <div class="left"> 左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。 </div> <div class="right"> 这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br> 基本的样式是，两个div相距20px, 左侧div宽 120px </div> </div>

基本的样式是，两个盒子相距20px, 左侧盒子宽 120px，右侧盒子宽度自适应。基本的CSS样式如下:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60; } .left { width: 120px; border: 5px solid #ddd; } .right { margin-left: 20px; border: 5px solid #ddd; }

下面的代码都是基于这套基本代码做覆盖，通过给容器添加不同的类来实现效果。

双`inline-block`方案

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;    // 消除空格的影响
}

.wrapper-inline-block .left, .wrapper-inline-block .right { display: inline-block; vertical-align: top; // 顶端对齐 font-size: 14px; box-sizing: border-box; } .wrapper-inline-block .right { width: calc(100% - 140px); }

这种方法是通过width: calc(100% - 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border的宽度。
在这里，为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
同时，作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。
另外，为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。
缺点:

需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing
需要消除空格字符的影响
需要设置vertical-align: top满足顶端对齐。

双`float`方案

.wrapper-double-float {
    overflow: auto;        // 清除浮动
    box-sizing: content-box;
}

.wrapper-double-float .left, .wrapper-double-float .right { float: left; box-sizing: border-box; } .wrapper-double-float .right { width: calc(100% - 140px); }

本方案和双float方案原理相同，都是通过动态计算宽度来实现自适应。但是，由于浮动的block元素在有空间的情况下会依次紧贴，排列在一行，所以无需设置display: inline-block;，自然也就少了顶端对齐，空格字符占空间等问题。

不过由于应用了浮动，父元素需要清除浮动。
缺点:

需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing。
父元素需要清除浮动。

`float+margin-left`方案

.wrapper-float {
    overflow: hidden;        // 清除浮动
}

.wrapper-float .left {
    float: left; } .wrapper-float .right { margin-left: 150px; }

上面两种方案都是利用了CSS的calc()函数来计算宽度值。下面两种方案则是利用了block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。
但是block级别的元素都是独占一行的，所以要想办法让两个block排列到一起。
我们知道，block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素。这样，block级别的元素就可以和浮动的元素同处一行了。
为了让右侧盒子和左侧盒子保持距离，需要为左侧盒子留出足够的距离。这个距离的大小为左侧盒子的宽度以及两个盒子之间的距离之和。然后将该值设置为右侧盒子的margin-left。
缺点：

需要清除浮动
需要计算右侧盒子的margin-left

使用`absolute+margin-left`方法

另外一种让两个block排列到一起的方法是对左侧盒子使用position: absolute的绝对定位。这样，右侧盒子也能无视掉它。

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right { margin-left: 150px; }

缺点:

使用了绝对定位，若是用在某个div中，需要更改父容器的position。
没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

使用`float+BFC`方法

上面的方法都需要通过左侧盒子的宽度，计算某个值，下面三种方法都是不需要计算的。只需要设置两个盒子之间的间隔。

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left; margin-right: 20px; } .wrapper-float-bfc .right { margin-left: 0; overflow: auto; }

这个方案同样是利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。

这种情况下，只需要为左侧的浮动盒子设置margin-right，就可以实现两个盒子的距离了。而右侧盒子是block级别的，所以宽度能实现自适应。
缺点:

父元素需要清除浮动

`flex`方案

`grid`方案

双飞翼布局 & 圣杯布局

　　双飞翼布局和圣杯布局目的都是左右两栏固定宽度，中间部分自适应。

【圣杯布局】

在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。

稍微说明一下：

html代码中 middle部分首先要放在container的最前部分。然后是left,right

1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）

2.middle部分 width:100%占满

3.此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%

4.这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 220px 0 200px

5.middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px

6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px

当然，为了保证窗口不能缩太小无法展示左右，可以给body加上 min-width。

【双飞翼布局】

双飞翼布局，始于淘宝UED

如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.

恩，这里有一只鸟~

左翅sub有200px,右翅extra..220px.. 身体main自适应未知

1.html代码中，main要放最前边，sub extra

2.将main sub extra 都float:left

3.将main占满 width:100%

4.此时main占满了，所以要把sub拉到最左边，使用margin-left:-100% 同理 extra使用margin-left:-220px

5.main内容被覆盖了，除了使用外围的padding，还可以考虑使用margin。给main增加一个内层div-- main-inner, 然后margin:0 220px 0 200px

6.main正确展示

怎么预览 GitHub 项目里的网页？

盒子显示类型

常见的显示类型

不常见的显示类型

CSS布局

1. 正常布局（文档流布局）

2. 浮动布局

2.1. 清除浮动

2.1.1. 父级定义高度

2.1.2. 结尾处添加空标签并清除浮动

2.1.3. clearfix 清除浮动类

2.1.4. 父级定义溢出隐藏

3. 定位布局

4. 弹性盒子

CSS实现强制不换行、自动换行、强制换行

块状元素的流体特性与自适应布局

元素的BFC特性与自适应布局

margin 越界问题

z-index

1.只对定位元素有效

2.父子关系处理

3.相同z-index谁上谁下

居中布局

七种实现左侧固定，右侧自适应两栏布局的方法

双inline-block方案

双float方案

float+margin-left方案

使用absolute+margin-left方法

使用float+BFC方法

flex方案

grid方案

双飞翼布局 & 圣杯布局

猜你喜欢

　　常见的显示类型

　　不常见的显示类型

双`inline-block`方案

双`float`方案

`float+margin-left`方案

使用`absolute+margin-left`方法

使用`float+BFC`方法

`flex`方案

`grid`方案