一、长度和宽度
- 行内标签无法设置长宽，就算你写了，也不会生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
height: 200px;
width: 400px;
}
span {
background-color: green;
height: 200px;
width: 400px;
/*行内标签无法设置长宽，就算你写了，也不会生效*/
}
</style>
</head>
<body>
<p>ppp</p>
<span>span</span>
</body>
</html>
二、字体属性
（1）概览
| 属性 | 说明 |
|---|---|
| font-size | 设置字体的尺寸。常用单位为像素(px) |
| font-style | 设置字体风格。Normal 为正常; italic 为斜体; oblique 为倾斜 |
| font-weight | 设置字体的粗细。Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体 |
| font-family | 设置字体系列。例如“隶书”等，当指定多种字体时，用逗号分隔，如果浏览器不支持第一个字体，则会尝试下一个字体;当字体由多个单词组成时由双引号括起来 |
（2）部分示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: "Microsoft YaHei UI","微软雅黑";/*第一个不生效就用后面的，写多个备用的*/
font-size: 24px; /*字体大小*/
font-weight: bolder; /*加粗*/
font-weight: lighter; /*变细*/
font-weight: inherit; /*继承父元素的粗细值*/
}
</style>
</head>
<body>
<p>权浩大牛马 dashbi</p>
</body>
</html>
三、文本属性(段落属性)
（1）概览
文本属性包括阴影效果、大小写、文本缩进、对齐方式等等。
| 文本属性 | 说明 |
|---|---|
| color | 设置文本颜色。 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距，就是字符与字符之间的空白。其属性值可以为不同单位的数值，并且允许使用负值，默认值为normal |
| line-height | 设置行高，单位为像索。此属性在用于进行文字垂直方向对齐时，属性值与height属性值的设置相同 |
| text-align | 设置文本内容的水平对齐方式。left 为左对齐( 默认值)，center 为居中对齐，right为右对齐 |
| text-decoration | 向文本添加修饰。none 为无修饰(默认值)，underline 为下划线，overline 为上划线，line-through为删除线 |
| text-overflow | 设置对象内溢出的文本处理方法。clip 为不显示溢出文本，ellipsis 为用省略标记"..."标示溢出文本 |
| text-indent | 设置首行文本的缩进 |
| text-transform | 控制文本转换。none为不转换(默认值)，capitalize 为首字母大写。uppercase为全部字符转换成大写，lowercase 为全部字符转换成小写 |
| text-shadow | 设置文本阴影 |
| unicode-bidi | 设置文本方向 |
| word-spacing | 设置字间距。只针对英文单词 |
| white-space | 设置元素中空白的处理方式，文本超出后是否换行(默认自动换行),nowrap |
（2）部分示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red; /*直接写颜色英文*/
color: #eeeeee; /*颜色编号*/
color: rgb(128,23,45); /*三基色 数字 0-255*/
color: rgba(128,23,45,0.9); /*第四个参数是颜色的透明度，范围是0-1*/
text-align: center; /*居中*/
text-align: right;
text-align: left;
text-align: justify; /*两端对齐*/
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through; /*删除线*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线*/
}
</style>
</head>
<body>
<!-- <p>权浩是个大牛马，dsb</p>-->
<!-- <a href="https://www.baidu.com">百度</a>-->
<p>权浩是个大牛马，dsb权浩是个大牛马，dsb权浩是个大牛马，dsb权浩是个大牛马，dsb权浩是个大牛马，dsb权浩是个大牛马，dsb权浩是个大牛马，dsb权浩是个大牛马，dsb</p>
</body>
</html>
（3）补充：color取值
color的值有四种形式有四种：
1、直接red，green英文名字；
2、使用16进制颜色，以#开头，格式为xx|xx|xx，每隔两个为一组，一共6个0-f之间的数；
3、使用rgb三原色，实际上rgb()是一个css函数，后边括号跟三个值，分别是red，green，blue的比重；
4、使用rgba()函数，最后的那个a是alpha，表示透明度，0完全透明。
当你想用一些颜色的时候，可以使用相关的工具
-
pycharm自带取色器
-
微信/QQ截图，取色器
p {
color: blue; 字体颜色，颜色英文
color: #dddddd; 字体颜色，颜色编号
color: rgb(122, 69, 36); 字体颜色，rgb(0~255)
color: rgb(122, 69, 36, 0.8); 第四个参数是透明度(0~1)
}
ps：可以使用浏览器做样式的动态调整，查找到标签的css 然后左键选中 通过方向键上下动态修改数值
四、背景属性
背景，即background，简称bg。关于背景常见的属性就是：背景图片，没有图片的话就是背景颜色，背景大小等，另外还有假如背景图片比网页小该怎么办？背景图片太小该如何布局等问题。
（1）概述
| 背景属性 | 说明 |
|---|---|
| background | 简写属性，将背景的所有属性设置在一个声明中 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。scroll指背景图像随内容滚动; fixed 指背景图像不随内容滚动 |
| background-color | 设置元素的背景颜色（不能继承，默认值是transparent“透明”） |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置。left 为水平居左，right 为水平居右，center 为水平居中或垂直居中，top 为垂直靠上，bottom为垂直靠下或精确的值 |
| background-repeat | 设置背景图像是否重复及如何重复。repeat-x 为横向平铺; repeat-y 为纵向平铺; norepeat 为不平铺; repeat 为平铺背景图片，该值为默认值 |
举例说明：
/*# 1.背景颜色*/
background-color: red;
/*# 2.背景图片*/
background-image:url("111.png");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
/*是否平铺*/
background-repeat:no-repeat\repeat-x\repeat-y
/*图片位置*/
background-position:left top;
/*背景附着*/
background-attachment: fixed;
- 如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
background:#336699 url('1.png') no-repeat left top;
（2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*height: 400px;*/
/*width: 400px;*/
background-color: red; /* 设置背景图片 */
background-image: url("url链接"); /* 默认全部铺满 */
background-repeat: no-repeat; /* 不铺满 */
/*
其实浏览器不是一个平幔，而是一个三维立体结构
Z 轴指向用户 ， Z 越大，离用户越近
*/
background-position:center center; /* 图片居中(第一个参数控制左边的距离，第二个参数是上距离) */
/* 简写 */
/* 只需要填上想要加的参数即可，位置没有关系，参数对应就可以 */
background: red url("url") no-repeat center center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
五、边框
（1）概述
CSS边框属性可以设置对象边框的颜色、样式以及宽度。使用对象的边框属性之
必须先设定对象的高度及宽度。语法格式如下：border :边框宽度 边框样式 边框颜色注意：
border-width属性可以单独设置边框宽度;
border-style属性可以单独设边框样式;
border-color属性可以单独设置边框颜色。
常用的边框样式：
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
double 双线边框ps： border-radius: 像素值/百分比; 为元素增加圆角边框
直接写50%即可，长宽一样就是圆，不一样就是椭圆
（2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: black;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right-width: 10px;*/
/*border-right-color: powderblue;*/
/*border-right-style: solid;*/
/*border-top-width: 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom-width: 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
border: 3px solid red; /*三者位置可以随意写*/
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
}
#d1 {
background-color: pink;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可，长宽一样就是圆，不一样就是椭圆*/
}
</style>
</head>
<body>
<p>权浩是个大牛马，dsb</p>
<div>oh shit 权浩你个大牛马</div>
<div id="d1"></div>
</body>
</html>
六、display属性
（1）概述
- 只有块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
display 属性是 CSS 中用来控制元素在页面上如何显示的重要属性。它可以控制元素是以何种方式呈现，比如块级元素、内联元素、行内块级元素等。
以下是 display 属性的常见取值及其作用：
-
block：将元素显示为块级元素，即元素会在页面上单独占据一行，宽度默认是父元素的100%。 -
inline：将元素显示为内联元素，即元素不会独占一行，而是与其他内联元素在同一行显示，宽度由内容决定。 -
inline-block：将元素显示为行内块级元素，即元素会在同一行显示，但可以设置宽度和高度等块级元素的属性。 -
none：隐藏元素，使其在页面上不可见且不占据空间。 -
flex：将元素显示为弹性盒子，使其能够更方便地进行灵活的布局。 -
grid：将元素显示为网格布局，使其能够按照网格的方式进行布局。 -
inline-flex：将元素显示为内联的弹性盒子。 -
table、table-row、table-cell：将元素显示为表格、表格行、表格单元格，用于实现表格布局。 -
list-item：将元素显示为列表项，通常与list-style属性一起使用。 -
inherit：继承父元素的display属性值。
（2）示例
/* 将标签设置成块儿级标签的特点 */
.block-element {
display: block;
}
/* 将标签设置为行内标签的特点 */
.inline-element {
display: inline;
}
/* 标签既可以在一行显示又可以设置长宽*/
.inline-block-element {
display: inline-block;
}
/* 隐藏标签不展示到前端页面并且原来的位置也不再占有了，但是还存在于文档上 */
.hidden-element {
display: none;
}
/* 将元素显示为弹性盒子 */
.flex-element {
display: flex;
}
通过合理使用 display 属性，可以控制元素的布局方式，实现灵活多样的页面布局效果。
七、盒子模型
（1）什么是盒子模型
-
盒子模型（Box Model）是指在网页设计中，用于描述和布局元素的一种模型。
-
它将每个元素看作是一个具有四个边界的矩形盒子，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。
以快递盒为例
快递盒与快递盒之间的距离 (标签与标签之间的距离，margin外边距)
盒子的厚度 (标签的边框，border)
盒子里面的物体到盒子的距离 (内容到边框的距离，padding内边距)
物体的大小 (内容，content)
| 快递盒组成部分 | 盒子模型 |
|---|---|
| 内部物品 | content(内容) |
| 内部物品与盒子内部的距离 | padding(内边距、内填充) |
| 盒子的厚度 | border(边框) |
| 盒子与盒子之间的距离 | margin(外边距) |
（2）概述
如果你想要调整标签和标签之间的距离，你就可以调整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 统一设置一个值
标签的水平居中 可以使用固定搭配
margin: 0 auto;
注意：浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
元素所占空间
页面中的元素实际所占空间
- 宽=width+左右padding+左右border+左右margin
- 高=height+上下padding+上下border+上下margin
（3）示例
<!DOCTYPE html>
<html lang="e
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0; /*上下左右全是0*/
/*margin: 10px 20px; !*第一个上下，第二个左右*!*/
/*margin: 10px 20px 30px; !*第一个上，第二个左右，第三个下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-top: 0;*/
/* margin-bottom: 0;*/
/* margin-left: 0;*/
/* margin-right: 0;*/
/*}*/
/*#d1 {*/
/* margin-bottom: 20px;*/
/*}*/
/*#d2 {*/
/* margin-top: 50px; !*两个修改的话，不会叠加，取大的那个*!*/
/*}*/
/*#d3 {*/
/* margin: 0 auto; !*只能做到标签的水平居中，不能调节标签的垂直居中*!*/
/*}*/
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
padding: 10px 20px 30px 40px; /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid powderblue;" id="d1">pppp</p>-->
<!-- <p style="border: 1px solid orange" id="d2">pp222</p>-->
<!-- <div style="border: 3px solid red;height: 300px;width: 300px">-->
<!-- <div id="d3" style="border: 1px solid yellow;height: 50px;width: 50px;background-color: burlywood"></div>-->
<!-- </div>-->
<p>ppp</p>
</body>
</html>
八、溢出属性overflow
（1）概述
- 这个属性用于解决容器里面的内容比容器大的情况。
| 属性值 | 描述 |
|---|---|
| visible | 默认值，超出元素框的内容会呈现在元素框的外部，即内容会溢出到相邻元素的区域中，不会被裁剪或隐藏。 |
| hidden | 溢出部分直接隐藏 |
| scroll | 设置成上下滚动条的形式 |
| auto | 如果内容被修剪，可以滚动查看剩余内容 |
（2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
height: 100px;
width: 100px;
border: 3px solid red;
/*overflow: visible; !*默认就是溢出的部分还是会展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
overflow: auto;
}
</style>
</head>
<body>
<p>权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 权浩大牛马 </p>
</body>
</html>
（3）溢出应用
- 圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: grey;
}
#d1 {
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
margin: 0 auto;
overflow: hidden;
}
#d1>img {
width: 100%; /*占标签的100%*/
}
</style>
</head>
<body>
<div id="d1">
<img src="1.png" alt="">
</div>
</body>
</html>
九、z-index模态框
（1）概述
- 前端界面其实是一个三维坐标系 z轴指向用户
- 动态弹出的分层界面 我们也称之为叫模态框
在 CSS 中，z-index 属性用于控制元素的堆叠顺序，即确定元素在层叠上下文中的显示顺序。
设置元素定位方式以后,元素会浮在页面的上方，此时可以通过z-index属性设置有限制，控制元素的堆叠顺序。取值为数字，值越大优先级越高，默认为auto，大多数浏览器默认为0
注：只能给非static定位的元素设置z-index属性
（2）示例
- 百度登录页面 其实是三层结构
- 最底部是正常内容(z=0) 最远的
- 黑色的透明区(z=99) 中间层
- 白色的注册区域(z=100) 离用户最近
模仿百度登录页面写一个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top:0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.1);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登录页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我</button>
</div>
</body>
</html>
十、透明度opacity
（1）概述
-
opacity不单单可以修改颜色的透明度还同时修改字体的透明度
-
rgba只能影响背景颜色
-
而opacity可以修改颜色和字体
（2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-color: rgba(0,0,0,0.5);
}
#d2 {
opacity: 0.5;
color: blue;
}
</style>
</head>
<body>
<p id="d1">111</p>
<p id="d2">222</p>
</body>
</html>
