6_CSS前缀_盒模型_定位_表格列表

css3前缀的使用

1. CSS3目前很多新增属性尚未被W3C列为标准，对这些暂时未被公布为标准的属性，各家浏览器会在属性前加上前缀词，也将其称之为浏览器的私有前缀。
2. W3C官方认为试验阶段的属性仅为了测试，未来可能修改或删除。
3. 对于CSS3中目前主流浏览器不支持属性，本套课程暂不进行讲解.

现在主要流行的浏览器内核有：

• Webkit内核：产要代表为Chrome和Safari
• Trident内核：主要代表为IE浏览器
• Gecko内核：主要代表为Firefox
• Presto内核：主要代表为Opera
• 手机等移动端一般是IOS和安卓系统，基本上采用的都是webkit引擎。

浏览器的私有前缀:

• Webkit内核：前缀为-webkit-
• Trident内核：前缀为-ms-
• Gecko内核：前缀为-moz-
• Presto内核：前缀为-o-

盒模型

了解盒模型的概念：

1. CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。
2. 最内部分是元素内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。

元素的尺寸:

1. height 设置元素的高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
2. width 设置元素的宽度属性值：auto：默认。/px、cm 等单位定义高度。/百分比
3. max-height 设置元素的最大高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
4. max-width 设置元素的最大宽度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
5. min-height 设置元素的最小高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
6. min-width 设置元素的最小宽度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
7. 当属性值用百分比时是相对于父元素的尺寸来说的。
8. 最大最小宽高主要用于动态控制缩放等情况下

padding 属性：元素的内边距:

1. padding-top 属性设置元素的上内边距（空间）。
2. padding-right 属性设置元素右内边距（空白）。
3. padding-bottom 属性设置元素的下内边距（底部空白）。
4. padding-left 属性设置元素左内边距（空白）。
5. padding 属性接受长度值或百分比值，但不允许使用负值。
   • padding * 同时设定四个边距
   • padding ** 分别设定上下、左右边距
   • padding *** 分别设定上、左右、下边距
   • padding **** 分别设定上、右、下、左边距

border属性：元素的边框，是围绕元素内容和内边距的一条或多条线。

1. border属性：
   • 可以按顺序设置如下属性：
   • border-width
   • border-style
     • solid 定义实线。/dotted 定义点状边框/double 定义双线......
   • border-color

margin 属性：元素的外边距:

1. 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
2. margin-top 属性设置元素的上外边距（空间）。
3. margin-right 属性设置元素外内边距（空白）。
4. margin-bottom 属性设置元素的下外边距（底部空白）。
5. margin-left 属性设置元素左外边距（空白）。
6. margin 属性接受长度值或百分比值，允许使用负值。
   • margin * 同时设定四个外边距
   • margin ** 分别设定上下、左右外边距
   • margin *** 分别设定上、左右、下外边距
   • margin **** 分别设定上、右、下、左外边距

外边距的合并

1. 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

溢出的处理

1. overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。
2. overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
3. overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
   • visible 不裁剪内容，可能会显示在内容框之外。
   • hidden 裁剪内容 - 不提供滚动机制。
   • scroll 裁剪内容 - 提供滚动机制。
   • auto 如果溢出框，则应该提供滚动机制。

CSS定位的概念：

1. CSS 定位属性允许对元素进行定位改变其在页面的位置。
2. CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
3. 普通流中的元素的位置由元素在HTML中的位置决定。

元素定位的属性：

1. position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

   • static 默认值。没有定位。
   • absolute 绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。通过绝对定位，元素可以放置到页面上的任何位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。(注：static 定位以外的第一个父元素：相对与最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据 body 对象左上角作为参考进行定位。)

   position: absolute;;
   left: 150px;
   

   • relative 相对定位，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

   position: relative;
   left: 10px;
   

   • fixed 绝对定位，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

   相对窗口定位
   position: fixed;
   left: 10px;
   

   • 绝对定位和相对定位的区别
     • 绝对定位对象可以层叠,相对定位的对象不可以
     • 相对定位对象会占据它原来位置,绝对定位不会

2. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。注：如果 "position" 属性的值为"static"，那么设置 "top" 属性不会产生任何效果。

3. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。注：如果 "position" 属性的值为"static"，那么设置 "right" 属性不会产生任何效果。

4. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。注：如果 "position" 属性的值为"static"，那么设置 "bottom" 属性不会产生任何效果。

5. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。注：如果 "position" 属性的值为"static"，那么设置 "left" 属性不会产生任何效果。

6. clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。

   • 语法 clip: rect(top, right, bottom, left);目前裁切形状只有矩形可以使用
   • rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding一样的标准，遵循顺时针旋转的规则。
   • 注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。
   • auto：这是一个默认值，clip设置auto值和没有进行剪切是一样的效果;

   clip: rect(200px,300px,300px,0px);上右下左，相对上，左距离

7. vertical-align 设置元素的垂直对齐方式。

   • baseline 默认。元素放置在父元素的基线上。
   • top 把元素的顶端与行中最高元素的顶端对齐
   • middle 把此元素放置在父元素的中部。
   • bottom 把元素的底端与行中最低的元素的底端对齐。
   • 数值（像素）/百分比
   • text-top 把元素的顶端与父元素字体的顶端对齐
   • text-bottom 把元素的底端与父元素字体的底端对齐。
   • sub 垂直对齐文本的下标。
   • super 垂直对齐文本的上标

   vertical-align: bottom;

8. z-index 设置元素的堆叠顺序。
   z-index: 1;

9. overflow 设置当元素的内容溢出其区域时发生的事情。

10. float 浮动：定义元素在哪个方向浮动。

    • left 元素向左浮动。
    • right 元素向右浮动。
    • none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

    float: right;

11. clear 浮动的清除：常用属性值 both/left/right/none

    clear: both;

表格有关的属性：

1. border-collapse 设置是否把表格边框合并为单一的边框.属性值：separate 默认值/collapse边框合并

   border-collapse: collapse;

2. border-spacing 设置分隔单元格边框的距离。

   border-spacing: 10px;

3. caption-side 设置表格标题的位置。属性值：top 默认值,在表格之上。bottom在表格之下。

   caption-side: bottom;

4. empty-cells 设置是否显示表格中的空单元格。属性值：hide/show默认

   empty-cells: hide;

5. table-layout 设置显示宽度是否随内容拉伸。属性值：auto默认/fixed列宽由表格宽度和列宽度设定。

   table-layout: fixed;

列表的属性：

1. list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。

   list-style: inside circle;

2. list-style-type 设置列表项标志的类型。

   • none无标记。/disc默认,实心圆。/circle 标记是空心圆。/square实心方块。/
   • decimal 数字。/decimal-leading-zero 0开头的数字/lower-roman小写罗马数字upper-roman大写罗马数字/lower-alpha 小写英文字母/upper-alpha大写英文字母
   • ......日文、拉丁文等其他符合，有兴趣自己查CSS手册。

   list-style-type: circle;

3. list-style-position 设置列表项标志的位置。属性值：inside/outside默认值

   list-style-position: inside;

4. list-style-image 将图象设置为列表项标志。属性值：URL图像的路径。/none默认。无图形被显示。

   list-style-image: url(xx);