目录
一、文本属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | font-size | 字体大小 | 单位是px，浏览器默认是16px，设计图常用字号是12px |
| 2 | font-family | 字体 | 当字体是中文字体、英文字体中有空格时，需加双引号； 多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推 |
| 3 | color | 颜色 | color:red; color:#ff0; color:rgb(255,0,0) 0-255 |
| 4 | font-weight | 加粗 | font-weight:bolder(更粗的)/bold(加粗)/normal(常规) font-weight:100-900; 100-500不加粗 600-900加粗 |
| 5 | font-style | 倾斜 | font-style:italic(斜体字)/oblique(倾斜的文字)/normal(常规显示); |
| 6 | text-align | 文本水平对齐 | text-align:left;水平靠左 text-align:right;水平靠右 text-align:center;水平居中 text-align:justify;水平2端对齐,但是只对多行起作用 |
| 7 | line-height | 行高 | line-height的数据 = height的数据，可以实现单行文本垂直居中 |
| 8 | text-indent | 首行缩进 | text-indent可以取负值；text-indent属性只对第一行起作用 |
| 9 | letter-spacing | 字间距 | 控制文字和文字之间的间距 |
| 10 | text-decoration | 文本修饰 | text-decoration没有/underline下划线/overline上划线/line-through删除线 |
| 11 | font | 文字简写 | font是font-style font-weight font-size / line-height font-family 的简写。 |
①文字大小
浏览器大小默认是:16px
②文字字体
可以设置多个值,用逗号隔开.
③文字颜色
三种表示方式:
④文字加粗和倾斜
⑤文本水平对齐
⑥文本间距和首行缩进
文本间距：词间距，字符间距
首行缩进：2em当前字体的2倍
⑦文本的修饰
修饰：下划线、上划线、中划线、无
注意：如果想要上中下所有的划线，需空格隔开。单独写会被下一个所覆盖
⑧检索大小写和font
font是font-style font-weight font-size / line-height font-family 的简写（顺序不能改变）
二、列表属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | list-style-type | 定义列表符合样式 | list-style-type;disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉符号） |
| 2 | list-style-image | 将图片设置为列表符合样式 | list-style-image:url(); |
| 3 | list-style-position | 设置列表项标记的放置位置 | list-style-position:outside;列表的外面默认值 list-style-position:inside;列表的里面 |
| 4 | list-style | 简写 | list-style:none;去掉列表符号 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
/*disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉符号） */
list-style-type: disc;
}
li{
border: 1px solid red;
list-style-position: inside;
}
.li1{
list-style-image: url(3.png);
}
.li2{
list-style-image: url(3.png);
}
.li3{
list-style-image: url(3.png);
}
.box1{
/* 复合属性 */
list-style: none url(3.png) inside;
}
</style>
</head>
<body>
<ul>
<li class = "li1">111111</li>
<li class = "li2">222222</li>
<li class = "li3">333333</li>
</ul>
<ul class = "box1">
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</body>
</html>
三、背景属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | background-color | 背景颜色 | background-color:red; |
| 2 | background-image | 背景图片 | background-image:ulr(); |
| 3 | background-repeat | 背景图片的平铺 | background-repeat;no-repeat/repeat/repeat-x/repeat-y |
| 4 | background-position | 背景图片的定位 | background-position:水平位置垂直位置;可以给负值 |
| 5 | background-attachment | 背景图片的固定 | background-attachment : scroll (滚动)/ fixed(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了); |
| 可以简写成background | |||
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
/* background-color:blueviolet; */
/* rgba最后一个代表透明度 */
background-color: rgba(255,0,0,0.5);
/* 图片默认平铺 */
background-image: url(1.webp);
/* 背景图片的平铺
repeat:默认平铺
repeat-x:x轴平铺
repeat-y:y轴平铺
no-repeat:不平铺
*/
background-repeat: repeat-x;
/* 背景图片的位置
1.20px 20px
2.10% 10%
3.left center right
top center bottom
*/
/* background-position: -20px,-20px; */
background-position: center center;
/* 背景图片的大小
1.300px 300px
2.100% 100%
3.cover:把背景图像扩展至足够答，以使背景图像完全覆盖背景区域。
也许无法显示在背景定位区域中
4.contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容
区域。铺不满盒子，留白
*/
background-size:100% 100%;
/* 背景的固定和滚动
fixed:相对于窗口固定(会产生视差)
*/
background-attachment: fixed;
margin:0 auto;
}
.box2{
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
}
/* 复合写法：
1.用空格隔开
2.顺序可以换
3.可以只取一个值，放在后面能覆盖前面的值
background-size不能复合，单独使用。
*/
.box3{
width: 300px;
height: 300px;
/* background-color: yellow;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center; */
background: yellow url(1.jpg) no-repeat center fixed;
}
</style>
</head>
<body>
<div class="box1" >
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>四、浮动属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | float | float: left | 元素靠左边浮动 |
| 2 | float | float: right | 元素靠右边浮动 |
| 3 | float | float: none | 元素不浮动 |
| 浮动的作用1：定义网页中其他文本如何环绕该元素显示 | |||
| 浮动的作用2：就是让竖着的东西横着来 | |||
div标签独占一行，使用浮动可以实现div的排序，将其排成一行。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动属性</title>
<style>
div{
width: 100px;
height:100px;
}
.red{
background-color: red;
float:left;
}
.green{
/* width: 200px;
height: 200px; */
background-color: green;
float:left;
}
.blue{
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
| 个数 | 属性 | 描述 | 说明 |
| 1 | clear | Clear：none | 允许有浮动对象 |
| 2 | clear | Clear：right | 不允许右边有浮动对象 |
| 3 | clear | Clear：left | 不允许左边有浮动对象 |
| 4 | clear | Clear：both | 不允许有浮动对象 |
| 清除浮动只是改变元素的排列方式，该元素还是漂浮者，不占据文档位置。 | |||
将div标签排列成两个在一行，第三个div在下面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1,.box2{
width: 200px;
height:200px;
float:left;
}
.box1{
background-color: yellow;
}
.box2{
background-color: blue;
}
.box{
width:300px;
height:300px;
background-color: red;
/* clear:left; */
}
/* 1.写固定高度
2.清浮动 clear用法
3.当前浮动元素后面补一个盒子，不设置宽高，加行内样式clear:both
4.overflow:hidden 让浮动元素计算高度
*/
.container{
/* height:200px; */
overflow:hidden;
/* bfc 让浮动元素激素那高度 */
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<!-- <div style="clear:left;"></div> -->
</div>
<div class="box"></div>
</body>
</html>
五、盒子模型
盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
- 标准盒子模型
①内边距 --padding属性
②外边距--margin属性
1.margin-方向，四个方向
2.背景颜色没有蔓延
3.*{margin: 0}
4.外边距支持负值
5.屏幕居中？margin:0 auto;
特性：
1.兄弟关系，两个盒子垂直外边距与水平外边距问题
-----垂直方向上外边距取最大值
-----水平方向上外边距会进行合并处理
2.父子关系，给子加外边距，但作用于父身上了，怎么解决？
-----子margin-top====》父的padding-top，注意高度计算
-----给父盒子设置边框
-----给子盒子或者父盒子加浮动
-----overflor:hidden.BFC
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
margin-bottom: 100px;
}
.box2{
margin-top:50px;
background-color: yellow;
}
.box3{
float:left;
background-color: blue;
margin-right: 100px;
}
.box4{
float:left;
background-color: green;
margin-left: 50px;
}
/* 解决方案
1. 子margin-top====>父的padding-top，注意高度计算
2. 给父盒子设置边框
3. 给子盒子或者父盒子加浮动
4. overflor:hidden.BFC
*/
.box5{
width:498px;
height: 498px;
background-color: yellow;
overflow: hidden;
/* padding-top:100px; */
/* transparent 透明 */
/* border:1px solid green; */
}
.box6{
width: 200px;
height: 200px;
background-color: red;
margin-top:100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div calss="box5">
<div class="box6"></div>
</div>
</body>
</html>
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
