乐趣区

CSS那些事儿

jiezi

多个 class:

css 中允许多个 class：
<h1 class="green bold"> ... </h1>。

选择器：

Chaining Selectors：

举例：如果同时有一个 p 元素和一个 h1 元素下都有一个 class = uppercase，那么可以通过在类名前添加它的父类来加以区分：
注意：两个元素之间没有空格。(类似的，background-image: url(图片地址)，url 和后面的括号之间也不能有空格）

h1.special {}

嵌套元素：

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

想要设置<li> ... </li> 的 css 样式，可以通过嵌套元素的设置方法设置：

.main-list li {}

一次选中多个选择器，并进行 css 格式化：

h1 {font-family: Georgia;}

.menu {font-family: Georgia;}

同时选中：

h1, 
.menu {font-family: Georgia;}

通过用逗号分隔 .h1 和.menu，这两个类都会被相应的 css 格式修饰。

CSS 视觉规则：

CSS declarations are structured into property and value pairs.
CSS 语句都是属性和值相对应的结构。
font-family定义了元素的字体。
font-size 控制文字显示的大小。
font-weight 定义文字的粗细程度。
text-align属性控制文字的对齐方式，可以取的分别为：left, right, center。
文字可以有两种颜色属性：前景色——color和背景色——background-color。color控制文字的颜色，background-color控制文字的背景色。
CSS 中可以用 opacity 属性来令某个元素透明。
CSS 中也可以通过 background-image 属性来设置某个元素的背景为一张图片。

盒模型：

border 属性：

除了颜色、边框样式、边框大小之外，还可以调节边框的圆角大小，单位也是px：

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid rgb(22, 77, 100);
  border-radius: 100%;
}

padding 属性：

可以分别声明 padding-top、padding-right、padding-bottom 以及 padding-left 的值。
同时也可以直接声明 padding: 3px 4px 5 px 6px，顺序分别是上、右、下、左。
使用上面这种写法时，所有边的 padding 数值都必须写明。
不过，如果上下、左右的 padding 值是相等的，也可以写作：
padding: 5px 10px，这代表上下的 padding 都是 5px，而左右的 padding 都是 10px。

margin 属性：

margin 和 padding 类似，也有 margin-top、margin-right、margin-bottom、margin-left。
同样可以写作
margin: 10px 20px 10px 2opx; 或者 margin: 10px 20px;，表示上下边距为 10px，左右边距为 20px。
margin 的叠加有一点特殊：
水平方向的叠加就是简单的数字叠加。例如，如果左边盒子 margin-right = 10px;，而右边盒子的margin-left = 20px;，那么这两个盒子放置在一起时，他们交界处的margin= 10 + 20 = 30px;。
而竖直方向的情况则有所不同，对于叠放的两个盒子，如果上面盒子的 margin-bottom = 30px;，而下面盒子的margin-left = 20px;，则交界处的margin 值 为：30px。
利用 margin 实现居中对齐：
首先需要父元素有固定的 width 或者 height。比如如果想要让div1 实现横向居中对齐，首先应该设置其父元素 div0 的width= 400px，然后在 css 文件 中设置 div1 的 margin 值为：margin: 0 auto;

overflow:

被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围，此时可以通过设置 overflow 的值来进行调整。
overflow 的值可以为：scroll、hide、display。

display 属性：

可以利用 display 属性来设置 HTML 元素的显示方式。
可以设置为：none, block, inline-block, inline。
none表示元素不显示；
block表示显示为块级元素；
inline表示显示为行内元素；
inline-block表示显示为行内块级元素。
块级元素和行内块级元素可以设置 width height 属性，
而行内元素则不能。
注：一旦给元素加上 absolute 或 float 就相当于给元素加上了display:block;。

position 属性:

  1. static
  2. fixed
  3. relative
  4. absolute

1. static 属性：
static 是 html 元素的默认 position 值，也就是按照正常的文档流排列。
2. fixed 属性：
fixed 的效果参见各种定在网页上的广告。
3. relative 属性：
relative 的元素是相对于自己的 default position 来定位的。

<div class="first"> 第一块 </div>
<div class="second"> 第二块 </div>
<div class="third"> 第三块 </div>

<!--css 文件 -->
.first {
  background-color: red;
  color: white;
}

.second {
  background-color: green;
  color: white;
}

.third {
  background-color: blue;
  color: white;
}

3.1 默认情况下：

3.2 当设置第二块 div 的 position 属性为 relative 时：

.second {
  background-color: green;
  position: relative; //relative 定位
  color: white;
}

可以看到与默认情况并无区别，
这是因为没有指定目标 HTML 元素相对其 default position 的偏移量。

3.3 指定偏移量之后：

.second {
  background-color: green;
  position: relative;
  color: white;
  left: 20px;
  top: 20px;
}


3.4 添加 margin/padding 值：
虽然单纯地偏移并不会影响下面的第三块 div，但是如果设置第二块 div 的 padding 或 margin 值，还是会影响到第三块 div 在文档中的位置。

.second {
  background-color: green;
  position: relative;
  color: white;
  margin-bottom: 40px; // 增加底部 40px 的 margin，观察 div3 的位置变化
  padding-bottom: 10px; // 增加底部 10px 的 padding，观察 div3 的位置变化
  left: 20px;
  top: 20px;
}


4. absolute 定位：
4.1 只设置 position：absolute 而不设置偏移量：

.first {
  background-color: red;
  color: white;
  height: 40px; // 为方便观察，把 div1 的高度设为 40px；}

.second {
  background-color: green;
  color: white;
  position: absolute; // 设置 div2 的 position: absolute;

}

.third {
  background-color: blue;
  color: white;
  height: 40px;  // 为方便观察，把 div3 的高度设为 40px；}

结果：

4.2 设置偏移量：
4.2.1 只设置 left 偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px; // 只设置 left 偏移 40px
}

结果：
![[可以看到，div2 向右偏移了 40px，这样似乎和 relative 定位并无不同，但区别在设置 top 偏移量之后就一目了然了]
](https://upload-images.jianshu…
4.2.2 同时设置 left 偏移量和 top 偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px;
  top: 10px; // 同时设置 left 偏移量和 top 偏移量
}

结果：

事实上，absolute 属性就是要配合 relative 属性使用才能更好发挥作用的：
例如，想要在 div3 的任意位置显示一个“发送”按钮：

<div class="first"> 第一块 </div>
<div class="second"> 第二块 </div>
<div class="third">
第三块
<input type="button" class="send-button" value= "发送">
</div>
.third {
  background-color: blue;
  color: white;
  height: 40px;
  position: relative; //relative 定位
}

.send-button {position: absolute; //absolute 定位}


设置“发送按钮”的偏移量：

.send-button {
  position: absolute;
  top: 20px;
  left: 80px;
}

结果：

float：

通过 float 属性，可以使 HTML 元素脱离正常的文档流，竖直方向上将不再占用文档的空间，不过水平方向上不变。
比如可以利用这一特性，让序列横向排列:
HTML 文件：

<div class="backPanel">
  <li>
    <ul class="floated"> 语文 </ul>
    <ul class="floated"> 英语 </ul>
    <ul class="floated"> 数学 </ul>
  </li>
</div>

CSS 文件：

.backPanel {
  background-color: gray;
  padding: 10px;
}

默认情况下的结果：

利用 float 属性来 ul 元素横向排列：

.backPanel {
  background-color: gray;
  padding: 10px;
}

li {list-style: none; // 去掉了无序列表的小黑点}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center; 
  background-color: white; // 以上稍微调整了一下 ul 元素的样式
  float: left; // 设置 ul 元素向左浮动
}

结果：

此时只需要设置一下 backPanel 的 height 即可：

.backPanel {
  background-color: gray;
  padding: 10px;
  height: 80px; // 看起来是包住了，其实是铺在下面了
}


float 属性虽然在竖直方向上不占空间了，但不会脱离文档流：

<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>

  <li>
    <ul class="floated"> 语文 </ul>
    <ul class="floated"> 英语 </ul>
    <ul class="floated"> 数学 </ul>
  </li>
li {list-style: none;}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center;
  background-color: black;
  color: white;
  float: left;
}

比如现在 ul 元素 都没有父元素包裹了，上面只有一个 <p> </p> 元素，float 之后的 ul 元素 并不会“飞到”文档顶端去：

颜色值(color)：

css 中的 color 从类型上可以分为 color (前景色) 和background-color：

<h1>H1</h1>
h1 {
  color: white; // 前景色
  background-color: black;  // 背景色
}

效果：

css 中的 color 从表现方式上可以分为三种：

  1. 十六进制 表示法；
  2. rgb表示法（还可以拓展为 rgba 表示法，a表示alpha，指的是opacity——不透明度）；
  3. hsl表示法（还可以拓展为 hsla 表示法，a同上）。

举例：

<div class="hex">hex</div>
<div class="rgb">rgb</div>
<div class="rgba">rgba</div>
<div class="hsl">hsl</div>
<div class="hsla">hsla</div>
.hex {
  background-color: #FFAA00;
  height: 80px;
  width: 80px;
}

.rgb{background-color: rgb(222, 22, 2);
  height: 80px;
  width: 80px;
}

.rgba {background-color: rgba(222, 22, 2, 0.2);
  height: 80px;
  width: 80px;
}

.hsl {background-color: hsl(180, 60%, 90%); // 注意百分号
  height: 80px;
  width: 80px;
}

.hsla {background-color: hsla(180, 60%, 90%, 0.4); 
  height: 80px;
  width: 80px;
}

结果：

附上各种能叫得名字来的颜色值：有名字的颜色值。

排版：

设置字体：

font-family: 字体名称;

设置字体权重：

font-weight: bold | normal;
也可以用数值来表示，数值的范围为 [100, 900] 且必须是 100 的整数倍。

  1. 400 is the default font-weight of most text.
  2. 700 signifies a bold font-weight.
  3. 300 signifies a light font-weight.

举例：

<span class="default"> 中 </span>
<span class="bold"> 中 </span>
<span class="light"> 中 </span>

.default {font-weight: 400;}

.bold{font-weight: 700;}

.light{font-weight:300;}

It’s important to note that not all fonts can be assigned a numeric font-weight. You can look up the font you are using to see which font-weight values are available.

设置字体风格：

font-style: italic; ——斜体；

设置文字大小写：

text-transform: uppercase | lowercase;

设置文字对齐方式：

text-align: left | right | center;

设置行高：

Another property that we can set for text is line-height. This property modifies the leading of text.
The diagram beneath helps illustrate exactly what the terms “leading” and “line height” mean.


举例：

p {line-height: 1.4;}

后备字体(fallback fonts):

h1 {font-family: "Garamond", "Times", serif;}

以上 CSS 语句的意思是：

  1. 对网页上所有的 <h1> 元素 优先使用 Garamond 字体；
  2. 如果 Garamond 字体不存在，那么就用 Times 字体；
  3. 如果以上两种字体在目标客户端上都没有，那么就使用该客户端上存在的任意一种 衬线字体(serif)。

注：
相对应地，也存在 非衬线字体：sans-serif fonts;

CSS 网格(grid)：

创建网格：

.grid {
  width: 1080px;
  height: 500px;
  display: grid;
}

定义网格列grid-template-columns：px | %;

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
}

grid-template-columns: 100px 200px;的意思是：将此网格分为两列。
其中，第一列的 width = 100px，第二列的 width = 200px。
宽度的单位也可以不是 px，可以用 百分数 表示：

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

上面 grid 的宽度是 1000px，所以第一列的宽度是 1000 * 20% = 200px；同理，第二列的宽度是 500px。
也可以混用 px 和%：

.grid {
  border: 1px solid black; // 给 grid 一个边框以更好地表现 其中的元素会超出 grid 的界限
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px; // 也可以混用 `px` 和 `%`
}

.item {background-color: gray;}

这 3 列中，第一列 width 为 20px，第二列为 100 * 40% = 40px，第三列 width 为 60px。
注意：也就是说，总宽度 20 + 40 + 60 = 120px，超过了 100px，元素会超出 grid 的界限。

定义网格行grid-template-rows: px | %;

与定义 grid columns 是类似的:

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
</div>
.grid {
  border: 1px solid black;
  display: grid;
  width: 1000x;
  height: 400px;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

结果：
![grid-template-rows: 25% 25% 25% 25%; 表示把 grid 分成 4 行，每一行占其 height 的 25%。
](https://upload-images.jianshu…

一句话定义 grid 的行和列：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
</div>
.grid {
  display: grid;
  width: 600px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;  // 斜杠前面定义“行”，后面定义“列”//200px 300px 两行，一行高 200px，第二行高 300px；//20% 10% 70% 表示 3 列，第一列宽 500 * 20% = 50px；第二、三列类似。}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

结果：

fraction (fr):

通过单位 fr，我们可以将行和列定义为对 grid 的 length 和 width 的划分——作用类似于%，但是用% 是有超出父容器边界的风险的，而用 fr 则不用担心，因为浏览器会自动对 grid 进行划分。

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>
.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; //fr 的作用
}


这样做的优点就是相对于 % 不用进行繁琐的计算，且可以确保 grid 中的 item 不会超出边界。
即使是横向只用 fr 定义了 3 行，而实际的数据有 5 行，也依然不会造成 item 出界。
下面做一个对比：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
  <div class="item">L</div>
  <div class="item">M</div>
  <div class="item">N</div>
  <div class="item">O</div>
  <div class="item">P</div>
  <div class="item">Q</div>
</div>

<div class="next-grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.next-grid {
  float: left;
  display: grid;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.item {
  background-color: gray;
  text-align: center;
  
}

repeat()函数：

如果行高或列宽相等，可以用 repeat() 函数来简化语句：

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-columns: repeat(4, 1fr); // 竖直方向等宽的 4 列
  grid-template-rows: repeat(3, 1fr); // 水平方向等高的 3 行

}

.item {
  background-color: gray;
  text-align: center; 
}

结果：
![grid-template-columns: repeat(4, 1fr); —— 竖直方向等宽的 4 列
grid-template-rows: repeat(3, 1fr); —— 水平方向等高的 3 行](https://upload-images.jianshu…
注：
repeat()后面的 fr 并不是只能有一个：



## minmax 函数：假设有 3 列，第一列和第三列的列宽都是 100px，当浏览器的宽度变化时，想要让中间的那一列的列宽在 100px~500px 之间变化，则可以设置：

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-rows: repeat(4, 1fr 2fr);  // 一共 8 行，(1fr + 2fr)的样式重复 4 次。grid-template-columns: repeat(3, 1fr 2fr);
}

结果：

设置行间距、列间距，同时设置行、列间距：

.grid {
  display: grid; 
  width: 320px; 
  grid-template-columns: repeat(3, 1fr);  // 等宽的 3 列
  grid-column-gap: 10px; // 列间距
}

行间距同理：
grid-row-gap: 10px;
同时设置行、列间距：
grid-gap: 20px 10px; —— 一句话，分别设置行间距为 20px，列间距为 10px。
注：

It is important to note that grid-gap does not add space at the beginning or end of the grid.

这一简写形式并不需要/，如果只提供了一个值，比如：grid-gap: 10px;，则相当于grid-gap: 10px 10px;。

以上都是针对 grid 本身的，以下语法则是针对 grid 的 item 的：

设置 item 跨行 grid-row-start: 5; grid-row-end: 7;:

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  grid-template: repeat(4, 1fr 2fr) / repeat(4, 3fr 2fr);
  grid-gap: 5px;
}

.a {
  grid-row-start: 5; // 设置这个 item 的起始行是第 5 行
  grid-row-end: 7; // 设置这个 item 在跨第 5、6 行，不跨第 7 行——终止于第 7 行之前
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

简写形式：

.a {grid-row: 5 / 7;}

同理，

设置 item 跨列：

.item {
  grid-column-start: 4;
  grid-column-end: 6;
}

同样，也可以写作：

.item {grid-column: 4 /6;}

利用 span 属性来避免“误差”：

span可以明确地指出希望行或列跨越的距离：
比如，如果想要 row 从第 4 行开始，占两行，就可以直接写作：

.item {grid-row: 4 / span 6;}

不用 grid-row 的简写形式，也可以写作：

.item {
  grid-row-start: 4;
  grid-row-end: span 2;
}

当然，span也可以用在 grid-row-start 之后，浏览器会自动为我们计算出结果：

.b {
  grid-row-start: span 3;
  grid-row-end: 3;
}

结果：

对于grid-column，span 的用法是完全相同的，不再赘述。

网格区域(grid area)：

可以用一句话声明一个 item 占 grid 的多少行、列，并限定它在 grid 中的具体位置。

.b {grid-area: 2 / 3 / span 2 / span 4;}

结果：

CSS 网格进阶属性：

Grid Template Areas:

利用这个属性，可以先做出一个模板，然后让各个元素分别去“认领”他们所占的行和列。

<div class="container">
  <header>Welcome!</header>
  <nav>Links!</nav>
  <section class="info">Info!</section>
  <section class="services">Services!</section>
  <footer>Contact us!</footer>
</div>

比如 container 下面有 5 个板块:

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}


先用 grid-template-areas属性 “打好格子 ”, 然后各部分元素再利用grid-area 属性将自己 “代入” 打好的格子中：

header {grid-area: head;} 

nav {grid-area: nav;} 

.info {grid-area: info;} 

.services {grid-area: services;}

footer {grid-area: footer;}

注：
图中的 grid 是四行两列的，当 header 和 header 并列时，表示 header 占两列，此时 header 将占据整行，即使存在 grid gap，依然不会将两个 header 分隔开。虚线只是为了便于理解，实际并不存在。

justify-items：

设置 grid 元素在每个格子中水平方向上的 对齐方式 。
justify-items 属性可以接收的值为：

  1. start
  2. end
  3. end
  4. strench

注：这个属性是 container 中的，而不是每个 item 的。

align-items:

设置 grid 元素在每个格子中竖直方向上的 对齐方式 ：
同样可以接收以下值：

  1. start
  2. end
  3. end
  4. strench

注：这个属性是 container 中的，而不是每个 item 的。

justify-content：

设置整个 grid 在其父容器中，水平方向上的对齐方式：
可以取的值为：

属性取值 效果
start aligns the grid to the left side of the grid container
end aligns the grid to the right side of the grid container
center centers the grid horizontally in the grid container
stretch stretches the grid items to increase the size of the grid to expand horizontally across the container
space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between includes an equal amount of space between grid items and no space at either end
space-evenly places an even amount of space between grid items and at either end 
main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

align-content：

同理，利用 align-content 属性可以设置整个 grid 在其父容器中，竖直方向上的对齐方式。
原理均与 justify-content 属性相似，不再赘述。

Justify Self and Align Self:

利用 justify-self、align-self 属性，可以分别设置 grid 的每个格子中，具体某个 item 在水平、竖直方向上的对齐方式。

属性可以取的四种值 效果
start positions grid items on the left side/top of the grid area
end positions grid items on the right side/bottom of the grid area
center positions grid items on the center of the grid area
stretch positions grid items to fill the grid area (default)
退出移动版