Basic features of CSS

News 2023-07-19 07:40:58 views: null

1. Overview of CSS

1.1. Overview

  • CSS (Cascading Style Sheets) is a computer language used to express the styles of documents such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standardized Generalized Markup Language). CSS
    can not only modify web pages statically, but also dynamically format elements of web pages with various scripting languages.
  • CSS can precisely control the layout of element positions in web pages at the pixel level, supports almost all font sizes and styles, and has the ability to edit web page objects and model styles.
  • CSS defines how to display HTML elements, just like the font tags and color attributes in HTML play a role. Styles are usually stored in external .css
    files, and we only need to edit a simple CSS document and then reference it to change the layout and appearance of all pages.

1.2. Grammar

  • A CSS rule consists of two main parts: selectors and one or more declarations

For example, if we want the text in the p tag to be red and the font to be centered, we can write like this

p {color: red;text-align: center;}

To make CSS more readable, you can only describe one property per line

p {
    color: red;
    text-align: center;
}

1.3. Notes

Comments are used to explain your code and feel free to edit it, but browsers ignore it.

CSS comments start with /* and end with */, as follows:

/* 这是一个注释 */
p {
    /* 这是一个注释 */
    color: red;
    text-align: center;
}

1.4. How to create and reference

1.4.1, external style sheet (outline)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入外部样式表-->
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <p>外部样式</p>
</body>
</html>

css

p {
    color: red;
    text-align: center;
}

1.4.2, internal style sheet (inline)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入内部样式表-->
    <style>
        p {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>外部样式</p>
</body>
</html>

1.4.3. Inline style (inline style)
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--引入内联样式-->
    <p style="color: red;text-align: center">外部样式</p>
</body>
</html>

1.5. Three introduction priorities

  • The content attributes of the three import methods do not conflict: the three methods will work at the same time.
  • The content attributes of the three import methods will conflict:
  • Inline and Outline conflict, Inline above Outline. — determined by outlink
  • Inline and Outline conflict, Outline above Inline. — The three methods coexist and conflict by inline decision. — determined by inline

Note: When there are **“!important ”** keywords in the attribute value, this method is preferred to import the attribute value.

Format: key: value !important;
Example: color: red !important;

CSS selector

2.1, id selector

The id selector can specify a specific style for HTML elements marked with a specific id. Generally speaking, the id name of a tag in a page must be unique and cannot be repeated.

Requirement description: Add a red font style to the paragraph whose id is part1

<p id="part1">段落1</p>
<p id="part2">段落2</p>

#part1 {
    color: red;
}

2.2, class selector

The class selector can specify a specific style for HTML elements marked with a specific class. Generally speaking, the class name of a tag in a page can be non-unique and can be repeated.
Requirement description: Add a green font style to paragraphs whose class is green, and add a bold font style to paragraphs whose class is bold

<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>

.green {
    color: green;
}

.bold {
    font-weight: bold;
}

2.3, label selector

In addition to using id selectors and class selectors, we can also use label selectors directly.
Requirement description: Add a yellow font style to all paragraph tags and a red font style to all hyperlink tags

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打开百度，你就知道！</a>

p {
    color: yellow;
}

a {
    color: red;
}

2.4, child selector

A child selector can select all child elements of the current element. When defining, use > to separate.
Requirement description: Set the red text style for all h1 child nodes under the div tag

<div>
    <h1>儿子标题</h1>
    <span><h1>孙子标题</h1></span>
    <h1>儿子标题</h1>
</div>

div>h1{
    color: red;
}

2.5, offspring selector

In addition to parallel writing, label elements can also be nested. The descendant selector is a selector used to select nested label elements. When defining, separate them with spaces.
Requirement description: Add red text to hyperlink tags in all paragraph tags

<p class="part">
    <a href="http://www.baidu.com/">打开百度，你就知道！</a>
</p>
<a href="http://www.baidu.com/">打开百度，你就知道！</a>

.part a {
    color: red;
}

2.6. Adjacent sibling selector

Can select an element immediately after another element that has the same parent element. If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector (Adjacent sibling selector). When defining, use + to separate.
Requirement description: Set the yellow text style for the first p tag element after the div

<div>
    <p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

div + p {
    background-color: yellow;
}

2.7. Subsequent sibling selector

The subsequent sibling selector selects all adjacent sibling elements following the specified element. When defining, use ~ to separate.

Requirement description: Set the yellow text style for all p tag elements after div

<div>
    <p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

div ~ p {
    background-color: yellow;
}

2.8. Intersection selector

The selected elements must meet multiple conditions at the same time before they can be selected, and the intersection selector is for this. When defining, use the tag name.ID name/class name.
Requirement description: Add a green text style to all paragraphs with p tags and class as part

<p class="part">段落</p>
<h1 class="part">标题</h1>

p.part {
    color: red;
}

2.9. Union selector

Multiple elements share a certain attribute, then you can use the union selector. When defining, separate them with commas.

Requirement description: Add red text styles for elements such as p tags, h1 tags, class='link', id='click'

<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com/" class="link">打开百度，你就知道！</a>
<button id="click">我是按钮</button>

p, h1, .link, #click {
    color: red;
}

2.10. Wildcard selector

Wildcard selectors can match any tag, and we often use it to unify page styles.

Requirement description: Set the font of all elements on the page to red text style

<div>DIV文本</div>
<p>P文本</p>
<a href="https://www.baidu.com">打开百度，你就知道！</a>


* {
    color: red;
}

2.11. Pseudo-class selector

CSS pseudo-classes are used to add some special effects to selectors.

2.11.1, input pseudo class

Selector example example description
:focus input:focus The selected element has focus after the input
:checked input:disabled Select all disabled form elements
:disabled input:disabled Select all disabled form elements
:enabled input:enabled Selects all enabled form elements
:in-range input:in-range Selects values ​​within a specified range for an element
:out-of-range input:out-of-range Select values ​​outside the specified range for the element
:invalid input:invalid Select all elements with invalid values
:valid input:valid Select all elements with valid values
:optional input:optional Select elements without a "required" attribute
:required input:required Select elements with a "required" attribute
:read-only input:read-only Select elements with read-only attributes
:read-write input:read-write Select elements with writable attributes

2.11.2, other pseudo-class

Selector example example description
:not(selector) :not§ Select all elements except the p element
:empty p:empty Selects all p elements that have no children
:first-child p:first-child Selects the first child of all p elements
:first-of-type p:first-of-type Each p element selected is the first p element of its parent
:last-child p:last-child Selects the last child of all p elements
:last-of-type p:last-of-type Selects every p element that is the last p element of its parent
:nth-child(n) p:nth-child(2) Selects the positive second child element of the parent element of all p elements
:nth-of-type(n) p:nth-of-type(2) Select the second subelement of p that is a positive number of all p elements
:nth-last-child(n) p:nth-last-child(2) Selects the second-to-last child of the parent of all p elements
:nth-last-of-type(n) p:nth-last-of-type(2) Select the second child element of p from the bottom of all p elements
:only-child p:only-child Selects all p elements that have only one child
:only-of-type p:only-of-type Selects all elements that have only one child element p
:first-letter p:first-letter Select the first letter of each p element
:first-line p:first-line Select the first row of each p element
:before p:before Insert content before each p element
:after p:after Insert content after each p element

2.12. Attribute selector

Attribute selectors can select elements based on their attributes and attribute values.

Requirement description: Set the style for input tags of type text and button

<input type="text" value="文本框">
<input type="button" value="按钮">

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

Requirement description: If the title contains multiple words and is separated by spaces, as long as there is hello in it, set the blue font style for the current label

<h2>将会适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>

<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>

[title~=hello] {
    color: blue;
}

Requirement description: If the title contains a word, as long as there is zh in it, set the blue font style for the current label

<h2>将会适用:</h2>
<p lang="zh">Hello!</p>
<p lang="zh-cn">Hi!</p>

<h2>将不适用:</h2>
<p lang="us">Hello!</p>
<p lang="en">Hi!</p>

[lang|=zh] {
    color: blue;
}

2.13. Substring matching attribute selector

Here's a more advanced selector module, released after CSS2 was finalized, that includes more partial value attribute selectors. According to the specification, it should be called a "substring matching attribute selector". Many modern browsers support these selectors, including IE7.

The following table is a brief summary of these selectors:

type describe
[abc^=“def”] Selects all elements whose abc attribute value starts with "def"
[abc$=“def”] Selects all elements whose abc attribute value ends with "def"
[abc*=“def”] Selects all elements whose abc attribute value contains the substring "def"

If you want to apply styles to all links pointing to baidu, you don't need to specify a class for all these links, and then write styles based on this class, but only need to write the following rules:

a[href*="baidu.com"] {
    color: red;
}

2. CSS Common Styles

3.1. Background style

The CSS background property is used to style the background of HTML elements.

Attributes describe
background Shorthand attribute, the role is to set the background attribute in a declaration.
background-attachment Whether the background image is fixed or scrolls with the rest of the page.
background-color Sets the background color of the element.
background-image Set the image as the background.
background-position Set the starting position of the background image.
background-repeat Sets whether and how the background image repeats.

3.2. Text style

CSS text properties are used to define the style of HTML text content.

Attributes describe
color Set the text color.
direction Set the text direction.
letter-spacing Set character spacing.
line-height Set the row height.
text-align Aligns text within an element.
text-decoration Add decorations to text.
text-indent Indents the first line of text in an element.
text-shadow Sets the text shadow.
text-transform Controls letters in elements.
unicode-bidi Sets or returns whether the text is overwritten.
vertical-align Sets the vertical alignment of the element.
white-space Sets how whitespace in elements is handled.
word-spacing Set the word spacing.

3.3. Font style

Attributes describe
font Set all font properties in one declaration.
font-family Specifies the font family for the text.
font-size Specifies the font size of the text.
font-style Specifies the font style of the text.
font-variant Display text in small caps or normal font.
font-weight Specifies the weight of the font.

3.4. Link style

<a href="https://www.baidu.com/">打开百度，你就知道！</a>

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

注意：推荐使用顺序为link、visited、hover、active

3.5、列表样式

CSS 列表属性用于定义HTML常见列表的样式。

属性 描述
list-style 简写属性，用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

3.6、表格样式

CSS 表格属性用于定义HTML表格的样式。

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

3.7、轮廓样式

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

属性 描述
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。

四、CSS盒子模型

4.1、概述

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距、边框和外边距。

下面的例子中的元素的总宽度为300px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算：
300px (宽)

  • 50px (左 + 右填充)
  • 50px (左 + 右边框)
  • 50px (左 + 右边距)
    = 450px

也就是如下的图：

  • 最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 最终元素的总高度计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

4.2、内边距

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

在这里插入图片描述

常用的属性：

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

4.3、边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，CSS边框属性允许你指定一个元素边框的样式和颜色。

常用的属性：

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

4.4、外边距

margin 清除周围的（外边距）元素区域，margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

常用的属性：

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

4.5、外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

五、CSS显示特性

5.1、块级元素

块级元素(block)特性：

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

块级元素主要有：

  • address
  • blockquote
  • center
  • dir
  • div
  • dl
  • fieldset
  • form
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • hr
  • isindex
  • menu
  • noframes
  • noscript
  • ol
  • p
  • pre
  • table
  • ul
  • li

5.2、内联元素

内联元素(inline)特性：

  • 和相邻的内联元素在同一行
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小

内联元素主要有：

  • a
  • abbr
  • acronym
  • b
  • bdo
  • big
  • br
  • cite
  • code
  • dfn
  • em
  • font
  • i
  • img
  • input
  • kbd
  • label
  • q
  • s
  • samp
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • textarea
  • tt
  • u
  • var

5.3、可变元素

可变元素主要有： 根据上下文关系确定该元素是块元素还是内联元素

applet ,button ,del ,iframe , ins ,map ,object , script

5.4、类别修改

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

  • display:block – 显示为块级元素
  • display:inline – 显示为内联元素
  • display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有

  • 元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

  • 5.5、元素隐藏

    隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

    但两者的区别在于：

    • display:none ：使元素在网页上不可见，元素不再占用空间。
    • visibility: hidden ：使元素在网页上不可见，元素仍会占用空间。

    六、CSS定位

    6.1、概述

    CSS 定位和浮动

    CSS 定位 (Positioning) 属性允许你对元素进行定位。

    CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

    定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

    另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

    CSS 定位机制

    CSS 有三种基本的定位机制：普通流（相对定位）、绝对定位和浮动定位。

    除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。

    块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

    CSS 定位属性

    通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

    值 描述
    absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left: 20” 会向元素的 left 位置添加 20 像素。
    static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
    inherit 规定应该从父元素继承 position 属性的值。

    注意：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

    6.2、相对定位

    相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

    如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

    #box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

    如下图所示：

    注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

    6.3、绝对定位

    绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

    普通流中其它元素的布局就像绝对定位的元素不存在一样：

    #box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

    如下图所示：

    绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

    对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

    注意：根据用户代理的不同，最初的包含块可能是画布或 HTML元素。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

    6.4、浮动定位

    浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

    CSS 浮动演示

    请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

    再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

    如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

    如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

    CSS 浮动属性

    在 CSS 中，我们通过 float 属性实现元素的浮动。

    值 描述
    left 元素向左浮动。
    right 元素向右浮动。
    none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
    inherit 规定应该从父元素继承 float 属性的值。

    行框和清理

    浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：

    要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

    这是一个有用的工具，它让周围的元素为浮动元素留出空间。

    让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

    .news {
    background-color: gray;
    border: solid 1px black;
}

.news img {
    float: left;
}

.news p {
    float: right;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

    这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

    如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

    不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

    .news {
    background-color: gray;
    border: solid 1px black;
}

.news img {
    float: left;
}

.news p {
    float: right;
}

.clear {
    clear: both;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

    这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。不过我们还有另一种办法，那就是对容器 div 进行浮动：

    .news {
    background-color: gray;
    border: solid 1px black;
    float: left;
}

.news img {
    float: left;
}

.news p {
    float: right;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

    这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理，这有助于减少或消除不必要的标记。

    七、CSS3

    CSS3概述
    CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。

    对CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远支持CSS2。

    CSS3边框
    通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框，并且不需使用设计软件，比如 PhotoShop。

    属性 说明
    border-image 设置所有边框图像的速记属性。
    border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
    box-shadow 附加一个或多个下拉框的阴影

    CSS3圆角
    使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

    属性 描述
    border-radius 所有四个边角 border-radius 属性的缩写。
    border-top-left-radius 定义了左上角的弧度。
    border-top-right-radius 定义了右上角的弧度。
    border-bottom-right-radius 定义了右下角的弧度。
    border-bottom-left-radius 定义了左下角的弧度。

    CSS3背景

    CSS3 中包含几个新的背景属性，提供更大背景元素控制。

    顺序 描述
    background-clip 规定背景的绘制区域。
    background-origin 规定背景图片的定位区域。
    background-size 规定背景图片的尺寸。

    CSS3渐变

    CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

    以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

    CSS3 定义了两种类型的渐变（gradients）：

    • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
    • 径向渐变（Radial Gradients）- 由它们的中心定义

    7.1、线性渐变

    为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

    线性渐变 - 从上到下（默认情况下）

    #grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

    线性渐变 - 从左到右

    #grad {
    background-image: linear-gradient(to right, red, yellow);
}

    线性渐变 - 对角变化

    #grad {
    background-image: linear-gradient(to bottom right, red, yellow);
}

    如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。语法如下：

    background-image: linear-gradient(angle, color-stop1, color-stop2);

    角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

    但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

    下面的实例演示了如何在线性渐变上使用角度：

    #grad {
    background-image: linear-gradient(-90deg, red, yellow);
}

    下面的实例演示了如何设置多个颜色节点：

    #grad {
    background-image: linear-gradient(red, yellow, green);
}

    下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

    #grad {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

    下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

    #grad {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

    下面的实例演示了一个重复的线性渐变：

    #grad {
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

    7.2、径向渐变

    径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

    径向渐变 - 颜色节点均匀分布（默认情况下）

    #grad {
    background-image: radial-gradient(red, yellow, green);
}

    径向渐变 - 颜色节点不均匀分布

    #grad {
    background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

    设置形状

    shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

    形状为圆形的径向渐变：

    #grad {
    background-image: radial-gradient(circle, red, yellow, green);
}

    不同尺寸大小关键字的使用

    size 参数定义了渐变的大小。它可以是以下四个值：

    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner

    带有不同尺寸大小关键字的径向渐变：

    #grad1 {
    background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
    background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

    重复的径向渐变

    repeating-radial-gradient() 函数用于重复径向渐变：

    #grad {
    background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

    7.3、CSS3文本效果

    CSS3中包含几个新的文本特征。

    属性 描述
    hanging-punctuation 规定标点字符是否位于线框之外。
    punctuation-trim 规定是否对标点字符进行修剪。
    text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
    text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
    text-outline 规定文本的轮廓。
    text-overflow 规定当文本溢出包含元素时发生的事情。
    text-shadow 向文本添加阴影。
    text-wrap 规定文本的换行规则。
    word-break 规定非中日韩文本的换行规则。
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

    7.4、CSS3字体

    使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

    使用 CSS3，网页设计师可以使用它/她喜欢的任何字体。

    当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

    您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

    您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

    如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

    <style>
    @font-face {
        font-family: myFirstFont;
        src: url(sansation_light.woff);
    }

    div {
        font-family: myFirstFont;
    }
</style>

    下表列出了所有的字体描述和里面的@font-face规则定义：

    |描述符|值|描述|
    |–|–|
    |font-family|name|必需。规定字体的名称。 |
    |src|URL|必需。定义字体文件的 URL。 |
    |font-stretch|normal condensed ultra-condensed extra-condensed semi-condensed expanded |semi-expanded extra-expanded ultra-expanded|可选。定义如何拉伸字体。默认是 “normal”。
    |font-style|normal italic oblique|可选。定义字体的样式。默认是 “normal”。 |
    |font-weight|normal bold 100 200 300 400 500 600 700 800 900|可选。定义字体的粗细。默认是 |“normal”。
    |unicode-range|unicode-range|可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。 |

    八、CSS3 2D 转换

    CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

    在本章您将了解2D变换方法：

    • translate()
    • rotate()
    • scale()
    • skew()
    • matrix()

    8.1、translate() 方法

    translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

    translate(50px, 100px)是从左边元素移动50个像素，并从顶部移动100像素。

    div {
    -webkit-transform: translate(50px, 100px);/*Safari/Chrome浏览器支持*/
    -moz-transform: translate(50px, 100px);/*Firefox浏览器支持*/
    -ms-transform: translate(50px, 100px);/*IE浏览器支持*/
    -o-transform: translate(50px, 100px);/*Opera浏览器支持*/
    transform: translate(50px, 100px);
}

    8.2、rotate() 方法

    rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

    rotate(30deg)代表元素顺时针旋转30度。

    div {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

    8.3、scale() 方法

    scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

    scale(2, 3)转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

    div {
    -webkit-transform: scale(2, 3);
    -moz-transform: scale(2, 3);
    -ms-transform: scale(2, 3);
    -o-transform: scale(2, 3);
    transform: scale(2, 3);
}

    8.4、skew() 方法

    skew() 方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

    skew(30deg, 20deg)元素在X轴和Y轴上倾斜20度30度。

div {
    -webkit-transform: skew(30deg, 20deg);
    -moz-transform: skew(30deg, 20deg);
    -ms-transform: skew(30deg, 20deg);
    -o-transform: skew(30deg, 20deg);
    transform: skew(30deg, 20deg);
}

    8.5、matrix() 方法

    matrix()方法和2D变换方法合并成一个。

    matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

    div {
    -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    -ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    -o-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}

    2D 转换属性

    属性 描述
    transform 适用于2D或3D转换的元素
    transform-origin 允许您更改转化元素位置

    2D 转换方法

    函数 描述
    matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
    translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
    translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
    translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
    scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
    scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
    scaleY(n) 定义 2D 缩放转换，改变元素的高度。
    rotate(angle) 定义 2D 旋转，在参数中规定角度。
    skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
    skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
    skewY(angle) 2D 倾斜转换，沿着 Y 轴。

    九、CSS3 3D 转换

    CSS3 允许您使用 3D 转换来对元素进行格式化。

    在本章中，您将学到其中的一些 3D 转换方法：

    • rotateX()
    • rotateY()

    9.1、rotateX() 方法

    rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

    div {
    -webkit-transform: rotateX(120deg);
    -moz-transform: rotateX(120deg);
    -ms-transform: rotateX(120deg);
    -o-transform: rotateX(120deg);
    transform: rotateX(120deg);
}

    9.2、rotateY() 方法

    rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

    div {
    -webkit-transform: rotateY(120deg);
    -moz-transform: rotateY(120deg);
    -ms-transform: rotateY(120deg);
    -o-transform: rotateY(120deg);
    transform: rotateY(120deg);
}

    3D 转换属性

    属性 描述
    transform 向元素应用 2D 或 3D 转换。
    transform-origin 允许你改变被转换元素的位置。
    transform-style 规定被嵌套元素如何在 3D 空间中显示。
    perspective 规定 3D 元素的透视效果。
    perspective-origin 规定 3D 元素的底部位置。
    backface-visibility 定义元素在不面对屏幕时是否可见。

    3D 转换方法

    函数 描述
    matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
    translate3d(x,y,z) 定义 3D 转化。
    translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
    translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
    translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
    scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
    scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿 X 轴的 3D 旋转。
    rotateY(angle) 定义沿 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
    perspective(n) 定义 3D 转换元素的透视视图。

    十、CSS3过渡

    CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    要实现这一点，必须规定两项内容：

    • 指定要添加效果的CSS属性
    • 指定效果的持续时间

    应用于宽度属性的过渡效果，时长为 2 秒：

    div {
    width: 100px;
    height: 100px;
    background: red;
    
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -ms-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
}

    注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

    指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

    div:hover {
    width: 300px;
}

    注意：当鼠标光标移动到该元素时，它逐渐改变它原有样式。

    要添加多个样式的变换效果，添加的属性由逗号分隔：

    div {
    width: 100px;
    height: 100px;
    background: red;
    
    -webkit-transition: width 2s, height 2s;
    -moz-transition: width 2s, height 2s;
    -ms-transition: width 2s, height 2s;
    -o-transition: width 2s, height 2s;
    transition: width 2s, height 2s;
}

div:hover {
    width: 300px;
    height: 300px;
}

    过渡属性

    属性 描述
    transition 简写属性，用于在一个属性中设置四个过渡属性。
    transition-property 规定应用过渡的 CSS 属性的名称。
    transition-duration 定义过渡效果花费的时间。默认是 0。
    transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
    transition-delay 规定过渡效果何时开始。默认是 0。

    十一、CSS3动画

    CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

    要创建 CSS3 动画，你需要了解 @keyframes 规则。

    @keyframes 规则是创建动画。

    @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

    当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

    指定至少这两个CSS3的动画属性绑定向一个选择器：

    • 规定动画的名称
    • 规定动画的时长

    把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

    @keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-webkit-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-moz-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-ms-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

@-o-keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

div {
    width: 300px;
    height: 300px;
    background: black;

    -webkit-animation: myfirst 5s;
    -o-animation: myfirst 5s;
    animation: myfirst 5s;
}

    您可以改变任意多的样式任意多的次数。

    请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

    0% 是动画的开始，100% 是动画的完成。

    为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

    动画属性

    属性 描述
    @keyframes 规定动画。
    animation 所有动画属性的简写属性。
    animation-name 规定 @keyframes 动画的名称。
    animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    animation-timing-function 规定动画的速度曲线。默认是 “ease”。
    animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未
    animation-delay 规定动画何时开始。默认是 0。
    animation-iteration-count 规定动画被播放的次数。默认是 1。
    animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
    -play-state 规定动画是否正在运行或暂停。默认是 “running”。

    十二、CSS3多列

    CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例：

    下表列出了所有 CSS3 的多列属性：

    属性 描述
    column-count 指定元素应该被分割的列数。
    column-fill 指定如何填充列。
    column-gap 指定列与列之间的间隙。
    column-rule 所有 column-rule-* 属性的简写。
    column-rule-color 指定两列间边框的颜色。
    column-rule-style 指定两列间边框的样式。
    column-rule-width 指定两列间边框的厚度。
    column-span 指定元素要跨越多少列。
    column-width 指定列的宽度。
    columns column-width 与 column-count 的简写属性。

    十三、CSS3用户界面

    在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

    在本章中，您将了解以下的用户界面属性：

    resize
    box-sizing
    outline-offset
    13.1、调整尺寸(resize)
    CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

    由用户指定一个div元素尺寸大小：

    div {
    width: 300px;
    height: 300px;
    background: red;
    /*div右下角会多出一个小三角*/
    resize: both;
    overflow: auto;
}

    13.2、方框大小调整(box-sizing)

    box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

    规定两个并排的带边框方框：

    div {
    width: 300px;
    height: 300px;
    background: red;

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

    13.3、外形修饰(outline-offset)

    outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

    轮廓与边框有两点不同：

    • 轮廓不占用空间
    • 轮廓可能是非矩形
    div {
    width: 300px;
    height: 300px;
    background: red;

    border: 2px solid black;
    outline: 2px solid blue;
    outline-offset: 15px;
}

    13.4、新的用户界面特性

    属性 说明
    resize 指定一个元素是否是由用户调整大小。
    box-sizing 允许你以适应区域而用某种方式定义某些元素。
    outline-offset 外轮廓修饰并绘制超出边框的边缘。

    十四、CSS3弹性盒子

    CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

    弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

    弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

    弹性容器内包含了一个或多个弹性子元素。

    注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

    下表列出了在弹性盒子中常用到的属性：

    属性 描述
    display 指定HTML元素盒子类型。
    flex-direction 指定了弹性容器中子元素的排列方式。
    justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
    align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
    flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
    align-content 修改flex-wrap属性的行为，类似align-items,但不是设置子元素对齐，而是设置行对齐。
    flex-flow flex-direction和flex-wrap的简写。
    order 设置弹性盒子的子元素排列顺序。
    align-self 在弹性子元素上使用。覆盖容器的align-items属性。
    flex 设置弹性盒子的子元素如何分配空间。

    十五、CSS3多媒体大小

    15.1、多媒体概述

    CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。

    目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。媒体查询可用于检测很多事情，例如：

    • viewport(视窗) 的宽度与高度
    • 设备的宽度与高度
    • 朝向 (智能手机横屏，竖屏) 。
    • 分辨率

    多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

    @media not|only mediatype and (expressions) {
    CSS 代码...;
}

    如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

    除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

    • not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
    • only: 用来定某种特别的媒体类型。对于支持Media
    • Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
    • all: 所有设备，这个应该经常看到。
      你也可以在不同的媒体上使用不同的样式文件：
    <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

    15.2、多媒体类型

    值 描述
    all 用于所有多媒体类型设备
    print 用于打印机
    screen 用于电脑屏幕，平板，智能手机等。
    speech 用于屏幕阅读器

    15.3、多媒体功能

    值 描述
    aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
    color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
    color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
    device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比
    device-height 定义输出设备的屏幕可见高度。
    device-width 定义输出设备的屏幕可见宽度。
    grid 用来查询输出设备是否使用栅格或点阵。
    height 定义输出设备中的页面可见区域高度。
    max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
    max-color 定义输出设备每一组彩色原件的最大个数。
    max-color-index 定义在输出设备的彩色查询表中的最大条目数。
    max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
    max-device-height 定义输出设备的屏幕可见的最大高度。
    max-device-width 定义输出设备的屏幕最大可见宽度。
    max-height 定义输出设备中的页面最大可见区域高度。
    max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
    max-resolution 定义设备的最大分辨率。
    max-width 定义输出设备中的页面最大可见区域宽度。
    min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
    min-color 定义输出设备每一组彩色原件的最小个数。
    min-color-index 定义在输出设备的彩色查询表中的最小条目数。
    min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
    min-device-width 定义输出设备的屏幕最小可见宽度。
    min-device-height 定义输出设备的屏幕的最小可见高度。
    min-height 定义输出设备中的页面最小可见区域高度。
    min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
    min-resolution 定义设备的最小分辨率。
    min-width 定义输出设备中的页面最小可见区域宽度。
    monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
    orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
    resolution 定义设备的分辨率。如：96dpi,300dpi,118dpcm
    scan 定义电视类设备的扫描工序。
    width 定义输出设备中的页面可见区域宽度。

    15.4、多媒体实例

    以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色：

    @media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

    以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

    @media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

Guess you like

Origin blog.csdn.net/qq_32907491/article/details/131739580
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com