04-CSS
- 一. 元素的特性
- 1. 元素的显示
- 1.1 元素的显示取值
- 1.2 显示其他的属性值
- 2. 元素的显示和隐藏效果
- 3. 元素的溢出
- 二. 文字文本的渲染
- 1. 字体属性
- 1.1 字体大小
- 1.2 字体字重
- 1.3 字体系列
- 1.4 字体样式
- 1.5 字体简写
一. 元素的特性
1. 元素的显示
1.1 元素的显示取值
元素以什么样的形式显示在页面中
属性: display
- display:block; 以块级元素的形式显示
- display:inline-block; 以行内块元素的形式显示
- display:inline; 以行内元素的形式显示
所有元素都可以变化自己的显示形式, 同时改变了自己的属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的显示</title><style>.d1{width:100px;height: 100px;background-color: red;/*将块级元素的显示修改为行内元素设置宽高无效; 从左向右排列*/display: inline;}.d2{width:100px;height: 100px;background-color: #EBAD7D;display: inline;}.s1{background-color: #8EE1FF;/*将行内元素显示修改为块级元素换行显示 ;宽度为父元素的100%*/display: block;/* 设置宽高生效 */width: 100px;height: 100px;}.s2{background-color: lime;display: block;}</style>
</head>
<body><div class="d1">123</div><div class="d2">123</div><br><span class="s1">123</span><span class="s2">123</span>
</body>
</html>
1.2 显示其他的属性值
display: none; 不显示任何元素
display: table; 以表格的形式显示
display: flex; 弹性布局
2. 元素的显示和隐藏效果
在项目中, 经常出现元素的展现和消失
要和元素的状态(伪类选择器)一起使用
display: none; 不显示, 元素在在页面中完全消失, 不占据页面空间
display: block; 显示;
visibility: hidden; 隐藏, 还占据页面空间
visibility: visible; 默认不隐藏
opacity: 0; 元素完全透明:0 ; 完全不透明: 1
- 会将元素的文字也变透明
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的显示也隐藏</title><style>div{width: 200px;height: 200px;}.d1{background-color: #8EE1FF;/* 元素隐藏, 不占据页面空间*//*display: none;*//* 元素隐藏, 占据页面空间*//*visibility: hidden;*/}.d2{background-color: red;opacity: 0.5;}</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">111111</div>
</body>
</html>
3. 元素的溢出
元素里面的内容(子元素或者文字) 大于父元素的宽和高, 会发生溢出
如果想要发生溢出, 需要设置父元素的范围(宽高),范围小于内容部分
属性: overflow
取值:
- hidden: 溢出部分隐藏
- scroll: 元素的横向纵向(x, y )方向出现滚动条
- auto: 溢出方向出现滚动条
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素溢出</title><style>.father img{width: 300px;}.box{width: 1250px;}.father{width:600px;height: 190px;border:1px solid #000;/* hidden: 溢出隐藏*//*overflow: hidden;*/overflow: auto;}</style>
</head>
<body><div class="father"><div class="box"><img src="./img/overflow01.jpg" alt=""><img src="./img/overflow02.jpg" alt=""><img src="./img/overflow0103.jpg" alt=""><img src="./img/overflow04.jpg" alt=""></div></div>
</body>
</html>
二. 文字文本的渲染
1. 字体属性
1.1 字体大小
文字的尺寸, 可以设置为单位 px, pt, rem, em, vw,wh…
属性:font-size
谷歌浏览器(PC)默认: font-size: 16px — 默认
rem和em单位
| 单位 | 参照 | 描述 |
|---|---|---|
| em | 父元素 | 指父元素字号的倍数 |
| rem | html元素 | 指html元素的字号倍数 |
1.2 字体字重
渲染文字的粗体和细体, 有些标签的文字会被标签默认的字重渲染(比如: 标题标签)
属性:font-weight
取值:
- blod 粗体
- lighter 细体
- normal 正常
数值: 100-900之间跨100的数字
- 100-300 细体
- 400-500 正常
- 600-900 粗体
