一html的元素：
一.1 元素包含了元素块元素和行内元元素
行内元素包含了<span > <a > <img> <input> < b > < i> <strong> 专门针对文字图片等的元素
特点：内容大小决定了元素的大小，在同一行显示，如果行宽不够，会向下扩宽；且他的宽高是不能设置宽高的
注意不能把块级元行内元素中素放入到
一。2块级元素：
块级元素包含了 p div h1-h5 的元素等
行内元素的特点：内容大小取决于他的大小，在一行内显示，可以设置宽高，同时可以独占一行
注意：精良不要往p标签或者行内其他元素中添加块级元素
一。3行内块元素；
他包含了行内元素和块元素的特点；
内容大小取决于它的大小
在一行内并排显示
可以设置宽和高
二。字体：
字体属性，
包含了字体颜色： color ，字体颜色：可以用三种方法调试：分别是：rgb(调色板) 颜色的权重（red green bule black write） #ffff（就是16进制调色板）
文体 ：font-family包含 宋体、楷体、华云 、黑体、Ramanti
文字粗细：font-weight boder：文字加粗,也可以用 intalic 属性值范围是 100-900之间
符合属性：字体、文字大大小、文字的斜体、 先后顺先是：文字大小 、文字加粗、文字斜体（正），文字文体
三、盒子模型
盒子模型就是
盒子模型包含了contain 、padding 、border、margin四个部分
contain的内容了：就是输入的文本的内容
内边距：就是contain到边框大的位置，中间的部分‘
boder；边框包含了实线和虚线 边框属性，颜色 线条粗细
复合性的边框：color 20px solid
内边距：就是padding的边框
包含了：padding-top 顶部边框 padding right 有边框 padding-left 左边 padding-bottom下边框
外边距： margin-top上外边距 margin -right 右外边距 margin-bottom下外边距 margin-left是左外边距
t盒子模型的特点：当写四个属性时，表示顺时针的上、右、下、z左
当下三个属性时，中间属性标识，左右。
当写两个时，第一个标识，上下，第二个标识左右。
元素的属性：居中margin 权重用auto居中即可。
是咧
<!DOCTYPE html>
<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>
#box {
margin: 0 auto;
height: 800px;
width: 600px;
text-align: center
}
#over {
height: 200px;
width: 600px;
background-color: green;
margin: 0 auto;
margin-bottom: 10px;
}
#throught {
height: 400px;
width: 600px;
background-color: rgb(247, 20, 160);
margin: 0 auto;
margin-bottom: 10px;
}
#dibu {
height: 200px;
width: 600px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<div id="over">上部</div>
<div id="throught">中部</div>
<div id="dibu">底部</div>
</div>
</body>
</html>
<!DOCTYPE html>
<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>
* {
margin: 0;
padding: 0;
}
p {
width: 200px;
background-color: red;
/* padding-left:10px;
padding-top: 12px;
padding-right:15px;
padding-bottom: 20px; */
/* 上右下左 */
padding: 10px;
border:solid red 10px;
/* margin-bottom: 20px; */
margin-left: 10px;
}
div {
/* width: 300px;
height: 100px;
background-color: #ccc;
margin-top: 25px; */
}
.one{
width: 300px;
height: 300px;
background-color: skyblue;
/* padding-top:50px ; */
/* overflow: hidden; */
border:1px solid black;
}
.two {
margin: 20px auto;
width: 100px;
height: 100px;
background-color: pink;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 盒子模型 -->
<!-- content -->
<p>这是我们的p标签</p>
<div>这是我们的div</div>
<!-- padding -->
<!-- 内边距的值 会把我们的元素撑大 -->
<!-- 复合型写法 -->
<!--
1. 如果复合型写法的值是四个 那么顺序为
上 右 下 左 顺时针方向赋值
2.如果复合型写法的值是三个 那么顺序为
上 左右 下 方向赋值
3.如果复合型写法的值是两个 那么顺序为
上下 左右 方向赋值
4.如果复合型写法的值是一个 那么这个值
就是四个方向内边距的值
-->
<!-- border -->
<!-- 复合型写法
border: 1px solid black;
第一个值是我们的 边框宽度
第二个值是我们的 边框样式 实线 虚线 点线 双实线等等
第三个只是我们的 边框颜色
这三个值没有必须的顺序
-->
<!-- margin -->
<!-- 复合型写法
margin的复合型写法 同上， 和内边距一样
-->
<!-- 外边距合并问题
两个相邻元素设置外边距，不会相加，会以较大一方
的外边距作为他们之间的边距
因此，我们只用设置其中一个的外边距
-->
<!-- 嵌套盒子的垂直外边距塌陷问题
1.给父元素添加上内边距
2.给父元素添加 overflow-hidden
3.给父元素添加上上边框
-->
<div class="one">
<div class="two">这是子元素盒子</div>
</div>
<!-- 块级元素水平居中 -->
<!--
1.盒子必须指定了宽度
2.盒子左右边距设置为auto
margin:0 auto;
-->
</body>
</html><!DOCTYPE html>
<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>
<link rel="stylesheet" href="./浮动相册.css">
</head>
<body>
<div class="mian">
<div class="show_fen1">
<ul id="ul1">
<li>艺术摄影</li>
<li>婚纱摄影</li>
<li>纪实摄影</li>
<li>儿童摄影</li>
<li>风景摄影</li>
<li>创意摄影</li>
</ul>
</div>
<div class="show-fen2">
<li>
<a href="#"> <img src="images/objpic01.jpg" alt=""></a>
<span>艺术摄影</span>
</li>
<li>
<a href="#"><img src="images/objpic02.jpg" alt=""></a>
<span>艺术摄影</span> </li>
<li>
<a href="#"> <img src="images/objpic03.jpg" alt=""></a>
<span>艺术摄影</span> </li>
<li>
<a href="#"><img src="images/objpic04.jpg" alt=""></a>
<span>艺术摄影</span></li>
<li>
<a href="#"><img src="images/objpic05.jpg" alt=""></a>
<span>艺术摄影</span></li>
<li>
<a href="#"><img src="images/objpic06.jpg" alt=""></a>
<span>艺术摄影</span></li>
<li>
<a href="#"><img src="images/objpic07.jpg" alt=""></a>
<span>艺术摄影</span></li>
<li>
<a href="#"><img src="images/objpic08.jpg" alt=""></a>
<span>艺术摄影</span></li>
<li>
<a href="#"><img src="images/objpic09.jpg" alt=""></a>
<span>艺术摄影</span></li>
</div>
</div>
</body>
</html>
