行内元素、块元素 、行内块元素
行内元素：输入完标签之后，不是自己占一行,行内元素的宽度和高度是由内容来决定，宽度和高度width、height 不能改动。
css样式是display:inline;
Span b i u strong a
块元素 ：输入完标签之后，自己独占一行,可以设置宽度和高度，width和height
Css样式 display :block;
Div p table ul li ol dl dt dd h1….
行内块元素：综合了行内元素和块元素的优点，在一行中显示可以设定width、height
Css样式 display :block;
input img….
块—转换---行内（在需要的元素中添加下面的样式）
Display:inline;
行内—转换---块（在需要的元素中添加下面的样式）
Display:block;
行内—转换---行内块（在需要的元素中添加下面的样式）
Display:inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素、行内元素、行内块元素之间的区别</title>
<style>
div.box{
width: 100px;
height: 50px;
border:2px solid #d9d919;
}
span{
width: 100px;
height: 50px;
border:2px solid #b87333;
}
input{
width: 150px;
height: 30px;
border:2px solid #0000ff;
}
</style>
</head>
<body>
<div class="box">
我是块元素
</div>
<span>我是行内元素</span>
<input type="text" value="我是行内块元素">
</body>
</html>verflow 内容溢出的显示方式
text-overflow:ellipsis; 文本溢出之后用……显示
注意：文本溢出用……代替中的文本不能在被其他标签包裹；white-space:nowrap,overflow:hidden,text-overflow:ellipsis要一起使用
Hidden; 溢出的内容隐藏
Auto; 如果盒子装不下，会自适应的出现滚动条(默认)
Scroll; 无论是否能装下都有滚动条边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容溢出</title>
<!--[if lte ie 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<style>
div{
width: 350px;
height: 100px;
margin-top: 20px;
}
div.div1{
background: #d9d919;
/*这里需要注意的是white-space: nowrap; overflow: hidden;text-overflow: ellipsis;这三个样式要一起使用*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.div2{
background-color: #b87333;
overflow: hidden;
}
div.div3{
background-color: #d9d919;
overflow: auto;
}
div.div4{
background-color: #b87333;
overflow: scroll;
}
</style>
</head>
<body>
<div class="div1" >
<h2>我多了我用'……'代替</h2>
一半的山色和一半的情丝，长满在这儿。我小坐在亭中，恰好一缕桂花香，
游过我的脸庞，寻香望去，它正开得傲然，开得美丽，就犹如贵财女子眉上的痣一般，
那么惊艳，那么动人心扉。这满城的美景，留着多少过往的人儿呀。
</div>
<div class="div2">
<h2>我多了隐藏</h2>
<p>一半的山色和一半的情丝，长满在这儿。我小坐在亭中，恰好一缕桂花香，
游过我的脸庞，寻香望去，它正开得傲然，开得美丽，
就犹如贵财女子眉上的痣一般，那么惊艳，那么动人心扉。
这满城的美景，留着多少过往的人儿呀。
</p>
</div>
<div class="div3">
<h2>我多了我自适应的出现滚动条</h2>
<p>一半的山色和一半的情丝，长满在这儿。我小坐在亭中，恰好一缕桂花香，
游过我的脸庞，寻香望去，它正开得傲然，开得美丽，
就犹如贵财女子眉上的痣一般，那么惊艳，那么动人心扉。
这满城的美景，留着多少过往的人儿呀。
</p>
</div>
<div class="div4">
<h2>无论怎样我都会出现滚动条</h2>
<p>一半的山色和一半的情丝，长满在这儿。我小坐在亭中，恰好一缕桂花香，
游过我的脸庞，寻香望去，它正开得傲然，开得美丽，
就犹如贵财女子眉上的痣一般，那么惊艳，那么动人心扉。
这满城的美景，留着多少过往的人儿呀。
</p>
</div>
</body>
</html>盒子定位
Position:定位方式有：static默认 fixed固定 relative相对定位 absolute绝对定位
默认 如果你不设置就是static（标准文档流）
坐标：偏离目标元素多远的距离
坐标的属性：
Left：数值；
Right：数值;
Top：数值；
Bottom：数值；
Fixed 固定定位（脱标，不随浏览器的滚动而滚动）
l 相对于浏览器窗口来进行的定位
l 如果不设置定位坐标，就在原来的位置
l 层级要被普通标签高
l 如果结合定位坐标，就是相对于目标位置的距离
l 设置固定定位之后，一定是块元素
Relative相对定位（文档流）
保留原来的位置进行定位
l 相对定位占空间
l 如果不结合定位坐标，就是在原来的位置
l 如果结合定位坐标，相对【自身】，作为参考点
l 层级要高于普通的元素
absolute绝对定位(脱标)
脱离了原来的位置进行定位（跟原来的位置不在同一个层面），形成层叠，后面的会把上一个定位的绝对定位给填充上以至于看不到后面的
设置绝对定位，不占空间
设置层级高于普通的元素
不结合定位坐标，就是在原来的位置
最近的有定位（只要是定位就可做参考）的父级进行定位，如果父级没有设置定位，一直往上找，直到找到body,就以body来进行定位，相对于整个窗口来进行定位。
开发中最常用的用法：子绝父相（子元素相对定位，父元相对定位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div{
width: 400px;
height: 40px;
margin-top: 20px;
}
.box1{
background-color: #d9d919;
position: absolute;
top:0;
left: 0;
}
.box2{
background-color: #b87333;
position: relative;
left: 50px;
}
.box3{
width: 100px;
height: 100px;
position: fixed;
background-color: blue;
right: 0;
}
.box4{
border: 2px solid #d9d919;
height: 200px;
position: relative;
}
.img{
position: absolute;
bottom: 0;
right:0;
}
</style>
</head>
<body>
<div class="box1">
我是绝对定位，我将脱离标准的文档流
</div>
<p>既然认准了一条路，何必去打听要走多久。既然认准了一条路，何必去打听要走多久。</p>
<div class="box2">
我是相对定位，站着茅坑不拉屎
</div>
<div class="box3">
我是固定定位，我定在那里就不动
</div>
<div class="box4">
<h3>子绝父相，在父级元素上</h3>
<img class="img" src="images/muzidigbig.png" style="width: 100px;height: 100px" alt="">
</div>
</body>
</html>#d9d919(亮金色)；#b87333(铜色)
若有不足请多多指教！希望给您带来帮助！
随时随地看视频
