CSS 学习二：

CSS：
CSS 盒子模型：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
  盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

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

元素的宽度和高度计算：

设置总宽度为250像素的元素:
实例
div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}
最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 边框：
边框样式：border-style属性用来定义边框的样式
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

设置边框样式：http://www.runoob.com/try/try.php?filename=trycss_border-style

边框合并：border-collapse: collapse

边框宽度：通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
实例
p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：

    name - 指定颜色的名称，如 "red"
    RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
    Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

实例：
p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}
边框-单独设置各边：在CSS中，可以指定不同的侧面不同的边框
实例
p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}
上面的例子也可以设置一个单一属性：
实例
border-style:dotted solid;

border-style属性可以有1-4个值：

    border-style:dotted solid double dashed;
        上边框是 dotted
        右边框是 solid
        底边框是 double
        左边框是 dashed

    border-style:dotted solid double;
        上边框是 dotted
        左、右边框是 solid
        底边框是 double

    border-style:dotted solid;
        上、底边框是 dotted
        右、左边框是 solid

    border-style:dotted;
        四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

边框-简写属性

上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在"border"属性中设置：

    border-width              ：边框高度
    border-style (required)   ：边框
    border-color              ：边框颜色

实例
border:5px solid red;

设置边框属性：http://www.runoob.com/css/css-border.html

CSS 轮廓（outline）：

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

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

CSS margin(外边距):CSS margin(外边距)属性定义元素周围的空间
margin:
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
Margin可以使用负值，重叠的内容。

Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：
实例
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin属性可以有一到四个值 (set：px、em、%)。

    margin:25px 50px 75px 100px;
        上边距为25px
        右边距为50px
        下边距为75px
        左边距为100px

    margin:25px 50px 75px;
        上边距为25px
        左右边距为50px
        下边距为75px

    margin:25px 50px;
        上下边距为25px
        左右边距为50px

    margin:25px;
        所有的4个边距都是25px

CSS padding（填充）：CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距

Padding属性，可以有一到四个值 (set：pt、%、em、cm、px )。

  padding:25px 50px 75px 100px;

    上填充为25px
    右填充为50px
    下填充为75px
    左填充为100px

  padding:25px 50px 75px;

    上填充为25px
    左右填充为50px
    下填充为75px

  padding:25px 50px;

    上下填充为25px
    左右填充为50px

  padding:25px;

    所有的填充都是25px

CSS 分组 和 嵌套 选择器:
CSS 分组选择器：
实例
h1,h2,p
{
    color:green;
}
嵌套选择器
它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

    p{ }: 为所有 p 元素指定一个样式。
    .marked{ }: 为所有 class="marked" 的元素指定一个样式。
    .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
    p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

嵌套选择器实例：http://www.runoob.com/try/try.php?filename=trycss_nesting

CSS 尺寸 (Dimension)：http://www.runoob.com/css/css-dimension.html
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

height：设置元素的高度。
line-height     设置行高。
max-height     设置元素的最大高度。
max-width     设置元素的最大宽度。
min-height     设置元素的最小高度。
min-width      设置元素的最小宽度。
width     设置元素的宽度。

CSS Display(显示) 与 Visibility（可见性）

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

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
实例
h1.hidden {visibility:hidden;}   visibility（能见度）：hidden（隐藏）

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

    <h1>
    <p>
    <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

    <span>
    <a>

下面的示例把列表项显示为内联元素：
实例
li {display:inline;}

下面的示例把span元素作为块元素：
实例
span {display:block;}

visibility: collapse：
文本不可见  与visibility: hidden：功能差不多

CSS visibility 属性：
visibility 属性规定元素是否可见

visible ：  默认值。元素是可见的。
hidden     ：  元素是不可见的。
collapse ： 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如                  果此值被用在其他的元素上，会呈现为 "hidden"。
inherit  ： 规定应该从父元素继承 visibility 属性的值。

tr.collapse {
    visibility: collapse;
}
<tr class="collapse">

CSS Position(定位)：http://www.runoob.com/css/css-positioning.html
position 属性指定了元素的定位类型。

position 属性的五个值：

    static        ：HTML元素的默认值，即没有定位。
    relative      ：相对定位元素的定位是相对其正常位置。
    fixed         ：元素的位置相对于浏览器窗口是固定位置
    absolute      ：绝对定位的元素的位置相对于最近的已定位父元素
    sticky        ：粘性定位，基于用户的滚动位置来定位

static 定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。
实例：
div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
实例
p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}
注意：Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

relative 定位：相对定位元素的定位是相对其正常位置。
实例
h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

注：移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
实例
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
注：absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
实例
div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

使用z-index属性，正数或0则文本被覆盖，负数则在文本后面显示。

一个元素可以有正数或负数的堆叠顺序：

实例
img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

图片的裁剪：https://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/
clip 是 CSS2 中的裁剪属性，用于裁剪绝对定位的元素。常用语法为：
clip:rect(top, right, bottom, left)

更改鼠标光标：<span style="cursor:wait">wait</span><br>

笔记：relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了 relative 的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为 relative 定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即 html 元素定位。设置了 absolute 的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。