CSS那些事儿

sarva 发布于2019-08-30 15:44 / 2274人阅读

摘要：利用实现居中对齐首先需要父元素有固定的或者。比如如果想要让实现横向居中对齐，首先应该设置其父元素的，然后在文件中设置的值为被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围，此时可以通过设置的值来进行调整。

多个class:

css中允许多个class：

...

。

选择器： Chaining Selectors：

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

h1.special {

}

嵌套元素：


   ... 
   ... 
   ...

想要设置

...

的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属性:

static

fixed

relative

absolute

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

第一块
第二块
第三块


.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的任意位置显示一个“发送”按钮：

第一块
第二块

第三块

.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文件：


  
    语文
    英语
    数学

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属性虽然在竖直方向上不占空间了，但不会脱离文档流：

"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."

语文

英语

数学

li {
  list-style: none;
}

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

比如现在ul元素都没有父元素包裹了，上面只有一个

元素，float之后的ul元素并不会“飞到”文档顶端去：

颜色值(color)：

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

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

效果：

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

十六进制表示法；

rgb表示法（还可以拓展为rgba表示法，a表示alpha，指的是opacity——不透明度）；

hsl表示法（还可以拓展为hsla表示法，a同上）。

举例：

hex
rgb
rgba
hsl
hsla

.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的整数倍。

400 is the default font-weight of most text.

700 signifies a bold font-weight.

300 signifies a light font-weight.

举例：

中
中
中

.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语句的意思是：

对网页上所有的

元素优先使用 Garamond 字体；

如果Garamond 字体不存在，那么就用 Times 字体；

如果以上两种字体在目标客户端上都没有，那么就使用该客户端上存在的任意一种衬线字体(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是类似的:


  A
  B
  C
  D
  E
  F
  G
  H
  I
  J
  K

.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的行和列：


  A
  B
  C
  D
  E
  F
  G
  H
  I
  J
  K

.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进行划分。


  A
  B
  C
  D
  E
  F
  G
  H
  I

.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出界。
下面做一个对比：


  A
  B
  C
  D
  E
  F
  G
  H
  I
  J
  K
  L
  M
  N
  O
  P
  Q



  A
  B
  C
  D
  E
  F
  G
  H
  I

.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:

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


  Welcome!
  Links!
  Info!
  Services!
  Contact us!

比如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属性可以接收的值为：

start

end

strench

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

align-items:

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

start

end

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)

GPU云服务器云服务器回事儿那些云计算有那些 cdn那些意思

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116111.html

玩儿前端——CSS垂直的那些事儿

摘要：替换元素或任何其他类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素的底端对齐。往往将元素的垂直中点与父元素基线上方处的一个点对齐。说说自己对行高和垂直对齐的理解行高 line-height属性是指文本行基线之间的最小距离，而不是字体的大小首先，基线(baseline)指的是英文四线格的倒数第二条线。其次，关于font-size，字体大小受font-size形成...

tigerZH 2019-08-28 18:18 评论0 收藏0
[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

摘要：要快，但是我们的服务也必须万无一失，后续我会分享百度移动端首页的前端架构设计那么这样的优化，是如何做到的呢，又如何兼顾稳定性，架构性，与速度呢别急，让我们把这些优化一一道来。百度移动端首页的很多就是这样缓存在客户端的。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fronte...

The question 2019-06-24 17:50 评论0 收藏0
webpack的那些事儿

摘要：不管是还是，其实都是基于实现的。文件，看名字就知道它是的配置文件。接下来会向外暴露可以指定是环境还是环境。这个有点不一样的是他依赖一个的配置文件。注意这三个的顺序不能错，是从右往左执行的。到这里，一个小小的脚手架雏形其实就有了。不管是vue-cli还是react-sprite，其实都是基于webpack实现的。试想，如果没有脚手架，你自己能搭一个吗？看完这篇博客，让你明白webpak都有些什...

TNFE 2019-05-23 17:35 评论0 收藏0
[聊一聊系列]聊一聊iconfont那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码从说起要想了解，得从一个新的规则说起。因为用户没有安装的话，我们强制要求显示也没有办法。国内有阿里巴巴的平台，可以选自己喜欢的图标导出。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fr...

Markxu 2019-08-29 10:57 评论0 收藏0
[聊一聊系列]聊一聊iconfont那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码从说起要想了解，得从一个新的规则说起。因为用户没有安装的话，我们强制要求显示也没有办法。国内有阿里巴巴的平台，可以选自己喜欢的图标导出。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fr...

2501207950 2019-08-19 18:44 评论0 收藏0