CSS学习:基础+进阶 （二）

CSS一些常用的特殊属性、属性值、选择器

1. min-width: 200px;

最小不能小于某个值,如果窗口小于这个值，将会显示滚动条

min-width 和 max-width 属性的优先级高于 width

2. overflow 溢出效果

• overflow: hidden; 容器盒子溢出部分会被隐藏

• overflow: scroll; 容器盒子溢出部分会显示滚动条

• overflow: auto; 容器盒子没溢出不显示滚动条，溢出显示滚动条

• 拓展: 单行文本截断 显示省略号

div {
   white-space: nowarp;//不换行
   overflow-x: hidden;
   text-overflow: ellipsis;//隐藏部分加省略号
}

3. font-size:14px

• 设置字体大小;
• 浏览器默认的字体大小16像素;
• 像素单位是px(pixel)
• 字体大小设置的其实是高度

4. font-weight: 字体粗细

• 枚举设置: lighter、 normal、 bold、 bolder; eg: font-weight:lighter
• 数值设置: eg: font-weight: 400;

1. 并不是所有字体都支持以上枚举，要看这种字体否支持。
2. 数值设置也不是每个值都有效果的，eg：font-weight: 348; 就可能不生效

5. font-style 字体风格

• font-style: italic; 斜体
• font-style: oblique; 倾斜，强制斜体

italic和oblique都设置斜体的。是不是很迷，为什么设计两个？ 因为有些字体是没有斜体的，这时如果需要斜体就用 oblique 强制设置

• 话外 em

<em>我是斜体</em>

em标签也可以使内容倾斜，但是em标签的主要作用其实是强调。同理strong标签内在含义是加重语气

4. font-family

• 是个复合属性可以写多个： font-family: "Times new Roman",Georgia,serif，防止当前面的字体当前设备上不支持时，可以选择后面的字体
• 字体 font-family: "arial" 是个通用字体,windows和macOS都支持
• 中文字体需要双引号，多个单词组成的字体(有空格的)需要双引号，其他不要引号，注意字体间用逗号隔开

6. color 颜色

• 项目中推荐用具体的颜色值(16进制)

color:red; //不推荐,一般用于调试
color:#345ef9;//推荐

• 三原色、取值范围

原色	red	green	blue	用法
十六进制	00-ff	00-ff	00-ff	#ff00ff
rgb	0-255	0-255	0-255	rgb(2,2,245)

• 十六进制缩写：如果其中三种原色内部值是相等的话可以缩写，eg: #ff00ff --> #f0f

7. border：边框

         宽度  样式   颜色
border:  1px, solid, #000

=== 等同于

border-width: 1px;
border-style: solid;
border-color: #000

• border是算盒子模型的宽高的，eg:

div {
    width:100px;
    height:100px;
    border:  1px, solid, #000
}

该div的高度是102px.所以border是不占盒子内部的宽高的，是向外扩散的

• border方向可以单独设置

div {
    width:100px;
    height:100px;
    border-left:  1px, solid, #000;
    border-top:  5px, solid, red;
}

• border颜色可以单独设置

div {
    width:100px;
    height:100px;
    border-left-color: #000;
    border-top-color: red;
}

• border-width 的多种写法

border-width: 1px; /*上下左右*/
border-width: 1px 5px; /*上下 左右*/
border-width: 1px 5px 10排序; /*上 左右 下*/
border-width: 1px 5px 10px 30px; /*上 右 下 左*/ 顺时针

• 边框是梯形的

border-width: 30px; /*上下左右*/
border-top-color: red; 
border-right-color: green;
border-bottom-color:blue ;
border-left-color: orange;

拓展--> 三角形border怎么设置？-->将其他边设置成 transparent

width: 0px;
height： 0px;
border-width: 30px; /*上下左右*/
border-top-color: transparent; 
border-right-color: transparent;
border-bottom-color:transparent ;
border-left-color: orange;

既然能够设置三角形，那常见的指示的小箭头是不是有思路了

8. text-align 文本对齐

 text-align: right
 
 eg:
 div {
     width: 100px;
     height: 100px;
     border: 1px solid red;
     text-align: right;
}

<div>
    你好
</div>

注意 需要是在容器内部去对齐

9. line-height

• line-height: 一行占据的高度
• 默认行高是22px，默认font-size是16px，所以会每行之间上下会有间隙;如果line-height: 16px；那么就没有间隙了

div {
     width: 100px;
     height: 100px;
     border: 1px solid red;
     text-align: right;
     font-size: 16px;
     line-height: 16px;
}

扩展 使文字在容器中居中：line-height == height

div {
     width: 100px;
     height: 100px;
     border: 1px solid red;
     text-align: center;
     font-size: 16px;
     line-height: 100px;
}

10. text-indent 首行缩进

• 一般用于多段落的首行缩进
• 单位可以是px 或者 em，一般字符缩进用em

div {
    width: 100px;
    height: 300px;
    border: 1px solid red;
    font-size: 16px;
 }

p {
    text-indent: 2em;
}
        
<div>
    <p>你好你好你好你好你好你好你好你好</p>
    <p>你好你好你好你好你好你好你好你好</p>
    <p>你好你好你好你好你好你好你好你好</p>
</div>

• 拓展

1. px：像素,绝对单位, (19201080 < 1024768)
2. em：字符,相对单位, 假设1em = 16px，2em = 32个px

cursor: 光标

• cursor: pointer; 手势光标

• cursor: not-allowed; 禁止光标

• 拓展: 单行文本截断 显示省略号

div {
   white-space: nowarp;//不换行
   overflow-x: hidden;
   text-overflow: ellipsis;//隐藏部分加省略号
}

display

• inline

• inline-block

• block

• 拓展 display: none; 和 visiable: hidden;的区别

1. visiable: hidden; 占据文档流原来的空间
2. display: none; 不占据文档流原来的空间

 .box2 {
    width: 100px;
    height: 100px;
    background-color:green;
}

.box1 {
    width: 50px;
    height:50px;
    background-color: red;
    /* display: none; */
    visibility: hidden;
}

.box2 {
    width: 50px;
    height: 50px;
    background-color:green;
}

<div class="box0"></div>
<div class="box1"></div>
<div class="box2"></div>

1. visibility: hidden;

2. display: none;

vertical-align: middle 行内块和行内元素对齐

img {
  width: 150px;
  border: 1px solid #000;
  vertical-align: middle; //竖直居中,也可以用px
}

<img src="wwww.baidu.cjlj.png">
<span>123</span>

容器内部多行文本居中方法

1. 将容器的 display:table
2. 将容器中的文本容器 display:table-cell;vertical-align: middle;

div {
    width: 50px;
    height:50px;
    display: table;
}

span {
    display: table-cell;
    vertical-align: middle;
}

伪类

• hover
• disabled
• checked : 选中
• foucs : 聚焦
• first-child: 第一个元素
• last-child: 最后一个元素
• nth-child(n): 具体到某个元素 解释:--> n: num, th：第几个，eg：sixth

1. nth-child(4): 第四个元素
2. nth-child(2n): 偶数元素 或even
3. nth-child(2n + 0): 奇数元素 或odd

button:hover {
  color: red;

}

button:disabled {
  color: gray;
}