CSS 设计指南学习笔记二

时间 2019-11-08

标签 css 设计指南学习笔记栏目 CSS 繁體版

原文原文链接

原文地址：http://justclear.github.io/css-stylin-with-css-note-2css

本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，因为最近都在准备期末考的事，因此都没来得及对《CSS 设计指南》进行一些总结，没有看以前第一部分的话也能够从这里传送过去。git

第三章定位元素

3.1 理解盒模型

其实 HTML 页面中每一个元素其实都是一个「盒子」，默认状况下这些盒子的边框不可见，背景也是透明的，因此咱们不能直接的看到页面中盒子的结构，可是咱们能够借助一些 Web Developer 工具条能够方便地显示盒子的边框和背景，让咱们能很直观的看到这些盒子的结构。github

每一个盒子都有三组属性：web

外边距(margin)：能够设置盒子与相邻盒子之间的距离。浏览器
边框(border)：能够设置边框的宽度、样式和颜色。工具
内边距(padding)：能够设置盒子内容区和边框之间的距离。布局

一个盒子有四条边，因此这些属性也各有四个属性，分别是上(top)、右(right)、下(bottom)和左(left)，为了更直观的了解盒模型的结构，这里放上一张盒模型的结构图：学习

尽管这三组属性共有 12 个属性值，但咱们也能够对它们进行简写，这里以 margin 为例：字体

margin-top:1px; 
margin-right:1px; 
margin-botton:1px; 
margin-left:1px;

缩写后的代码以下:搜索引擎

margin:1px 1px 1px 1px;

缩写的顺序是上 -> 右 -> 下 -> 左，顺时针的方向。相对的边的值相同，则能够省掉，代码以下:

margin:1px;// 四个方向的边距相同，等同于margin:1px 1px 1px 1px; 
margin:1px 2px;// 上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px 
margin:1px 2px 3px;// 右边距和左边距相同，等同于margin:1px 2px 3px 2px; 
margin:1px 2px 1px 3px;// 注意，这里虽然上下边距都为1px，可是这里不能缩写。

3.1.1 盒子的边框(border)

边框(border)有四个相关属性：

宽度(border-width)：可使用 thin、 medium 和 thick 等文本值，也可使用除百分比和负值之外的任何绝对值。
样式(border-style)：有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、 ridge、 inset 和 outset 等文本值。
颜色(border-color)：可使用任何颜色值，包括 rgb、 hsl、十六进制颜色值和颜色关键字。
圆角(border-radius)：属于 CSS3 新增属性，可以使用百分比、相对值和绝对值。

CSS 推荐标准并无明确规定 border-width 的几个文本值的确切宽度，因此实际宽度会因浏览器而异。

border-radius 不影响盒子的定位。

3.1.2 盒子的内边距(padding)

内边距是盒子内容区与盒子边框之间的距离。在没有设置内边距的状况下，内容紧挨着边框：

设置内边距后，内容区与边框有必定的距离(padding 的大小)：

3.1.3 盒子外边距(margin)

与内边距和边框相比，外边距就要显得复杂的多了，首先是外边距叠加，垂直方向上的外边距会叠加，例若有三个段落应用了以下规则：

p {
    height:50px; 
    border:1px solid #000;
    background: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}

因为第一段的下边距与第二段的上边距相邻，你可能会以为它们两个盒子边框之间的外边距只和是 80px，但其实是 50px，像这样上下外边距相遇时，它们会相互重叠，直到一个外边距碰到另外一个盒子的边框。就上面例子而言，第二段较宽的上外边距会碰到第一段的边框，也就是说较宽的外边距决定两个盒子之间的距离。

3.1.5 外边距的单位

在设置段落文本外边距时应该注意，为了不因增大字号致使段落间外边距不变引发的总体不协调的问题，在设置段落的上下外边距是应该使用 em 单位，这样当字体大小调整时，段落的上下外边距也会根据字体的大小来调整距离，这样页面的总体布局就会比较协调一致，而左右外边距则能够用 px 绝对单位，确保左右外边距不会因字体大小的调整而发生改变，好比能够这么设置：

p {
    font-size: 1em;
    margin: .75em 30px;
}

这样段落垂直距离就会始终保持字体高度的四分之三的高度，水平外边距不会因字体的调整而发生改变了。

3.2 盒子有多大

做者在本章介绍了块级元素和行内元素的不一样行为。

3.2.1 没有宽度的盒子

做者在这一节中专门提到了一个「没有宽度」的概念：没有显式地设置元素的 width 属性。若是不设置块级元素的 width 属性，那么这个属性的默认值就是 auto ，结果就是会让元素的宽度扩展到与父元素同宽，对于块级元素和行内元素更具体的介绍请看笔者的上一篇文章CSS 设计指南学习笔记一。

盒模型结论一：

没有设置宽度的元素始终会扩展到填满其父元素的宽度为止，添加水平外边距、水平边框和水平内边距都会致使内容宽度的减小，减小量等于水平外边距、水平边框和水平内边距的和。

3.2.2 有宽度的盒子

盒模型结论二：

为设定了宽度的盒子添加外边距、边框和内边距，会致使盒子扩展的更宽，实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而不是盒子要占据的( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )水平宽度。

因此必定要记住的是，给设定了 width 的元素添加外边距、边框和内边距所展现的行为与默认的 auto 状态下的行为会有大相径庭的表现。

拓展：

可是与布局相关的元素大部分都同时设置了 margin、 border、 padding 和 width，这就致使了在布局时的各类计算保证总宽度( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )保持不变，这样不只麻烦，有的时候还比较容易出错，为了解决这一问题， CSS3 新增了一个 box-sizing 属性，经过它能够将设置了 width 的元素也设定成具备默认的 auto 状态下的行为。这样就省去了许多计算 width 的时间，同时也不会出错，并且它的浏览器支持状况也是一片大好（除了 IE 6 和 IE 7 不支持，其余个别老版本的浏览器须要添加浏览器私有前缀才支持）。

能够这样使用这个属性：

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

3.3 浮动与清除

浮动和清除是页面布局的一大利剑，分别是 float 和 clear，浮动可让原来上下堆叠的块级元素变成左右并列，能够实现文字绕图片排列效果。浮动的元素会脱离常规的文档流，原来紧跟其后的元素会在空间容许的状况下向上提高到与浮动元素分庭抗礼。若是浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能放下第二段，也不想让它上来），就可使用 clear 属性清除浮动。

3.3.2 围住浮动元素的三种方法

浮动元素脱离了文档流，因此咱们看不到包含它的父元素了，这种状况有时候并非咱们想要的，因此做者在本章介绍了如何围住浮动元素的三种方法。

方法一：为父元素添加 overflow: hidden; 强制它包围浮动元素。

这种方法在某些状况下也不适用，好比经过浮动设置的水平排列的菜单，对其父元素设置 overflow: hidden; 后，尽管父元素围住了它，可是若是菜单有下拉选项的话，当鼠标移动到上面的时候下拉菜单并不会显示，由于设置了 overflow: hidden;，因此超出父元素范围的内容都被隐藏掉了。

方法二：同时浮动父元素

父元素设置浮动后，无论其子元素是不是浮动，父元素都会牢牢地包围住它的子元素，所以须要用 width: 100%; 再让父元素的宽度与浏览器容器同宽。一样，尽管父元素围住了它，可是这样会致使页面中出现大量的浮动元素，而浮动元素有每每很差控制，并不利于页面的布局。

方法三：添加非浮动的清除元素

第三种强制父元素包含其浮动的子元素的方式就是给父元素的最后添加一个非浮动的子元素，而后清除该子元素，所以父元素必定会包含这个子元素以及前面的浮动元素：

// HTML
<section>
    <p>It's fun to float</p>
    <div class="clearfix"></div>
</section>

// CSS
p {
    float: left;
}
.clearfix {
    clear:both;
}

尽管这个方法能解决上面提到的两种方法中的问题，但它还不是最好的方法，由于它会在文档中添加无心义的标签，这违反了标签语义化的规则，对搜索引擎并不友好。因此若是你要清楚浮动但既不想浮动父元素又不想对父元素设置 overflow: hidden; 也不想增长无心义的标签的话，可使用伪元素来清除浮动：

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

而后在父元素中添加 clearfix 类，由于搜索引擎并不会抓取伪元素，因此这种方法并无增长无心义的标签，这里应该注意的是，CSS3 标准是用两个冒号来区别伪元素和伪类，而 CSS2.1 中无论是伪元素仍是伪类都是用单个冒号表示，然而 IE8 并不支持双冒号的伪元素，因此问题就来了，若是你要遵循 CSS3 的标准使用双冒号的话就不兼容 IE8 了，若是使用但冒号的话又不符合 CSS3 标准规范，固然如今大多数仍是使用但冒号的，选择哪一种仍是看我的的选择。

3.4 定位

CSS 布局的核心是 position 属性，对元素应用这个属性能够相对于它在常规文档流中的位置从新定位，position 属性有 4 个值： static、 relative、 absolute 和 fixed。

3.4.1 静态定位(static)

静态定位下的块级元素会在默认文档流中上下堆叠，想要突破 static 定位提供的这种按顺序布局元素的方式，就必须对元素的 position 属性的值改成其余三个值。

3.4.1 相对定位(relative)

所谓的相对定位就是相对于元素原来的位置（static 状态下的位置）进行定位，也就是说在不设置 top、 right、 bottom 或 left 的话，和它在默认(static)状况下的表现是相同的，可是若是对它设置了 top、 right、 bottom 或 left 的话，就会相对与它默认的位置进行定位。相对定位的元素能够遮住静态(static)定位的元素。能够给 top 和 left 属性设定负值，把元素向上和向左移动。

3.4.2 绝对定位(absolute)

绝对定位跟静态定位和相对定位是绝对不同的，静态定位和相对定位并不会脱离文档流，会占居原来的位置，而绝对定位会把元素完全从文档流中拿出来，而后再相对于其余元素（这里的其余元素指的是定位上下文，默认是 body 元素）定位。

绝对定位的一个重要的概念就是定位上下文，把元素的 position 属性设定为 relative、 absolute 或 fixed 后，继而可使用 top、 right、 bottom 和 left 属性，相对于「另外一个元素」移动该元素的位置。这里的「另外一个元素」就是该元素的定位上下文。

绝对定位的默认定位上下文是 body，这是由于 body 是标记中全部元素的惟一的祖先元素，而实际上，绝对定位元素的任何祖先元素均可以成为该绝对定位元素的定位上下文，只要把相应的祖先元素的 position 属性的值设定为 relative 便可。

3.4.3 固定定位

从彻底脱离文档流的角度说，固定定位与绝对定位相似。但不一样之处在于，固定定位的定位上下文是视口（浏览器窗口），所以它不会随页面的滚动而移动。最多见的状况是用它来建立不随页面滚动而移动的导航元素。

3.5 显示属性

display 属性的值不少，但经常使用的除了前面提到的控制块级元素、行内元素和行内块级元素的 block、 inline 和 inline-block 之外，还有一个比较经常使用的就是 none，把元素的 display 属性的值设定为 none 后，该元素及所包含在其中的元素，都不会在页面中显示。他们原先战局的全部空间都会被「回收」，就好像相关元素根本不存在同样。

与此相似的属性还有 visibility，这个属性经常使用的两个值是 visible(默认值) 和 hidden，把元素的 visibility 属性的值设定成 hidden ，元素会被隐藏，但它还会占据页面中原来的空间位置。

笔者以为有点相似定位中 absolute 和 relative 的感受，就是 absolute 定位的元素的原来的位置会被「回收」（脱离文档流），就好像元素根本不存在同样（指的是原来占据的位置不存在同样），relative 定位的元素还会占据页面中原来的空间位置。

3.6 背景

背景支持为元素添加背景颜色也背景图片。

3.6.1 CSS 背景属性

CSS 规定如下与背景相关属性：

background-color: ; // 背景颜色
background-image: url(); // 背景图片
background-repeat: ; // 背景重复
background-position: ; // 背景位置
background-size: ; // 背景尺寸 CSS3 新增属性
background-attachment: ; // 背景粘附
background-clip: ; // 背景
background-origin: ; // 背景

3.6.5 背景位置

background-position：关键字 px em 百分比；

用于控制背景位置的 background-position 属性，是全部背景属性中最复杂的。background-position 有 5 个关键字值： top、 right、 bottom、 left 或 center，这些关键字值任意两个组合起来均可以做为该属性的值。好比 top right 表示把图片放在元素的右上角位置，center center 表示把图片放在元素的中心位置。除了这些关键字值之外还能够用百分比、px 和 em 等单位。

拓展

要是只设置一个值，则将其用来设定水平位置，而垂直位置会被设为 center。

在使用关键字和百分比的状况下，状况有点特殊，设定的值会同时应用于元素和图片，也就是说，若是设定了 80% 20%，则图片水平 80% 的位置与元素 33% 的位置对齐，垂直方向也同样，以下图：

其余单位数值就不同了，若是用像素单位来设定位置：

background-position: 80px 20px;

那么图片的左上角会被放在距元素左边 80px 上边 20px 的地方。

3.6.6 背景尺寸

background-size 是 CSS3 新增的属性，但却的到了浏览器很好的支持，这个属性用来控制背景图片的尺寸，能够给它设定的值及含义以下：

50%：缩放图片，使其填充背景区的一半。
100px 50px：把图片调整到 100px 宽，50px 高。
cover：拉大图片，使其彻底填满背景区，并保持宽高比例。
contain：缩放图片，使其刚好适应整个背景区域，并保持宽高比例。

3.6.7 背景粘附

background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动，这个属性默认是 scroll，即背景图片随元素移动，若是把它的值改成 fixed，那么背景图片不会随元素滚动而移动。

3.6.8 简写背景属性

background:
    [background-color]
    [background-image]
    [background-repeat]
    [background-attachment]
    [background-position] / [ background-size]
    [background-origin]
    [background-clip];

声明中少些了哪一个属性（好比没写 no-repeat），就会使用相应属性的默认值（repeat）。

3.6.9 其余 CSS3 背景属性

CSS3 新增的一些背景属性：

background-clip：控制背景绘制区域的范围，好比可让背景颜色和背景图片只出如今内容区，而不出如今内边距区域，默认状况下背景绘制区域是扩展到边框外边界的。
background-origin：控制背景定位区域的原点，能够设定为元素盒子左上角之外的位置。
background-break：控制分离元素（好比跨越多行的行内元素盒子）的显示效果。

background-size、 background-clip 和 background-origin 的浏览器支持状况仍是挺不错的：

3.6.10 多背景图片

CSS3 还能够给元素背景条件多个背景图片：

p {
    background-image:     url(img/1.png), 
                        url(img/2.png), 
                        url(img/3.png);
    background-position:20% 20%,
                        30px 50px,
                        center center;
    background-repeat:    repeat,
                        no-repeat,
                        repeat;
}

在 CSS 中，咱们把每张图片的声明都单独放在了一行，以逗号分隔，以便看清他们的位置、重复的设定值等等。要注意的是，代码中先列出的图片显示在上方，或者说更接近前景，还有就是对每张背景图设置重复或者位置的时候，也要用逗号一一对应隔开。

3.6.11 背景渐变

渐变就是在必定长度内两种或多种颜色之间天然过分。渐变分两种，一种是线性渐变，一种是径向渐变。线性渐变是从元素的一端延伸到另外一端，径向渐变则是从元素的一点向四周发散，下面来看一个简单的线性渐变例子：

// HTML
<div class="gradient effect-1"></div>
<div class="gradient effect-2"></div>
<div class="gradient effect-3"></div>

// CSS 
.gradient {
    width: 200px;
    height: 200px;
    margin: 0 20px;
}
/* 默认为从上到下 */
.effect-1 {
    background: -webkit-linear-gradient(#45b29a, #fff);
    background:    -moz-linear-gradient(#45b29a, #fff);
    background:      -o-linear-gradient(#45b29a, #fff);
    background:         linear-gradient(#45b29a, #fff);
}
.effect-2 {
    background: -webkit-linear-gradient(left, #45b29a, #fff);
    background:    -moz-linear-gradient(left, #45b29a, #fff);
    background:      -o-linear-gradient(left, #45b29a, #fff);
    background:         linear-gradient(to right, #45b29a, #fff);
}
.effect-3 {
    background: -webkit-linear-gradient(45deg, #45b29a, #fff);
    background:    -moz-linear-gradient(45deg, #45b29a, #fff);
    background:      -o-linear-gradient(45deg, #45b29a, #fff);
    background:         linear-gradient(45deg, #45b29a, #fff);
}

上面展现了三种简单的渐变效果，默认状况下渐变方向是从上到下的如图一，例 2 起点关键字 left 意思是渐变方向从左到右，例 3 中的 45deg （顺时钟旋转 45 度）至关于把起点从默认的中上设定到了又上。

3.6.11.1 渐变点

渐变点就是渐变方向上的点，能够在这些点上设定颜色和不透明度。能够添加任意多个渐变点：

// HTML
<div class="gradient effect-1"></div>
<div class="gradient effect-2"></div>
<div class="gradient effect-3"></div>
<div class="gradient effect-4"></div>

// CSS 
.gradient {
    width: 200px;
    height: 200px;
    margin: 0 20px;
}
/* 50% 处有一个渐变点 */
.effect-1 {
    background: -webkit-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 50%, #45b29a);
}
/* 20% 和 80%处有一个渐变点 */
.effect-2 {
    background: -webkit-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:    -moz-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:      -o-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:         linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
}
/* 25%、50% 和 75% 处有一个渐变点 */
.effect-3 {
    background: -webkit-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
}
/* 为同一个渐变点设定两种颜色能够的到突变的效果 */
.effect-4 {
    background: -webkit-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
}

例 1，若是不是使用百分比或其余值声明渐变点的位置，三种颜色会均匀分布于整个渐变。

例 2，演示了起点和终点不是 0% 和 100% 时的情形。此时，在第一个渐变点(20%)以前，是第一个渐变点声明的实色，而在该点以后，则是从该颜色到下一个渐变点颜色的过分。一样，在最后一个渐变点(80%)以后，该渐变点的颜色会以实色扩展到元素结束。

例 3，简单展现了相同颜色在几个渐变点之间变来变去的效果。

例 4，展现了在同一个渐变点声明两种不一样颜色，能实现一种突变的效果。

3.6.11.2 径向渐变

在建立径向渐变的时候，可使用参数指定形状、位置、尺寸、颜色和不透明度：

// HTML
<div class="gradient effect-1"></div>
<div class="gradient effect-2"></div>
<div class="gradient effect-3"></div>

// CSS 
.gradient {
    width: 300px;
    height: 200px;
    margin: 0 20px;
}
.effect-1 {
    background: -webkit-radial-gradient(#fff, #45b29a);
    background:    -moz-radial-gradient(#fff, #45b29a);
    background:      -o-radial-gradient(#fff, #45b29a);
    background:         radial-gradient(#fff, #45b29a);
}
.effect-2 {
    background: -webkit-radial-gradient(circle, #fff, #45b29a);
    background:    -moz-radial-gradient(circle, #fff, #45b29a);
    background:      -o-radial-gradient(circle, #fff, #45b29a);
    background:         radial-gradient(circle, #fff, #45b29a);
}
.effect-3 {
    background: -webkit-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:    -moz-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:      -o-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:         radial-gradient(50px 30px, circle, #fff, #45b29a);
}

例 1，展现了默认的渐变形状，即渐变效果会填充元素，这里是矩形，若是元素是正方形，那渐变就是圆形：

例 2，设定了关键字 circle，因而渐变形状变得均匀，并在元素最近的边达到终点，造成了圆形渐变。而长边剩下的区域则填充了终点的颜色。

例 3，位置参数 50px 30px 把渐变的圆心放到了靠近左上角的位置。

总结

本章的内容很多，都是一些很重要的概念，好比盒模型、定位元素、浮动与清除浮动和元素背景属性。

到目前为止，也对《CSS 设计指南》的重点知识进行了总结，固然可能有些地方总结的不够好，若有不对的地方欢迎指出和讨论急。

CSS 设计指南 学习笔记 二

第三章 定位元素