这里写目录标题
二十九、溢出属性
说明:
overflow:visible（显示溢出）/hidden（隐藏）/scroll（固定滚动条）/auto（自动滚动条）/inherit（继承父元素的效果）;
visible:默认值，溢出内容会显示在元素之外;
hidden:溢出内容隐藏;
scroll:滚动，溢出内容以滚动方式显示;
auto:如果有溢出会添加滚动条，没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出; overflow-y:Y轴溢出
溢出省略号
– 空余空间
说明:
white-space: normal/nowrap/pre/pre-wrap（会折行）/pre-line /inherit该属性用来设置如何处理元素内的空白;
normal:默认值，空白会被浏览器忽略，
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止;
pre:显示空格,回车，不换行pre-wrap:显示空格,回车,换行
pre-line:显示回车,不显示空格,换行
（溢出省略号）
white-space: nowrap;
overfLow: hidden;
text-overfLow: ellipsis;
三十、元素显示类型
| 块元素(block element) | 行内(内联)元素 | 行内块元素 |
|---|---|---|
| A)块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域， | A)内联元素的表现形式是始终以行内逐个进行显示;横着排 | |
| B）默认情况下，块状元素都会占据一行;默认情况下，块状元素会按顺序自上而下排列。 | B)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状; | 内联块状元素（(inline-block）就是同时具备内联元素、块状元素的特点 |
| C)块状元素都可以定义自己的宽度和高度。D)块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子 | C)内联元素也会遵循盒模型基本规则。但是对于margin和padding个别属性值不生效 | |
| 例如:div p ul li ol li dl dt dd h1-h6等 | 例如: a b em i span strong等 | 例如:img input等 |
注：span行内元素 只能设置边距的左右边距，不能设置上下边距。
元素类型相互转换
<style>
div{
width:200px;
height:200px;
background: red;
display: inline-block;
}
</style>
隐藏菜单
<!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>
.hide{
display: none;
}
.box:hover ul{ display:block; }
</style>
</head>
<body>
<div class="hide">11111</div>
<div class="box">
军事
<ul class="hide">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</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;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
.box .item{
float: left;
width: 150px;
text-align: center;
border:1px solid rgb(98, 98, 253);
background-color: rgb(98, 98, 253);
color: white;
line-height: 40px;
}
.item:hover{
background-color: aquamarine;
}
.item ul{
display: none;
background-color: white;
color: black;
}
.item:hover ul{
display: block;
}
.item li:hover{
color: blue;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部视频教程</li>
<li>全部视频教程</li>
<li>全部视频教程</li>
<li>全部视频教程</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>全部视频教程</li>
<li>全部视频教程</li>
</ul>
</li>
</ul>
</body>
</html>
三十二、定位
（一）定位的属性和属性值
| 个数 | 书写语法 | 说明 | 文档流 | 位置偏移时候的参照物（top left right bottom） | 层叠顺序（z-index） |
|---|---|---|---|---|---|
| 1 | position: static; | 默认值 | 默认 | 默认 | z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大,层越靠上; |
| 2 | position: absolute; | 绝对定位 | 脱离 | A)当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏; B)有父元素且父元素有定位，父元素 | |
| 3 | position: relative; | 相对定位 | 不脱离 | 自己的初始位置 | |
| 4 | position: fixed; | 固定定位 | 脱离 | 浏览器的当前窗口 | |
| 5 | position: sticky; | 黏性定位 | 可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好 |
（透明度opacity: 1;）
（二）定位里的层级
后来者居上
z -index定位层级（层级越大越靠上）
1.默认层级为0
2.嵌套时候的层级问题
（三）定位控制元素水平垂直居中
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
（四）浮动与定位的区别
浮动：半脱离，文字环绕
绝对定位：全脱离，不会有文字环绕
三十三、利用边框实现三角形
<style>
div{ width: 0px; height :0px; /* 将内部区域大小设为0 */
border-top-color: white;
border-top-style:solid;
border-top-width : 30px;;
border-right-color: red;
border-right-style: solid;
border-right-width : 30px;;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 30px;;
border-left-color: white;
border-left-style: solid;
border-left-width : 30px;;
</style>
(可利用透明颜色 ：transparent)
三十三、锚点
<!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;
}
ul{
list-style: none;
position: fixed;
right: 0px;
top: 100px;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
div{
height: 600px;
border: 1px solid #ccc;
}
/* 锚点作用：页面不同区域的跳转，使用a链接。
<a href="#锚点名字"></a>
<div id="锚点名字"></div>
*/
</style>
</head>
<body>
<ul>
<li><a href="#a">京东秒杀</a></li>
<li><a href="#b">京东秒杀</a></li>
<li><a href="#c">京东秒杀</a></li>
<li><a href="#d">京东秒杀</a></li>
</ul>
<div id="a">京东秒杀</div>
<div id="b">京东秒杀</div>
<div id="c">京东秒杀</div>
<div id="d">京东秒杀</div>
</body>
</html>
三十四、精灵图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。
.box{
background-position: -205px -111px;
}
（设置负值，移动的为背景图片）
三十五、宽高自适应
自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适
宽度自适应高度自适应
(1)宽度自适应
元素宽度的默认值为auto（或不写）
(2)高度自适应
元素高度的默认值 {height:auto;}
三十六、浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后。父元素会发生高度塌陷
方法1:给父元素添加声明overflow:hidlden;(缺点:会隐藏差出的元素)
方法2:在浮动元素下方添加空块元素,并给该元素添加声明: clear:both; height:0; overflow:hidden;(缺点:在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能]
方法3:万能清除浮动法
选择符;
after4content" ";clear:bothdisplayblock;heightO;wisibility:hiddenc/owerflow.hidden;
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
