CSS学习

1、样式表、选择器

1.1 三种样式表使用

// 内联样式
<div style="width: 100px; height: 100px;"></div>

// 内部样式表
<style type="text/css">
    div {
        width: 100px;
        height: 100px;
    }
</style>

// 外部样式表
<link rel="stylesheet" type="text/css" href="">

1.2三种样式表的权重和优先级

内联样式 > 内部样式表 > 外部样式表

1.3 6大基础选择器

// 1、id选择器：唯一对应
<div id="box"></div>
<style type="text/css">
    #box {
        color: red;
    }
</style>

// 2、类class选择器：统一类
<div class="box"></div>
<style type="text/css">
    .box {
        color: red;
    }
</style>

// 3、标签选择器：初始化标签使用
<div></div>
<style type="text/css">
    div {
        color: red;
    }
</style>

// 4、*通配符标签
<style type="text/css">
    * {
        margin: 0;
    }
</style>

// 5、属性选择器：表单中input常用
<div id="box1"></div>
<a href="http://www.baidu.com"></a>
<style type="text/css">
    [id="box"] {
        color: red;
    }
    [href] {
        text-decoration: none;
    }
</style>

// 6、最高优先权
<style type="text/css">
    div {
        background: red !important;
    }
</style>

1.4 6大基础选择器优先级

!important > id > class | 属性 > 标签 > *

时间设置 transition： all 0.5s
变成手型 cursor：pointer
鼠标进入缩放 img：hover{ transform:scale(1.1)}

2、边框

2.1 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table{
    border-collapse:collapse;
}
table,th, td{
    border: 1px solid black;
}

2.2 边框样式

<style>
    p.none {border-style:none;}
    p.dotted {border-style:dotted;}
    p.dashed {border-style:dashed;}
    p.solid {border-style:solid;}
    p.double {border-style:double;}
    p.groove {border-style:groove;}
    p.ridge {border-style:ridge;}
    p.inset {border-style:inset;}
    p.outset {border-style:outset;}
    p.hidden {border-style:hidden;}
</style>
<div>
    <p class="none">无边框。</p>
    <p class="dotted">虚线边框。</p>
    <p class="dashed">虚线边框。</p>
    <p class="solid">实线边框。</p>
    <p class="double">双边框。</p>
    <p class="groove"> 凹槽边框。</p>
    <p class="ridge">垄状边框。</p>
    <p class="inset">嵌入边框。</p>
    <p class="outset">外凸边框。</p>
    <p class="hidden">隐藏边框。</p>
</div>

2.3 边框宽度

可以通过 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;
}

2.4 边框颜色

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

	name - 指定颜色的名称，如 “red”
	RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
	Hex - 指定16进制值, 如 “#ff0000”
	您还可以设置边框的颜色为”transparent”。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

2.5 单独设置各边的边框

p {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

3、盒子模型

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

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

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

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

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

4、CSS尺寸

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

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

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

6、CSS Position(定位)

position 属性指定了元素的定位类型。
position 属性的五个值：

• static
• relative
• fixed
• absolute
• sticky
  元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

6.1 static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

6.2 fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

6.3 relative 定位

相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

6.4 absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2 {
    position:absolute;
    left:100px;
    top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

6.5 sticky 定位

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

7、 CSS Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。
```javascript

这里的文本内容是可以滚动的，滚动条方向是垂直方向。

这里的文本内容是可以滚动的，滚动条方向是垂直方向。

这里的文本内容是可以滚动的，滚动条方向是垂直方向。

这里的文本内容是可以滚动的，滚动条方向是垂直方向。

这里的文本内容是可以滚动的，滚动条方向是垂直方向。

这里的文本内容是可以滚动的，滚动条方向是垂直方向。

```

8、垂直居中

8.1 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

8.2 垂直居中 - 使用 line-height

8.3 垂直居中对齐 - 使用 padding

9、CSS 组合选择符

10、SASS

10.1 什么是SASS？

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。它是更稳定

和强大的CSS扩展语言，描述文档的样式干净和结构。

10.2 为什么要使用SASS？

• 它是预处理语言，它为CSS提供缩进语法（它自己的语法）。
• 它提供了一些用于创建样式表的功能，允许更有效地编写代码和易于维护。
• 它是超集的CSS，这意味着它包含CSS的所有功能，是一个开源的预处理器，以 Ruby 编码。
• 它提供了比平面CSS好的结构格式的文档样式。 它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操作，数学和参数列表。

10.3 优点

• 它允许在编程结构中编写干净的CSS。
• 它有助于编写CSS更快。
• 它是CSS的超集，帮助设计师和开发人员更有效率和快速地工作。
• 由于Sass兼容所有版本的CSS，我们可以使用任何可用的CSS库。
• 可以使用嵌套语法和有用的函数，如颜色操作，数学和其他值。

10.4 缺点

• 开发人员需要时间了解此预处理器中存在的新功能。
• 如果更多的人在同一个网站上工作，那么将使用相同的预处理器。 有些人使用Sass，有些人使用CSS直接编辑文件。
  因此，它将变得难以与现场工作。
• 有机会失去浏览器的内置元素检查器的好处。