一、宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
<!--设置块级标签的宽度-->
<div style="background-color: orange;200px" >div标签</div>
<!--设置块级标签的高度-->
<p style="background-color: indianred;height: 100px">p段落标签</p>
二、文字属性
① 文字对齐
text-align：属性
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
<body>
<!--左对齐-->
<div style="text-align: left">左对齐</div>
<!--右对齐-->
<div style="text-align: right">右对齐</div>
<!--居中对齐-->
<div style="text-align: center">居中对齐</div>
<!--两端对齐-->
<div style="text-align: justify">两端对齐</div>
</body>
② 文字装饰
text-decoration：属性
none 默认
underline 文本下的一条线
overline 文本上的一条线
line-through 穿过文本的一条线
inherit 继承父元素的text-decoration属性的值
<!--标准的文本-->
<div style="text-decoration: none">标准的文本</div>
<!--文本下有一条线-->
<div style="text-decoration: underline">文本下有一条线</div>
<!--文本上有一条线-->
<div style="text-decoration: overline">文本上有一条线</div>
<!--文本穿插一条线-->
<div style="text-decoration: line-through">文本穿插一条线</div>
③ 首行缩进
text-indent：属性
<!--首行缩进-->
<p style="font-size: 16px;text-indent: 32px">缩进两个字符</p>
三、字体属性
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
font-size 设置文字的大小
<style>
/*浏览器可识别的字体,浏览器会逐个尝试*/
body {
font-family: "Microsoft YaHei","微软雅黑","Arial",sans-serif;
}
/*定义字体的大小*/
div {
font-size: 20px;
}
</style>
字体的自重
font-weight：属性
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体的粗细，400等于normal，700等于bold
inherit 继承父元素字体的粗细值
<!--normal标准粗细-->
<p style="font-weight: normal">普通字体</p>
<!--bold粗体-->
<p style="font-weight: bold">粗体字体</p>
<!--bolder更粗的字体-->
<p style="font-weight: bolder">更粗的字体</p>
<!--lighter更细的字体-->
<p style="font-weight: lighter">更细的字体</p>
<!--设置字体的粗细值-->
<p style="font-weight: 500">设置字体的粗细值500</p>
文本颜色：
三原色：红绿蓝
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
四、背景属性
支持简写
/*设置背景颜色*/
background-color: #eeeeee;
/*设置背景图片,默认平铺*/
background-image: url("zhouyu.jpg");
/*背景图片平铺设置*/
/*背景图片不平铺*/
background-repeat: no-repeat;
/*背景图片水平平铺*/
background-repeat: repeat-x;
/*背景图片垂直平铺*/
background-repeat: repeat-y;
/*背景普通平铺*/
background-repeat: repeat;
/*背景位置*/
/*背景在左上*/
background-position: left top;
/*背景在左中*/
background-position: left center;
/*背景在左下*/
background-position: left bottom;
/*背景在中上*/
background-position: center top;
/*背景在居中*/
background-position: center center;
/*背景在中下*/
background-position: center bottom;
/*背景在右上*/
background-position: right top;
/*背景在右中*/
background-position: right center;
/*背景在右下*/
background-position: right bottom;
/*背景在x轴200px，y轴200px*/
background-position: 200px 200px;
将图片固定位置
/*背景图片固定位置 */
background-attachment: fixed;
五、边框属性
支持简写
/*边框宽度*/
border- 5px;
/*边框线样式*/
/*实线*/
border-style: solid;
/*点状虚线*/
border-style: dotted;
/*矩形虚线*/
border-style: dashed;
/*无边框*/
border-style: none;
/*边框线颜色*/
border-color: red;
可单独设置部分边框
/*单独设置边框*/
border-left: red 2px solid;
画圆
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
/*画圆*/
/*设置标签大小*/
300px;
height: 300px;
/*设置背景颜色*/
background-color: #b0b0b0;
/*设置边框*/
border: red;
border-radius: 50%;
六、display属性
用于控制HTML元素的显示效果
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 200px;
width: 200px;
background-color: red;
/*使元素同时具有行内元素和块级元素的特点*/
display: inline-block;
/*按行内元素显示*/
display: inline;
/*默认占满整个页面的宽度，如果设置了指定宽度，会用margin填充剩下的部分*/
display: block;
}
</style>
</head>
<body>
<!--三个div平铺-->
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
七、CSS盒子模型
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。
① margin外边距
控制标签与标签之间的距离，可以单独指定，按照上右下左的顺序
填写方式（可简写）：
1.上、右、下、左
2.上下、左右
3.上、左右、下
4.居中写法：0 auto；
② padding 内填充，内容和边框之间的距离
用于让标签显得更加丰满，内容更充实
顺序：上右下左
补充padding的常用简写方式：
1.提供一个，用于四边；
2.提供两个，第一个用于上－下，第二个用于左－右；
3.如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
4.提供四个参数值，将按上－右－下－左的顺序作用于四边；
八、float浮动
float作用于页面的布局
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
/*向左浮动*/
float: left;
/*向右浮动*/
float:right;
/*默认值，不浮动*/
float: none;
九、clear
clear属性规定元素哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素。
/*左右两侧不允许浮动*/
clear: both;
/*左侧不允许浮动*/
clear: left;
/*右侧不允许浮动*/
clear: right;
/*允许浮动*/
clear: none;
clear解决了float的副作用（副作用：浮动的标签会脱离文档，其他的标签会占用它的位置）
方法一：单独设置一个div的clear属性
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
body {
margin: 0;
}
.left , .right {
width: 300px;
height: 300px;
}
.left {
background-color: red;
float: left;
}
.right {
background-color: green;
float: right;
}
/*设置两端不允许浮动*/
.cc {
clear: both;
}
div {
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="cc"></div>
<div></div>
方法二：
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
body {
margin: 0;
}
.c2 {
width: 300px;
height: 300px;
}
.left {
background-color: red;
float: left;
}
.right {
background-color: green;
float: right;
}
.c1 {
border: 1px solid black;
}
/*设置两端不允许浮动*/
.clearfix:after {
content: '';
display: block;
clear: both;
}
.c3 {
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1 clearfix">
<div class="c2 left"></div>
<div class="c2 right"></div>
</div>
<div class="c3"></div>
</body>
十、overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
<head>
<meta charset="UTF-8">
<title>苦寒行</title>
<style>
.ancient {
width :300px;
height: 100px;
border: 1px solid black;
/*以滚动条的形式查看其它内容*/
overflow: scroll;
}
</style>
</head>
<body>
<div class="ancient">
<p>北上太行山，艰哉何巍巍！</p>
<p>羊肠坂诘屈，车轮为之摧。</p>
<p>树木何萧瑟！北风声正悲。</p>
<p>熊罴对我蹲，虎豹夹路啼。</p>
<p>溪谷少人民，雪落何霏霏！</p>
<p>延颈长叹息，远行多所怀。</p>
<p>我心何怫郁？思欲一东归。</p>
<p>水深桥梁绝，中路正徘徊。</p>
<p>迷惑失故路，薄暮无宿栖。</p>
<p>行行日已远，人马同时饥。</p>
<p>担囊行取薪，斧冰持作糜。</p>
<p>悲彼东山诗，悠悠使我哀。</p>
</div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.portrait {
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 50%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="portrait">
<img src="zhouyu.jpg" alt="">
</div>
十一、定位
用于小范围的布局
position属性
值：
static 默认值
relative 相对定位
相对于标签原来的位置做的定位
absolute 绝对定位
相对于已经定位过的祖先标签做的定位，和浮动一样
多用于页面局部的布局，注意要和定位过的祖先标签配合使用
绝对定位和浮动一样，标签都会脱离文档，别的标签可以占用它的位置
场景：搜索框弹出内容
fixed 固定
十二、z-index
场景：注册弹出框
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 99;
}
.modal {
background-color: white;
height: 300px;
width: 400px;
z-index: 1000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<!--模糊层-->
<div class="cover"></div>
<!--弹出框-->
<div class="modal">
<form action="">
<div><label><input type="text"></label></div>
<div><label><input type="text"></label></div>
<div><label><input type="submit"></label></div>
</form>
</div>
</body>
</html>
十三、opacity透明度
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
十四、其他
line-hetght 行高设置成标签的高度可以垂直居中
text-align center居中