前端 CSS：字体、文本、背景、边框、显示、盒模型、浮动、溢出属性、定位、z-索引
最编程
2024-07-09 18:44:02
...
2022.4.26前端之CSS样式、属性
- 字体样式
- 文字属性
- 背景属性
- 边框
- display属性
- 盒子模型
- 浮动（重要）
- 溢出属性
- 定位
- z-index
一、字体样式
# 文字字体
font-family:"Microsoft Yahei"
# 字体大小
font-size:24px # 单位是px
# 字体粗细
font-weight:lighter/bolder # 细/粗
# 字体颜色
方式1：
color: red; # 最基础的颜色修改
方式2：
color: rgb(128,128,128) # 三基色rgb参数
方式3：
color: #4f4f4f # hex颜色代码
'''
获取颜色代码和rgb的方式有很多：
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
代码左侧颜色块点击即可
'''
二、文字属性
# 文字对齐
text-align:center/left/right # 文本居中/居左/居右
# 文字装饰（重点）
'''a标签默认带下划线，并且有颜色（没有点击过是蓝色，点击过是紫色）'''
text-decoration: none; # 主要用于去除a标签的下划线
text-decoration: line-through; # 删除线
text-decoration: overline; # 上边线
text-decoration: underline; # 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
"""
补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""
三、背景属性(background)
# 1.背景颜色
background-color: red;
# 2.背景图片
background-image:url("111.png") # 如果背景图片没有设置的区域大，那么默认自动填充
background-repeat: no-repeat; 不填充
background-repeat: repeat-x; 横向填充
background-repeat: repeat-y; 纵向填充
background-position:left top; # 图片位置，左/右
background-attachment: fixed # 背景附着: 固定
"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)，如下：
"""
background: #336699 url('1.png') no-repeat left top;
四、边框(border)
# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black # 更改边框左/上/右/下的颜色
border-left/top/right/bottom-width: 5px # 更改边框左/上/右/下的宽度
border-left/top/right/bottom-style: solid # 更改边框左/上/右/下的线条
# 2.统一调整每个边的边框
border: 5px solid black; # 调整边框宽度、实线、黑色
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
# 3.画圆
border-radius: 50%
五、display属性
"""
只有块儿级标签可以设置长宽，行内标签是不可以的(长宽由内部文本决定)
"""
display:inline # 让标签具备行内标签的特性(不能设置长宽)
display:block # 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block # 使元素同时具有行内元素和块级元素的特点
display:none # 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde # 也是隐藏标签 但是位置会保留
六、盒子模型
# 文字字体
font-family:"Microsoft Yahei"
# 字体大小
font-size:24px # 单位是px
# 字体粗细
font-weight:lighter/bolder # 细/粗
# 字体颜色
方式1：
color: red; # 最基础的颜色修改
方式2：
color: rgb(128,128,128) # 三基色rgb参数
方式3：
color: #4f4f4f # hex颜色代码
'''
获取颜色代码和rgb的方式有很多：
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
代码左侧颜色块点击即可
'''
# 文字对齐
text-align:center/left/right # 文本居中/居左/居右
# 文字装饰（重点）
'''a标签默认带下划线，并且有颜色（没有点击过是蓝色，点击过是紫色）'''
text-decoration: none; # 主要用于去除a标签的下划线
text-decoration: line-through; # 删除线
text-decoration: overline; # 上边线
text-decoration: underline; # 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
"""
补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""
# 1.背景颜色
background-color: red;
# 2.背景图片
background-image:url("111.png") # 如果背景图片没有设置的区域大，那么默认自动填充
background-repeat: no-repeat; 不填充
background-repeat: repeat-x; 横向填充
background-repeat: repeat-y; 纵向填充
background-position:left top; # 图片位置，左/右
background-attachment: fixed # 背景附着: 固定
"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)，如下：
"""
background: #336699 url('1.png') no-repeat left top;
# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black # 更改边框左/上/右/下的颜色
border-left/top/right/bottom-width: 5px # 更改边框左/上/右/下的宽度
border-left/top/right/bottom-style: solid # 更改边框左/上/右/下的线条
# 2.统一调整每个边的边框
border: 5px solid black; # 调整边框宽度、实线、黑色
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
# 3.画圆
border-radius: 50%
"""
只有块儿级标签可以设置长宽，行内标签是不可以的(长宽由内部文本决定)
"""
display:inline # 让标签具备行内标签的特性(不能设置长宽)
display:block # 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block # 使元素同时具有行内元素和块级元素的特点
display:none # 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde # 也是隐藏标签 但是位置会保留
所有的标签都可以看成一个个盒子模型
盒子内部： content（内容）
盒子内部内容与盒子距离： padding（内边距、内填充）
盒子的厚度： border/边框
盒子与盒子之间距离： margin（外边距）
ps：两个标签之间的距离，有时候可以用margin，也可以用padding
# 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 1px 上下 左右
margin: 1px 统一设置一个值
总结：遵循上右下左的顺时针顺序，如未设置，默认使用对边尺寸，或者正方形
# 2.padding用法与margin一致
...
盒子模型页面布局：
标签的水平居中，可以使用固定搭配：
margin: 0 auto;
七、浮动（重要）
# 1.浮动的作用
float: left/right; # 顶部左/右侧浮动
可以将块级标签浮动起来，置顶，看上去像是飘在空中
# 2.浮动的影响
（1）浮动会造成父标签塌陷，未设置
（2）浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来
# 3.消除浮动的影响
clear: left;
推导流程
（1）直接写div然后写对应的长宽
（2）写div然后添加clear属性 避免去查找长宽
（3）万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码
然后哪个标签塌陷了就给谁添加上clearfix类名即可
很多前端页面框架使用的也是clearfix类名，或者其他类名
"""
八、溢出属性
1、文本内容超出了标签的最大范围
overflow: hidden; # 直接隐藏文本内容
overflow：auto/scroll; # 提供滚动条查看
2、溢出实战案例
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {background-color: darkgray;}
div {
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
overflow: hidden; # 隐藏除以圆半径外多余的部分
}
div img {width: 100%;} # 图片100%呈现
</style>
</head>
<body>
<div>
<img src="https://img1.baidu.com/it/u=3617933135,4201763031&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
</div>
</body>
九、定位
1、定位的状态
（1）静态定位：static
所有的标签默认都是静态定位即不能通过定位操作改变位置
div {
height: 100px;
width: 100px;
background-color: red;
position: static; /*默认是静态定位 即不能通过定位参数改变位置*/
}
（2）相对定位：relative
相对于标签“原来”的位置做定位
div {
height: 100px;
width: 100px;
background-color: red;
position: relative /*相对定位*/
left: 100px; /*从左往右移动100px*/ /*定位操作*/
}
（3）绝对定位：absolute
相对于已经定位过的父标签做定位；
如果没有父标签或者父标签没有定位，则以body为准，相当于变成了相对定位；
.c2 {
height: 100px;
width: 200px;
background-color: green;
position: absolute; /*绝对定位*/
top: 50px; /*定位操作*/
left: 100px; /*定位操作*/
}
（4）固定定位：fixed
相对于浏览器窗口做定位
.c1 {
height: 50px;
width: 100px;
border: 5px solid white;
position: fixed; /*相当于在右下角设置了一个固定的标签*/
right: 0; /*距离浏览器右边距为0*/
bottom: 50px; /*距离浏览器底部距离50px*/
}
十、z-index
ps：前端界面其实是一个三位坐标系，z轴指向用户；
eg：动态弹出的分层界面，我们也称之为模态框
z-index不写默认为0，即浏览器最底层
.cover {
height: 200px;
width: 400px;
background-color: white;
z-index: 11; /*设置z轴值为11*/
}
补充知识：
rgba(128,128,128,0.5) # 最后一个参数可以调整颜色透明度，默认为1即不透明
因此可以将层级以半透明的形式展现出来
上一篇： CSS 样式规则和字体样式