18.元素显示与隐藏
举例:网站的广告,点击关闭就没有,一刷新就重新出现。
类型 | 含义 |
---|---|
display | 显示隐藏元素,不保留位置 display:none;(隐藏) display:block;(显示) |
visibility | 显示隐藏元素,保留位置 visibility:visible;(可视) visibility:hidden;(隐藏) |
overflow | 溢出显示隐藏,只对溢出部分处理 |
备注:
1.overflow(溢出时会怎样):
样式 | 含义 |
---|---|
visible | 不切内容不加滚动条 |
hidden | 不显示超出内容 |
scroll | 一直有滚动条 |
auto | 超出有滚动条,不超出没有 |
2.一般不让溢出内容显示,但如果有定位的盒子,慎用overflow:hidden(会隐藏多余部分)。
19.精灵图sprites
1.用处:
主要用于背景图片,把多个小背景图片整合到一张大图片,减少服务器接收和发送请求的次数,提高页面加载速度。
2.做法:
先量要的小图的大小,确定盒子的大小,然后left、top移动。
background: url(images/sprites.png) no-repeat -155px -106px;(一般为负值,往左/上为负值,往右/下为正值)
备注:移动背景图片位置,用background-position,移动距离为目标图片的x和y坐标。
20.字体图标iconfont
网站:icomoon/iconfont
本质:字体,文本
21.鼠标样式 cursor
cursor:default(默认三角)/pointer(小手)/move(移动即十字架)/text(文本I)/not-allowed(禁止);
22.轮廓线outline和防拖拽文本域 resize
input, textarea {
/* 取消表单轮廓,去掉默认表单蓝边框 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
<!-- 1. 取消表单轮廓 -->
<input type="text">
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
23.vertical-align
作用:设置图片或者表单(行内块元素)和文字垂直对齐,去掉图片底侧空白。
属性 | 含义 |
---|---|
baseline | 默认,放基线 |
top | 与最高元素顶端对齐 |
middle | 放父元素中间 |
bottom | 与最低元素对齐 |
备注:只对行内(块)元素有效。
24.溢出的文字省略号显示
1.单行:
/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
2.多行:
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
25.三角做法和巧用
1.三角做法
盒子宽高为0,给4条边框transparent,再给其中一条加颜色。大盒子装小盒子,绝对定位。
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
<div class="jd">
<span></span>
</div>
2.三角巧用
想做直角三角形,且两条直角边不一样长。
先把左边和下边的边框宽度设为0,再把上边框宽度加大。
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大, 右边框 宽度稍小, 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
}
</style>
26.其他巧用
1.margin负值的巧妙运用
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* ul li:hover {
1. 如果盒子没有定位,则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 2.如果li都有定位,则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
备注:
1.解决两边框1+1=2的问题,给每个盒子加margin-left:-1px(border宽度)
2.若要实现鼠标每经过每个盒子时,盒子四条边都变色鼠标经过提高当前盒子层级,若盒子无定位,则加相对定位,若有定位,则加z-index。
2.文字围绕浮动元素的妙用
在一个大盒子中,把图片浮动放进去,文字只需要标准流就可以自动围绕着图片。
3.行内块的巧妙运用
给父亲添加text-align:center
,则父亲所有的行内(块)元素都会水平居中。