CSS デザインガイド学習ノート 2_html/css_WEB-ITnose

元のアドレス: http://justclear.github.io/css-stylin-with-css-note-2

この記事は著者の「CSS 設計ガイド」です。学習ノートの後半。最近最終試験の準備をしているため、「CSS デザイン ガイド」を要約する時間がありません。まだ前半を読んでいない場合は、ここに送信することもできます。

第 3 章 要素の配置

3.1 ボックス モデルを理解する

実際、HTML ページ内のすべての要素は、デフォルトでは実際には「ボックス」です。背景も透明であることがわかり、ページ上のボックスの構造を直接見ることはできませんが、いくつかの Web 開発者ツールバーを使用してボックスの境界線と背景を簡単に表示することができます。これらのボックスの構造を直感的に確認してください。

各ボックスには 3 つの属性セットがあります:

• マージン: ボックスと隣接するボックス間の距離を設定できます。

• 境界線: 境界線の幅、スタイル、色を設定できます。

• パディング: ボックスのコンテンツ領域と境界線の間の距離を設定できます。

ボックスには 4 つの側面があるため、ボックス モデルの構造をより直観的に理解するために、これらの属性にもそれぞれ 4 つの属性があります。これはボックス モデルの構造図です:

これら 3 つの属性グループには合計 12 の属性値がありますが、ここではマージンを付けて省略することもできます。例:

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)

ボーダー (ボーダー) には 4 つの関連属性があります:

• ボーダー幅: 細、中、太などのテキスト値、または 任意の絶対値 パーセンテージと負の値を除きます。

• スタイル (ボーダースタイル): なし、非表示、点線、破線、実線、二重、溝、尾根、インセット、アウトセットなどのテキスト値があります。

• カラー (border-color): rgb、hsl、16 進カラー値、カラー キーワードを含む任意のカラー値を使用できます。

• Border-radius: CSS3 の新しい属性で、パーセンテージ、相対値、絶対値を使用できます。

CSS の推奨事項では、border-width のいくつかのテキスト値の正確な幅が指定されていないため、実際の幅はブラウザーごとに異なります。

border-radius はボックスの位置には影響しません。

3.1.2 ボックスのパディング

パディングは、ボックスのコンテンツ領域とボックスの境界線の間の距離です。パディングを設定しない場合、コンテンツは境界線の隣にあります:

パディングを設定した後、コンテンツ領域と境界線 (パディングのサイズ) の間には一定の距離があります:

3.1. 3 ボックスのマージン

内側のマージンとボーダーに比べて、外側のマージンは非常に複雑です。まず、垂直マージンが重ねられます。次のルールが適用された 3 つの段落:

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

最初の段落の下余白は 2 番目の段落の上余白に隣接しているため、2 つのボックスの境界線の間に隙間があるように感じるかもしれません。マージンは最大 80 ピクセルまでしか追加できませんが、実際には 50 ピクセルであり、このように上下のマージンが交わると、一方のマージンがもう一方のボックスの境界線に当たるまで重なり合います。上の例では、2 番目の段落の広い上マージンが最初の段落の境界線に接触します。これは、より広いマージンが 2 つのボックス間の距離を決定することを意味します。

3.1.5 余白の単位

フォントサイズを大きくしたり、段落間の余白が生じたりすることによる全体的な違和感の問題を避けるために、段落テキストの余白を設定するときは注意する必要があります。変更しない場合は、段落の上部と下部の余白を設定するときは、em 単位を使用する必要があります。これにより、フォント サイズが調整されると、段落の上部と下部の余白もフォント サイズに応じて距離が調整されます。ページ全体のレイアウトがより調整され、左右の余白が調整されます。たとえば、フォント サイズの調整によって左右の余白が変わらないように、絶対単位 px を使用できます。次のように設定できます:

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

この方法では、段落の垂直方向の距離は常にフォントの高さの 4 分の 1 を維持し、水平方向の余白は変更されません。フォントの調整。

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>// CSSp {    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デザインガイド」の重要な知識をまとめてきましたが、もちろん不十分なところもあるかと思いますが、もし間違いがあればご指摘、ご議論ください。 。