CSS3高阶

一 . 边框border

1.圆角边框borde-radius

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同
• border-top-left–radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。

2.盒阴影box-shadow

• box-shadow: h-shadow v-shadow blur spread color inset;

• boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

  值	说明
  h-shadow	必需的。水平阴影的位置。允许负值
  v-shadow	必需的。垂直阴影的位置。允许负值
  blur	可选。模糊距离
  spread	可选。阴影的大小
  color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

3.边界图片border-image

• 将图片规定为包围div的边框

• -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 /
  -o-border-image:url(border.png) 30 30 round; / Opera */
  border-image:url(border.png) 30 30 round;

• 简写属性border-image：source slice width outset repeate;

• border-image-slice:图片边框向内偏移，没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素，剪裁位置(27)。

  值	描述
  number	数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
  %	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
  fill	保留边框图像的中间部分。

• border-image-outset：边框图像区域超出边框的量

  • border-image-outset: length|number;

    注释：border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

• border-image-repeate：图像边框是否平铺（repeated），铺满（rounded）或拉伸（streched）；

  • 该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

    值	描述
    stretch	拉伸图像来填充区域
    repeat	平铺（重复）图像来填充区域。
    round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

4.简写属性

1. border：width style color;

2.borde-width属性

• 4个值时 ，如 border-width:thin medium thick 10px;上细右中等下粗，左为10像素的边框
• 3个值时，上 右和左 下
• 2个值时 ， 上和下 左和右
• 1个值时 ， 所有边框都一样

3.border-style属性

• 属性值个数如上图，值的分布状况也一样
• none：无边框
• hidden：与：none相同，不过，应用于表时除外，对于表，hidden解决边框冲突问题
• dotted：点状边框
• dashed：虚线
• solid：实线
• double：双线
• groove/ridge：定义3D凹槽边框/3D 垄状边框。其效果取决于border-color
• inset/outset：定义 3D inset/outset 边框。其效果取决于 border-color 的值。
• inherit：指定应该从父元素继承border属性值

4.表格边框border-collapse

• border-collapse属性设置表格的边框是否合并为一个单一的边框，还是像标准的html中那样分开显示
• 属性值
  • collapse：边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性
  • separate：默认值，边框会被分开，不会忽略border-spacing和empty-cells属性
  • inherit：规定应该从父元素继承border-collapse属性的值
• border-spacing属性设置相邻单元格的边框间的距离（仅用于边框分离模式）
  • 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
  • border-spacing：10px 20px；
• empty-cells属性设置是否显示表格中的空单元格（仅用于分离边框）
  • hidden：不在空单元格周围绘制边框
  • show：在空单元格周围绘制边框，默认
  • inherit：继承
  • 只有指定!DOCTYPE,IE8才支持empty-cells属性

二 . CSS3背景background

1.背景图片background-image

• 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

• background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;

• background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

  • CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

  • 你指定的大小是相对于父元素的宽度和高度的百分比的大小。

  • background-size: length|percentage|cover|contain;

    值	描述
    length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
    percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
    cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

• background-position属性设置背景图像的起始位置。

  • 注意对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”。

  • 示例代码：

    background-image:url(‘smiley.gif’);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;

  • 提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。

  • background-position: horizontal vertical

    水平是

    percentage | length | left | center | right

    垂直是

    percentage | length | top | center | bottom

• background-Origin属性指定了背景图像的位置区域。

  • background-Origin属性指定background-position属性应该是相对位置。
  • 注意：如果背景图像background-attachment是”固定”，这个属性没有任何效果。
  • content-box, padding-box,和 border-box区域内可以放置背景图像。

• background-clip属性

  • background-clip: border-box|padding-box|content-box;

    值	说明
    border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
    padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
    content-box	背景绘制在内容方框内（剪切成内容方框）。

2.背景固定属性background-attachment

• background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

值	说明
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

3.背景层混合模式background-blend-mode属性

• background-blend-mode 属性定义了背景层的混合模式（图片与颜色）

• background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

  值	描述
  normal	默认值。设置正常的混合模式。
  multiply	正片叠底模式。
  screen	滤色模式。
  overlay	叠加模式。
  darken	变暗模式。
  lighten	变亮模式。
  color-dodge	颜色减淡模式。
  saturation	饱和度模式。
  color	颜色模式。
  luminosity	亮度模式。

4.背景颜色background-color

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

1 . CSS3渐变Gradients

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

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

  • background: linear-gradient(direction, color-stop1, color-stop2, …);

  • 例子 ：都是从左开始渐变

    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 /
    background: -o-linear-gradient(right, red, blue); / Opera 11.1 - 12.0 /
    background: -moz-linear-gradient(right, red, blue); / Firefox 3.6 - 15 /
    background: linear-gradient(to right, red , blue); / 标准的语法（必须放在最后） */

  • 使用角度

    • background: linear-gradient(angle, color-stop1, color-stop2);
    • 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
    • 但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

  • 使用透明度（Transparency）

    • CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。为了添加透明度，我们使用 rgba() 函数来定义颜色结点。
    • rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

  • 重复的线性渐变

    • repeating-linear-gradient() 函数用于重复线性渐变
    • background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

• 径向渐变（Radial Gradients）- 由它们的中心定义

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

  • background: radial-gradient(center, shape size, start-color, …, last-color);

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

    • background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

  • 设置形状

    • shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
    • background: -webkit-radial-gradient(circle, red, yellow, green);

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

    • closest-side

    • farthest-side

    • closest-corner

    • farthest-corner

三 . 文本效果

1.文字阴影text-shadow

• text-shadow: h-shadow v-shadow blur color;
• text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

2.文字溢出text-overflow

• text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

• text-overflow: clip|ellipsis|string;

  值	描述
  clip	修剪文本。
  ellipsis	显示省略符号来代表被修剪的文本。
  string	使用给定的字符串来代表被修剪的文本。

3.文字换行word-wrap

注意：所有主流浏览器都不支持

• word-wrap属性允许长的内容可以自动换行。

• word-wrap: normal|break-word;

  值	描述
  normal	只在允许的断字点换行（浏览器保持默认处理）。
  break-word	在长单词或 URL 地址内部进行换行。

4.单词拆分换行word-break

• word-break 属性规定自动换行的处理方法。

• word-break: normal|break-all|keep-all;

  值	描述
  normal	使用浏览器默认的换行规则。
  break-all	允许在单词内换行。
  keep-all	只能在半角空格或连字符处换行。

5.文本最后一行对齐text-align-last

• 只有 Internet Explorer 支持 text-align-last 属性。Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。
• 注意：text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。
• text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

7.文本修饰text-decoration

• 值	描述
  none	默认。定义标准的文本。
  underline	定义文本下的一条线。
  overline	定义文本上的一条线。
  line-through	定义穿过文本下的一条线。
  blink	定义闪烁的文本。
  inherit	规定应该从父元素继承 text-decoration 属性的值。

8.文本首行缩进text-indent

• text-indent 属性规定文本块中首行文本的缩进。负值是允许的。如果值是负数，将第一行左缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

9.文本大小写转换text-transform

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

10.字间距word-space

• 负值是允许的。

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

四 . 多列

1.文本分成多列属性columns

• columns: column-width column-count;

值	描述
column-width	列的宽度
column-count	列数

2.列间隔column-gap

• column-gap 属性规定列之间的间隔。

• 注释：如果列之间设置了 column-rule，它会在间隔中间显示。

  column-gap: length|normal;

  值	描述
  length	把列间的间隔设置为指定的长度。
  normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

3.指定列间的规则column-rule

• column-rule: column-rule-width column-rule-style column-rule-color;

  值	说明
  column-rule-width	设置列中之间的宽度规则
  column-rule-style	设置列中之间的样式规则
  column-rule-color	设置列中之间的颜色规则

• column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

• column-rule-width: thin|medium|thick|length;

• column-span: 1|all;

  值	描述
  1	元素应横跨一列。
  all	元素应横跨所有列。

五 . 用户界面

1.调整尺寸resizing

• resize属性指定一个元素是否是由用户调整大小的

• 注意：resize属性适用于计算其他元素的溢出值是不是“visible”

• resize:none| both | horizontal | vertical;

  值	描述
  none	用户无法调整元素的尺寸。
  both	用户可调整元素的高度和宽度。
  horizontal	用户可调整元素的宽度。
  vertical	用户可调整元素的高度。

2.方框大小调整box-sizing

• box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

• box-sizing: content-box|border-box|inherit:

  值	说明
  content-box	这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
  border-box	指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算
  inherit	指定box-sizing属性的值，应该从父元素继承

3.外形调整outline-off

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

• outline属性的简写顺序：color——style——width

• outline-offset属性设置轮廓框架在border边缘外的偏移

• outlines在两个方面可能不同于边框

  • outlines不占用空间
  • outlines可能非矩形

• outline-offset: length|inherit:

  值	描述
  length	轮廓与边框边缘的距离。
  inherit	规定应从父元素继承 outline-offset 属性的值。

4.标准用户界面appearance

• appearance: normal|icon|window|button|menu|field;

  值	说明
  normal	正常呈现元素
  icon	作为一个小图片的呈现元素
  window	作为一个视口呈现元素
  button	作为一个按钮，呈现元素
  menu	作为一个用户选项设定呈现元素选择
  field	作为一个输入字段呈现元素

六 .盒子模型box-sizing

• 用于控制元素的盒子模型的解析模式

• CSS 3中，所有的页面元素都包含在一个矩形框内，称为盒子。盒子描述了元素及其属性在页面布局中所占的空间大小。

  

1.标准盒模型box-sizing：content-box；

• W3C默认的标准盒子模型
• 宽度计算，总宽度=内容宽（width）+border+padding+margin；
• 这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。
• 注意：我们通过JavaScript代码获取某一个元素的大小时，所得到的width和height其实是盒子模型中的content的大小。

2.IE传统盒子模型box-sizing：border-box；

• 总宽度=内容宽（width+padding+border）+margin；
• 假设我们有这样的一个场景，设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。
• 表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

3.外边距重叠

• 两个外边距相加，并没有重叠，而是取两者间的最大值
• 解决方法
  • 两者只设置其中一个
  • 两者间添加内容

4.子改父改问题

• 当两个div是父子级关系时，当为子级元素设置外边框时，子级会将上外边距的值传给父级，导致父，子级的显示同时改变
• 解决方法
  • 给父级的div设置上内边距padding-top（改变父级div的height）
  • 给父级div设置透明边框border：1px solid transparent;(同时改变父级div的height和width)

5.盒模型在不同情况下的表现

1.块级元素盒模型的默认宽度

如果一个块级元素未声明明确的宽度，并且是static或者relative定位，那么他的宽度将会保持100%的宽度（这里的100%指的是其最近父层元素），同时盒子的padding和border会向内推动而不是向外扩展。

• 但是，如果一旦明确设置了宽度为100%，那么padding将会向外延伸。

2.无宽度的绝对定位盒子

• 未设置宽度的绝对定位的盒子的表现与之前有点不同。它的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加。这种情况会持续到盒子的宽度达到父层元素宽度的100%（最近的相对定位的父元素或者浏览器窗口），如果再超出，文本就会发生折行。
• 对盒子来说，垂直扩展以适应包含的内容是很自然的。但是值得奇怪的是，不仅仅是不同平台下的文本表现不同，不同的浏览器处理这个问题时，也有很多怪癖。

3.内联元素的盒模型

• padding应用在文本的上部或下部，但是当折行时它会忽略上面一行的padding并且以行高（line-height）要求的位置作为起点。而设置的margin值只在第一行有效，因为那是盒子的起点

6.CSS3弹性盒子flexbox

• 而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。

• 弹性盒子是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

• 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

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

  

1.指定弹性子元素在父容器中的位置flex-direction

• flex-direction 属性规定灵活项目的方向。

• 当你调转行和列的方向时，flex-start和flex-end对应的方向也被调转；

• 当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

• flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

  值	描述
  row	默认值。灵活的项目将水平显示，正如一个行一样。
  row-reverse	与 row 相同，但是以相反的顺序。
  column	灵活的项目将垂直显示，正如一个列一样。
  column-reverse	与 column 相同，但是以相反的顺序。
  initial	设置该属性为它的默认值。
  inherit	从父元素继承该属性。

2.内容（横轴上）对齐justify-content属性

• 内容对齐justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

• justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

• justify-content: flex-start | flex-end | center | space-between | space-around；

  • flex-start：

    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：

    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：

    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：

    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：

    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

3.侧轴方向上的对齐方式align-items

• align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
• align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

4.弹性盒子子元素换行方式flex-wrap

• flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

• flex-wrap ：normal | wrap | wrap-reverse | initial |inherit ;

  值	描述
  nowrap	默认值。规定灵活的项目不拆行或不拆列。
  wrap	规定灵活的项目在必要的时候拆行或拆列。
  wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
  initial	设置该属性为它的默认值。
  inherit	从父元素继承该属性

5.设置各个行（垂直方向）的对齐aign-content

• 设置行与行之间的距离
• align-content属性在弹性容器内的各项没有占用交叉轴上所有可用空间时对齐容器内的各项（只在垂直方向上，都是单独占据一行）
• align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

6.排列弹性子元素order

• 用整数来定义排列顺序，数值小的排在前面，可为负值。 设置或检索弹性盒模型对象的子元素出现的順序。
• order: number|initial|inherit;

7.完美居中margin：auto；

• 使用弹性盒子，只需设置margin：auto；可使得弹性子元素在两上轴方向上完全居中

8.设置弹性元素自身在侧轴方向上的对齐方式align-self

• align-self:auto | flex-start | flex-end | center | baseline | stretch

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

  • align-self 属性可重写灵活容器的 align-items 属性。

9.指定子元素如何分配空间flex

• flex属性用于设置和检索弹性盒模型对象的子元素如何分配空间

• flex属性是flex-grow，flex-shrink和flex-basis属性的简写属性

• 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

• flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

  值	描述
  flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
  flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
  flex-basis	项目的长度。合法值：”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。
  auto	与 1 1 auto 相同。
  none	与 0 0 auto 相同。
  initial	设置该属性为它的默认值，即为 0 1 auto。
  inherit	从父元素继承该属性。

10.设置flex容器的对齐方式align-items

• 使用每个flex对象元素的 align-self 属性可重写 align-items 属性。

• align-items： stretch | center | flex-start | flex-end | baseline | initial | inherit;

  值	描述
  stretch	默认。 拉伸元件以适应容器。
  center	中心元素在容器内。
  flex-start	位置元素在容器的开头。
  flex-end	位置元素在容器的末端。
  baseline	位置元素在容器的基线。
  initial	设置为默认值。
  inherit	从其父元素继承此属性。

七 . 重置所有属性all

• all 属性用于重置所有属性，除了 unicode-bidi 和 direction。

• all: initial|inherit|unset;

  值	描述
  initial	修改所有元素属性或父元素的值为其初始化值
  inherit	修改所有元素属性或父元素的值为其父元素的值
  unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

八 . 多媒体查询@media

• CSS3的多媒体查询继承了CSS2多媒体查询类型的所有思想：取代了查找设备的类型，CSS3根据设置自适应显示。适合于设置设计响应式的页面。

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

• 媒体查询可检测的东西

  • viewport（视图）的宽度与高度
  • 设备的宽高
  • 朝向（智能手机横屏，竖屏）
  • 分辨率

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

  • 如果指定的多媒体类型匹配设备类型则查询结果返回 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">

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

九 . 选择器

优先级

• 第一个数字(a)通常就是0，除非在标签上使用style属性；
  第二个数字(b)是该选择器上的id的数量的总和；
  第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
  第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；通用选择器(*)是0优先级；

• 

1，基本选择器语法

选择器	类型	功能描述
*	通配选择器	选择文档中所有HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型元素
.class	类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

2，层次选择器语法

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

3，动态伪类选择器语法

选择器	类型	功能描述
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active	用户行为选择器	选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover	用户行为选择器	选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus	用户行为选择器	选择匹配的E元素，而且匹配元素获取焦点

4，目标伪类选择器

选择器	功能描述
E:target	选择匹配E的所有元素，且匹配元素被相关URL指向

5，UI元素状态伪类选择器语法

选择器	类型	功能描述
E:checked	选中状态伪类选择器	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

6，结构伪类选择器使用语法

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n) 中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

7，否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

8，属性选择器语法

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

注：例

其中a[class=”links”]{……} 是找不到匹配元素，只有a[class=”links item”]{……}才匹配

十 . 定位position

1.绝对定位absolute

• 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
• Absolutely定位使元素的位置与文档流无关，因此不占据空间,Absolutely定位的元素和其他元素重叠。
• 相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

2.相对定位relative

• 相对定位元素的定位是相对其正常位置。
• 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
• 相对定位元素经常被用来作为绝对定位元素的容器块。

3.没有定位static

• HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

4.固定定位fixed

• 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
• Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

5.堆叠元素z-index

• 元素的定位与文档流无关，所以它们可以覆盖页面上的其他元素

• z-index属性指定了一个元素的堆叠顺序，具有更高堆叠顺序的总是在较低的堆叠顺序元素的前面

• 如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面

  值	描述
  auto	默认。堆叠顺序与父元素相等。
  number	设置元素的堆叠顺序。
  inherit	规定应该从父元素继承 z-index 属性的值。

6.浮动float和清浮动clean

• 注意： 绝对定位的元素忽略float属性！

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

• clear属性指定段落的左侧或右侧不允许浮动的元素。

  值	描述
  left	在左侧不允许浮动元素。
  right	在右侧不允许浮动元素。
  both	在左右两侧均不允许浮动元素。
  none	默认值。允许浮动元素出现在两侧。
  inherit	规定应该从父元素继承 clear 属性的值。

十一 . css居中汇总

1.水平居中

margin:0 auto;

必须是块级元素，且给定了宽度

text-align:center;

父级元素是块级元素，自身是行内元素或者行内块元素

width:内容宽；height：内容高；padding：盒宽减去内容宽再除以2；background-clip：content-box；

利用padding和background-clip配合实现div的水平居中

.parent{margin:0 auto;width:200px;height:200px;background-color:red;}.children {width: 100px;height: 100px;padding: 50px;background-color: black;background-clip:content-box;/居中的关键/

line-height:盒子高

自身或者父级元素必须有具体行高

position加translate（-50%，-50%），百分比以自身为基准,适合没固定大小的内容（min-width,max-height,overflow:scroll)

2 . 垂直居中

#ex3_container{ width:200px; height:200px; background-color:yellow; position:relative; }

#ex3_content{ left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }

绝对定位

祖先容器：position：relative；

自身：height：***；position：absolute；margin：auto；top：0；left：0；

高度必须给出，建议加overflow：auto；防止内容溢出

内容元素：position: fixed，z-index: 999，记住父容器元素position: relative

3.视口居中

内容元素： postion：fixed；z-index：999；记住父容器元素position：relative；

.Absolute-Center.is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}

详情请看：https://www.w3cschool.cn/css/css-center.html

网页布局

1.尽力四个阶段

• table表格布局，通过dw拖拽表格或者手写table标签布局
• float浮动以及position定位布局，借助元素盒模型本身的特性以及float position等属性
• flex弹性盒模型布局，革命性的突破，解决传统方案上的三大痛点 排列方向 ，对齐方式，自适应尺寸。是目前最强大，最成熟的布局方案
• grid栅格布局，二维布局，具有强大的内容尺寸和定位能力，适合在两个维度上对齐内容的布局

十二 . Grid布局

1.将容器定义为grid（网格布局）

• display ： grid / inline-grid；

  • grid：生成一个块级网络
  • inline-grid：生成一个内联网格

• 网格容器是所有网格项（grid item)的直接父级元素，将元素定义为网格容器，并未其内容建立新的网格格式上下文。

• 网格项目默认放在行中，并且跨网格容器的全宽

• 注意：float ，display : inline-block ,display :table-cell，vertical-align，column-*属性对网格项无效

2.定义网格行和列grid-template-columns和grid-template-rows

• 使用空格分隔的值列表，用于定义网格的行与列，这些值表示网格轨道（grid track）大小，它们之间的空格表示网格线

• grid-template-columns ： … | … ;

  • track-size :可以是长度值，百分比 ，或者等份网络容器中可用空间（使用fr单位）

  • line-name ： 你可以选择的任意名称

    

• 通过grid-rows可给定行的高度值，若没有给定则按照自身的内容来定义

• 如果你的定义包含多个重复值，可使用repeat（）表示法简化定义

  • grid-template-columns ： repeate（3，20px [col-start]);

• fr单元格允许你用等分容器剩余可用空间来设置网格轨道的大小（grid track）

  • grid-template-columns：1fr 1fr 1fr ;

3.网格区域grid-template-area

• 通过引用grid-area属性指定网格区域名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格
• grid-template-area : “ | . | none | … “ “ ….” ;
  • grid-area-name :由网格项的grid-area指定的网格区域的名称
  • . （点号）：代表一个空的网格区域名称
  • none ： 不定义网格区域

4.简写属性grid-template

• grid-template ：none | grid-template-rows / grid-tempalte-columns ；
  • none ：将属性设置为其初始值
  • grid-template-rows / grid-template-columns ：将grid-template-columns和grid-template-rows设置为特定的值，并且设置grid-template-area为none

5.间距大小column-gap/row-gap

• 设置行/列之间间距的宽度，且只能在行/列之间创建间距，网格外部边缘不会有这个间距
• 简写属性gap
  • gap：row-gap column-gap；
  • gap：15px 10px;表示行间距15px，列间距10px

网格项目

网格项对齐

【justify-self】

justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

`auto | normal | start | ``end` `| center | stretch | baseline | first baseline | last baseline`

网格轨道对齐

　　网格轨道对齐可以相对于网格容器行和列轴。

　　align-content指定网格轨道沿着行轴对齐方式；justify-content指定网格轨道沿着列轴对齐方式。它们支持下面属性：

`normal | start | ``end` `| center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline`

6.行轴线对齐justify-items

• 沿着inline（行）轴线对齐网格项（grid items）此值适用于容器中所有网格项。
• justify-items ：start | end | center | stretch；
  • start ：将网格对齐到其单元格的左侧起始边缘（左侧对齐）
  • end ：右侧对齐
  • center：中间对齐
  • stetch：填满单元格的宽度（默认值）
• 这些行为可通过单独网格项的justify-self属性进行设置

7.列轴线对齐align-items

• 沿着 block（列）轴线对齐网格项(grid items)

• align-items: start | end | center | stretch;
  
      start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
      end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
      center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
      stretch：填满单元格的高度（默认值）

8.对齐简写属性place-items

• place-items ： align-items justify-items ；

9.网格容器大小justify-content

• justify-content : start | end | center | stretch | space-around | space-between | space-evenly ;
  • start：将网格对齐到 网格容器(grid container) 的左侧起始边缘（左侧对齐）
  • end：将网格对齐到 网格容器 的右侧结束边缘（右侧对齐）
  • center：将网格对齐到 网格容器 的水平中间位置（水平居中对齐）
  • stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
  • space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
  • space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
  • space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

10.place-content: align-content justify-content;

11.创建隐式网格轨道

• 指定任何自动生成的网格轨道（grid tracks/隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时就会创建隐式轨道

• 显式的是通过固定数量的网格线和网格轨道进行定义的

• 自动填充轨道auto-fill

  • auto-fill关键字创建适合网格容器的轨道数，而不会导致网格溢出
  • 注：repeat（auto-fill ，1fr）；只会创建一个轨道，因为宽度为1fr的单个轨道已经填满了整个网格容器

• 自动调整轨道auto-fit

  • auto-fit关键字创建适合网格容器的轨道数，但在网格项目放置后，他只会根据需要创建任意数量的轨道，并且任何空的重复轨道都会折叠在一起
  • 可以通过minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压
    • grid-auto-columns：minmax（60px，200px）；
    • 隐式轨道现在至少有60px宽，最大有200ps像素

12.自动放置grid-auto-flow

• 如果项目数超过单元格数，也会添加隐式轨道。默认下，自动放置算法通过连续填充每一行来放置网格项，并根据新行添加新行。可使用grid-auto-flow属性来指定如何把网格项自动放置到网格容器

• 如果网格项数超过单元格数量，则添加新列而不是行

13.未定义显式网格

• 由于可以使用grid-auto-rows和grid-auto-columns自动调整单元格大小，因此不必定义显示网格

推荐网址：https://www.cnblogs.com/wangxiang9528/p/9867822.html

https://www.cnblogs.com/hsprout/p/8277322.html

十三 . flexbox布局

• 任何一个容器都可以指定为flex布局，设置diaplay：flex；属性后，子元素的float，clear和vertical属性将会失效

1.定义在容器的属性

	属性名称	属性含义	属性可能的值
定义在容器的 属性	flex-direction	决定主轴的方向	row(默认) 水平，起点在左端row-reverse 水平，起点在右端column:垂直，起点在上沿column-reverse:垂直，起点在下沿
flex-wrap	决定一条轴线放不下，如何换行	Nowrap(默认) 不换行Wrap:换行，第一行在上面Wrap-reverse:换行，第一行在下面
flex-flow	是上面两个属性的简写	默认值是 row nowrap
justify-content	定义项目在主轴上的对齐方式	Flex-start(默认值）左对齐Flex-end 右对齐Center 居中Space-between:两端对齐，项目之间的间隔都相等Space-around:每个项目之间的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍
align-items	定义项目在交叉轴上如何对齐	Flex-start 交叉轴的起点对齐Flex-end 交叉轴的终点对齐Center:交叉轴的中点对齐Baseline：项目的第一行文字的基线对齐Stretch （默认值）如果项目未设置高度或者设为auto，将占满整个容器的高度
align-content	定义多跟轴线对齐方式，一条轴线该属性不起作用	Flex-start: 与交叉轴的起点对齐Flex-end 与交叉轴的终点对齐Center:与交叉轴的中点对齐Space-between:与交叉轴的两端对齐，轴线之间的间隔平均分布Space-around：每根轴线之间的间隔都相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍
定义在项目上的属性	order	定义项目的排列顺序，数值越小，排列越靠前	默认0
flex-grow	定义项目的放大比例，如果存在剩余空间，不放大	默认0（如果所有项目的flex-grow属性为1，则等分剩余空间）
flex-shrink	定义项目的缩小比例	默认1 负值对该属性无效
flex-basis	定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性来计算主轴是否有多余空间	默认auto,即项目本来大小
flex	是上面三个的简写	默认值 0 1 auto 后两个值可选
align-self	允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性	默认值auto 表示继承父元素的align-items属性，如果没有父元素，则等同于 stretch

https://www.cnblogs.com/hsprout/p/8277322.html（表难看时可看这个链接）

十四 . 补充

1.before和after伪类选择器

• 他们会在被选中的标签周围生成一些内容

• 清除浮动

  .clearfix : after {

  content : “ “;display : block ; clear :both ; visibility : hidden ; font-size :0 ;height: 0;

  }

  .clearfix {

  display : inline-block;height: 1% ;

  }

  上面这段代码会在目标标签后面补上一段空白，然后将他清除。这个方法很实用，特别当 overflow ： hidden ；方法不顶用时

• 要使用伪标签者必须是块式标签

• 选择器大汇总

  • 通用选择器*
  • 标签p class（.） id（#）选择器
  • 后代选择器X Y(X>Y)
  • 相邻选择器X+Y
  • 兄弟选择器X~Y
  • 属性选择器X[title] X[title=“值” ]
  • 开头匹配属性选择器X[href^=”值 “]
  • 结尾匹配属性选择器X[href$=”值 “]
  • 自定义选择器 X[data-*=”foo”]
  • 取反伪类 X:not(selector)
  • 伪元素:first-line,:first-letter,:before,:after
  • 伪类： X:nth-child(n)， X:nth-last-child(n)，X:nth-of-type(n)，X:nth-last-of-type(n)， X:first-child， X:last-child，X:only-child，X:only-of-type，X:first-of-type，

https://www.w3cschool.cn/css/css-selector.html

2.区块属性（block）

• 字间距{letter-spacing：normal；}
• 对齐{text-align ：justify；}（两端对齐）left（左对齐）center（居中）
• 缩进{text-indent：数值px；}
• 垂直对齐{vertical-align：baseline；}（基线）sub；（下标）sup；（上标）top；text-top；middle；bottom；text-bottom；
• 词间距{word-spacing：normal；}数值
• 空格white-space：pre；（保留）nowrap；（不换行）
• 显示{display：block；}（块）inline；list-item；（列表项）run-in；（追加部分）compact；（紧凑）marker；（标记）table；inline-table；table-raw-group；table-header-group；table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

3.透明度opacity

• 如何用CSS实现背景半透明效果？我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。

• 一般情况下，我们可以使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用。解决方法

  • 使用一张透明的图片做背景可以达成效果
  • 使用RGBA

• CSS在设置了透明度的层里，怎么让里面的层不透明

  • 如果是颜色，完全可以用背景色透明 rgba来代替opacity，
  • 如果是图片，就用ps简单处理一下即可。
  • opacity这个属性指定的透明是包括里面的元素的，不可能只有外面透明，里面不透明

• css里边写透明样式怎么写

  • 如果是用样式的话需要用到滤镜
    style=”filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)”

    说明：
    Opacity：起始值，取值为0～100, 0为透明，100为原图。
    FinishOpacity：目标值。
    Style：1或2或3
    StartX：任意值
    StartY：任意值

  • 但是因为滤镜的兼容性问题，最好是不要用，可以用ps做图的时候，把背景调一下透明度后导成png格式的图片就行了，如果透明的背景颜色一样的话，那么你可以切成1px*1px大小的png图片平铺，gif只支持透明度100%也就是完全透明的图片，半透明的不支持，而png格式的图片则不存在什么问题，唯一会有问题的地方就只是IE6不兼容透明png格式而已。

4.css hack（浏览器兼容问题）

• CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的， Hack主要针对IE浏览器。
• CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
  1、属性级Hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。
  2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
  3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<![endif]–>，针对IE6及以下版本：<![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。
• PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。