阅读MDN文档之StylingBoxes(五)

时间 2019-12-13

标签阅读 mdn 文档 stylingboxes 繁體版

原文原文链接

BoxModelRecap

Box properties

Some points worth remembering:css

盒模型不会遵照百分比的高度；盒子高度自适应内容或者设置一个绝对的高度。
边框忽略宽度百分比设置。
Margins会存在margin collapse

Overflow

当设置盒子绝对的高度或者宽度时，内容可能会超出。为了解决这个问题，有了overflow属性，下面介绍最多见的3个值。html

auto
hidden
visible

Background clip

背景由背景图和背景颜色构成。默认下，背景扩展到border的边缘。这很好，可是有时候有其余的状况怎么办？look at this。默认下，是用的border-box。其实这里只是简单的裁剪。web

border-box: 背景延伸到边框的外边缘。(但z-index排序在边框下)
padding-box: 在边框下方没有绘制背景。(背景延伸到填充的外边缘)
content-box: 背景画在内容框(content)内。

Background origin

background-origin这个属性定义了，背景图是相对于什么哪一个位置来定位的。它有三个值：api

content-box: 背景图像相对于内容来定位
border-box: 背景图像相对于边框来定位
padding-box: 背景图像相对于内边距来定位

Outline

和border差很少，可是它不是box model的一部分。浏览器

Advanced box properties

Setting width and height constraints(约束)

一个明显的用途是，若是你想容许一个布局的宽度是灵活的，经过设置它的外部容器的宽度为一个百分比，但你也不但愿它变得太宽或太窄，由于布局会开始看起来很差。这里的一个选择是使用响应式网页设计技术（咱们将在后面介绍），但更简单的方法多是给布局一个最大和最小宽度约束：less

body {
    width: 70%;
    max-width: 1280px;
    min-width: 480px;
    margin: 0 auto;
}

0 causes the top and bottom margins to be 0, while auto (in this case) shares the available space between the left and right margins of the container, centering it. The end result is that when the container is within the min and max width constraints, it will fill the entire viewport width. When 1280px width is exceeded, the layout will stay at 1280px wide, and start to be centered inside the available space. When the width goes below 480px, the viewport will become smaller than the container, and you'll have to scroll to see it all.ide

0使顶部和底部边距为0，而auto（在这种状况下）共享容器的左右边距之间的可用空间，以此为中心。最终结果是，当容器在最小和最大宽度约束内时，它将填充整个视口宽度。当超过1280像素宽度时，布局将保持在1280像素宽，并开始在可用空间内居中。当宽度低于480像素时，视口将变得小于容器，您必须滚动才能看到它。函数

我理解的，准确来讲，当超过1280px时候，就保持1280px，在480到1280px之间，就会保持宽度70%，若是小于480px时，视口会变得小于容器。必须滚动才能看到它。布局

Another good use of max-width is to keep media(e.g. images and video) constrained inside a container. For example:flex

img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

Changing the box model completely

box-sizing属性也有三个值

content-box(default): 设置width为500px，border和padding依然会增长盒子的宽度。(padding和border计入width内。)
border-box: 设置width为500px，border和padding不会增长盒子的宽度。(padding和border不计入width内。)
padding-box: 设置width为500px，padding计入width内，可是border不会计入width。这个值只有firefox实现了，可是firefox 50就删除了它。

Box display types

Common display types

display有不少个值，可是最多见的3个仍是: block、inline、inline-block

block: 单独为一行，能够设置高度和宽度。
inline：它于与文档的文本一块儿流动(即它和周围文本以及其余inline元素在一行，其内容与文本流断开(试一试padding，它并不会影响下一行的文本。))。不能设置高度和宽度。任何inline元素上的margin、border、padding都会更新周围的(左右的，并非上下的)文本位置，可是不会影响周围block元素的位置。
inline-block:它和周围的文本会在一行，而且也能够设置高度和宽度。它不会在段落行之间被破坏(也就是说inline-block的文本不会跨越两行。)

For example:

HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>


CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Uncommon display types

table
flex: look at this
grid: look at this

Backgrounds

What exactly is a background?

There are many other different properties you can use to manipulate the element's background, some of which we have already seen a number of times in our course already:

background-color
background-image
background-position
background-repeat
background-attachment: Specifies the behavior of an element's background when its content scrolls, e.g. does it scroll with the content, or is it fixed?
background: Shorthand for specifying the above five properties on one line.
background-size: Allows background image to be resized dynamically.

The basis: color, image, position, repeat

Background color

几乎全部地方斗支持背景颜色，并且背景渐变只有新浏览器才支持，所以设置一个背景颜色是很是有必要的有时候。

Background image

我以为没有什么多说的。

p {
    background-image: url(/example.png);
}

Background repeat

常见的几个值：

no-repeat
repeat-x
repeat-y

Background position

Generally the property will take two values, seperated by a space, which specify the horizontal(x) and vertical(y) coordinates of the image --- the top left corner of the image, to be exact. Think of the background as a graph, with the x coordinate going across from left to right, and the y coordinate going from top to bottom.

背景位置容许咱们将背景图像放置在咱们想要的背景内。一般，属性将采用两个值，这两个值由空格分隔，这两个值指定图像的水平（x）和垂直（y）坐标，即图像的左上角。将背景视为图形，x坐标从左到右穿过，y坐标从上到下。

这个属性能够接受不少值，你会用到的大多数值有：

绝对单位，好比px。background-position: 200px 25px.
相对单位，好比rems。background-position: 20rem 2.5rem.
百分比，background-position: 90% 25%.
关键字，好比background: right center。这两个值是直视的，而且能够分别取左、中、右和上、中、下的值。

你应该注意，能够混合和匹配这些值，好比background-position: 99% center。还要注意，若是只指定一个值，那么该值将被假定为水平值，垂直值将默认为center.

Background image: gradients

一个linear gradient经过linear-gradient()建立，它做为background-image属性的值。至少，函数须要3个值，它们由逗号分开。分别是：渐变应该跨越背景的方向，开始处的颜色，结束处的颜色。举例来讲：

background-image: linear-gradient(to bottom, origin, yellow);

可使用关键字来表示方向，好比(to bottom, to right, to bottom right, .etc)或者用角度来表示(0度表示to top, 90度表示to right, 360度表示to top.)

还能够指定开始渐变的位置，好比说：

background-image: linear-gradient(to bottom, origin 40%, yellow);

它将从高度为40%的地方才开始渐变。而高度40%以前是origin颜色。

还能够指定多个值(除了是百分比以外，还能够是px阿等等其余的), 好比说

background-image: linear-gradient(to bottom, yellow, origin 40%, yellow);

固然，咱们还可使用repeating-linear-gradient()还设置重复线性渐变。下面的例子，每40px(必须指定中止点)后就会重复渐变。

background-image: repeating-linear-gradient(top bottom, yellow, origin 40px);

Background attachment

Look at this

这个属性是用于指定当内容滚动时它们如何滚动，它有如下的值：

scroll(也是默认属性): 表示会随着页面滚动而滚动(能够想象成它被附加到元素的边框上), 若是你滚动的是元素（上面有背景图片）,那么背景不会滚动。
fixed：它表示不会随着页面的滚动而滚动，不管滚动的是页面仍是拥有背景图片的元素。
local：它只支持IE9+ 以及其余主流浏览器。它将背景固定到它所设置的元素，所以当滚动元素时，background会随着滚动。

Background shorthand

For example:

background: yellow linear-gradient(to bottom, yellow, origin) no-repeat left center scroll;

若是有的属性没有被设置值，那么默认的值会被设置。

Multiple backgrounds

IE9后，能够给一个元素添加多个背景图片。用逗号分割开。它们的最终效果是这样的：最前面的值在最上面，而后依次在下面，这里须要注意。

p {
    background-color: orange; // 请务必要写，由于有时候可能会加载不出来图片或者低版本不支持background-image。
    background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

Background size

IE9如下不支持哟。每一个background-size，须要两个background-size的值，一个是水平方向上的，另外一个是垂直方向上的. 一样，px,em,rem,percentages,keywords等都支持。若是只设置了一个值，那么第二个值会被设置为auto。

background-size

简单总结一下：

percentages: 以父元素的百分比来设置图像的高度和宽度。
length
keywords
- contain: 根据必定的比例将图片放大(图片的高宽比不边)，可是会有留白区域。
- cover: 根据必定的比例将图片放大，会铺满容器的高宽，而图片多出来的部分会被裁掉。

Borders

Border radius

For example:

// 第一个值表明左上角和右下角；第二个值表明右上角和左下角
border-radius: 20px 10px;

// 第一个值表明左上角，第二个值表明右上角和左下角，第三个值表明右下角。
border-radius: 20px 10px 50px;

// 第一个值：左上角，第二个值：右上角，第三个值：右下角，第四个值：左下角
border-radius: 20px 30px 40px 50px;

固然，也能够建立椭圆形角(其中x半径不一样于y半径), 两个不一样的半径由'/'分割指定。

// 第一个值是x半径，第二个值是y半径。
border-radius: 100px / 50px;

// 前两个值表示x半径(其中第一个值表示左上角和右下角的，第二个值表示右上角和左下角的), 后两个表示y半径。
border-radius: 100px 50px / 50px 25px;

Border images

属性太多内容，MDN-border-image

IE11+ 以及其余现代浏览器支持。

是将一张图，分红9部分，除去中间的一部分，来将其余8部分做为盒子的边框。所以就会用到background-clip: padding-box;来将border部分的背景(主要是背景颜色)给裁掉。

border: 20px solid black; // 低版本浏览器
border-clip: padding-box; // 上面介绍了主要是为了裁掉背景颜色
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png); // 设置边框背景图片
border-image-slice: 40; // 以40(多是像素，多是坐标，根据是不是矢量图来判断的)。指定切片的大小是40.若是是一个值，则应用四个角
border-image-repeat: round; // 设置能够重复

border-image-slice 能够有多个值，它和padding与margin差很少：

Two values: top and bottom, left and right;
Three values: top, left and right, bottom;
Four values: top, right, bottom, left;

StylingTables

A typical HTML table

<table summary="This is a test table">
    <caption></caption>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="row" colspan="2"></td>
            <td></td>
        </tr>
    </tfoot>
</table>

简单的说明：

summary属性规定表格内容的摘要，不会对浏览器产生视觉效果。可是有利于屏幕阅读器
scope属性定义将表头单元和数据单元相关联，有利于屏幕阅读器。
- col: 规定单元格是列的表头
- row：规定单元格是行的表头
- colgroup：规定单元格是列组的表头
- rowgroup:规定单元格是行组的表头

Active learning: Styling our table

Spacing and layout

The first thing we need to is sort out the spacing/layout --- default table styling is so cramped(约束的，狭窄的)!To do this, add the following CSS to your style.css file:

/* spacing */

table {
    table-layout: fixed;
    width: 100%;
    border-collpase: collapse;
    border: 3px solid red;
}

thead th:nth-child(1) {
    width: 30%;
}

thead th:nth-child(2) {
    width: 20%;
}

thead th:nth-child(3) {
    width: 15%;
}

thead th:nth-child(4) {
    width: 35%;
}

th, td {
    padding: 20px;
}

最重要的部分注意以下：

设置table-layout的值为fixed一般对于你的table是很不错的选择。由于它比默认的table更可预见。一般，表列的大小设置它由它们包含多大的内容而决定，这可能会致使奇怪的结果。设置table-layout:fixed, 你能够根据它们的heading来设置列的宽度, 而后适当的处理它们的内容。这就是为何咱们选择了四个不一样的heading的th，而且给它们设置了必定的宽度(百分比)。整个列的宽度都会根据heading的宽度来设置，这是一个设置表格列的很好的一种方法。Fixed Table Layouts
咱们设置了它的宽度为100%, 意味着能够很好的响应式设计(虽然还须要一些工做来让它在窄屏幕上看起来更好。)
设置border-collapse的值为collapse是任何表格样式工做的标准最佳作法。默认状况下，当你在表格元素上设置边框时，它们会有默认的间距，这看起来不太好看。而设置border-collapse的值为collapse，这样看起来就会好不少。
为table设置了边框的。
为th、td设置了padding。

Some simple typography(排版)

/* typography */
html {
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
    font-family: 'Rock Salt', cursive;
}

th {
    letter-spacing: 2px;
}

td {
    letter-spacing: 1px;
}

tbody td {
    text-align: center;
}

tfoot th {
    text-align: right;
}

Graphics and colors

thead, tfoot {
    background: url(leopardskin.jpg);
    color: white;
    text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
    border: 3px solid purple;
}

Zebra striping(隔行变色)

tbody tr:nth-child(even) {
    background: red;
}

tbody tr:nth-child(odd) {
    background: green;
}

tbody {
    background: red; /*优雅降级*/
}

Styling the caption

caption {
    font-family: 'Rock Salt', cursive;
    padding: 20px;
    font-style: italic;
    caption-side: bottom; /*设置位置在下面*/
    color: #666;
    text-align: right;
    letter-spacing: 1px;
}

AdvancedBoxEffects

This article acts as a box of tricks, providing an introduction to some of the advanced features available for styling boxes that don't fit into the other categories above — like box shadows, blend modes(混合模式) and filters.

Box shadow

A simple box shadow

/* HTML */
<article class="simple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>


/* CSS */
p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

box-shadow接受四个值，分别是水平偏移量，垂直偏移量，模糊半径，阴影颜色。

Multiple box shadow

能够设置多个box shadow，用逗号隔开。

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}

Other box shadow features

不像text-shadow，box-shadow有一个inset关键字能够用。把这个属性放在开头，就可让阴影成为内阴影,而不是外阴影。

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

button:focus, button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow: inset 2px 2px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

Filters(滤镜)

CSS过滤器提供了将滤镜应用到元素的方式。有不少不一样的选项可使用，能够在这里查看filter的用法。这篇文章，主要是为了介绍语法。

滤镜能够应用任何元素，一些滤镜选项能够和其余CSS功能很是相似的事情，好比drop-shadow(),box-shadow和text-shadow实现出来的效果差很少。其实filter的真正好处在于，they work on the exact shapes of the content inside the box(它们处理框内的内容的确切形状。), not just the box itself as one big chunk, which can look nicer, although it may not always be want you want.下面咱们来举个例子:

/* HTML */
<p class="filter">filter</p>
<p class="box-shadow">box-shadow</p>


/* CSS */
p {
    margin: 1em auto;
    padding: 20px;
    width: 100px;
    border: 5px dashed red;
}


.filter {
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.7));
}

.box-shadow {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

你会发现，滤镜drop-shadow阴影会让文本和边框都有阴影。box-shadow只是让边框有阴影。

一些注意事项:

filter支持edge和不少现代浏览器，可是不包括全部IE浏览器。
你会看到一个带有-webkit-前缀的过滤器属性版本，有时由浏览器在最终肯定其新功能的实现以前使用。Chrome/Safari/Opera支持-webkit-版本, 而EDGE和Firefox使用最终的非前缀版本。

Blend modes(混合模式)

CSS混合模式容许咱们在两个元素重叠时为混合效果添加混合模式。每一个像素显示的最终颜色将是原始像素颜色和下面图层中像素的组合。

这有两个属性在CSS中使用混合模式：background-blend-mode, 它将在一个元素上设置的多个背景图像和颜色混在一块儿，mix-blend-mode将元素与元素混合在一块儿，是重叠背景和内容的。

注意：混合模式是新特性，不少浏览器都不支持。

阅读MDN文档之StylingBoxes(五)

目录

BoxModelRecap

Box properties

Overflow

Background clip

Background origin

Outline

Advanced box properties

Setting width and height constraints(约束)

Changing the box model completely

Box display types

Common display types

Uncommon display types

Backgrounds

What exactly is a background?

The basis: color, image, position, repeat

Background color

Background image

Background repeat

Background position

Background image: gradients

Background attachment

Background shorthand

Multiple backgrounds

Background size

Borders

Border radius

Border images

StylingTables

A typical HTML table

Active learning: Styling our table

Spacing and layout

Some simple typography(排版)

Graphics and colors

Zebra striping(隔行变色)

Styling the caption

AdvancedBoxEffects

Box shadow

A simple box shadow

Multiple box shadow

Other box shadow features

Filters(滤镜)

Blend modes(混合模式)