这是我参与「第四届青训营 」笔记创作活动的第7天 溢出属性
<style>
div{width:100px;height:100px;background:yellow;
/* overflow:visible;显示溢出；overflow:hidden溢出隐藏，文本裁切 */
/* overflow:scroll滚动条，不管字数都会出现滚动条 */
/* overflow:auto自动出现滚动条（只有字数过多才出现滚动条); */
/* overflow:inherit继承父元素的效果} */}
</style>
图片和文字都适用
Overflow-x;overflow-y：控制xy轴
2.空余空间
<pre>
预格式化文本-保留文本中的空格,tab,回车
</pre>
Pre-wrap：正常换行
Nowrap：不换行
Pre：显示空格回车不换行
Pre-line：显示回车，不显示空格和换行
块元素：display:block（div默认具有该属性）display:list-item独占一行显示，不会垂涎相邻元素重合的现象
（p标签可以放文本，不可以放块级元素）
行内元素自带：display: inline横排，不定义宽高，左右margin和padding支持上下不支持
行内块：display: inline-block可以定义宽高/横排，支持上下左右边距
元素转换：display
<style>
img{display:block;}
</style>
</head>
<body>
<img src="123.jpg" alt="">
<p>11111111111111111111</p>
隐藏效果：display:none
<style>
.hide{display:none;}
.box:hover ul{display:block;}
</style>
</head>
<body>
<div class="box">
军事
<ul class="hide">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</div>
正常情况不现实li，鼠标放在“军事”上显示li
定位:
Static默认：按照顺序横排竖排（根据元素属性）
相对定位：
<style>
div{width:200px;
height:200px;}
.box1{background:red;}
.box2{background:green;
position:relative;top:100px;left:100px}
/* 距离原来的位置向下向右移动100px，虽然移走，
但下面的蓝色盒子不会上移（原来的空间依然有占位） */
.box3{background:blue;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
绝对定位（父没有定位）：子盒子层级较高，显示在上方
修改层级：子盒子z-index为负数（修改父盒子z-index无用）
绝对定位（兄弟关系）：看顺序，后来居上，但是可以用z-index修改
<style>
*{margin:0;
padding:0;}
.box{height:200px;
background:yellow;
width:200px;
position:absolute;
top:100px;
left:100px}
/* 距离顶端100px，距离左端100px */
</style>
</head>
<body>
<div class="box"></div>
