CSS第七天——CSS高级技巧

1.元素的显示与隐藏

1.1display显示（重点）

display设置或检索对象是否及如何显示。

display: none 隐藏对象display: block 除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

1.2visibility可见性（了解）

设置或检索是否显示对象.

visibility: visible ;             对象可视visibility: hidden;               对象隐藏

特点:隐藏之后，继续保留原有位置。(停职留薪)

1.3overflow溢出（重点）

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible（默认）	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	只有超出时才自动加上滚动条

1.4显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1.可以清除浮动 2.保证盒子里面的内容不会超出该盒子范围

2.CSS用户界面样式

2.1鼠标样式curor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default（默认）	小白
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul>
<li styler"cursor :default" >我是小白</1i>
<1i style-"cursor: pointer" >我是小手</11>
<1i1 style-"cursor:move" >我是移动</1i>
<1i style="cursor:text" >我是文本</1i>
<1li style="cursor:not-allowed" >我是禁止</11>
</u1>

2.2轮廓线outline

可以设置outline-color，outline-style，outline-width，但我们通常不使用（浏览器兼容性问题）

最常见的用法为outline: 0或outline: none

2.3防止拖拽文本域resize

<textarea style="resize:none;"></textarea>

实际开发中，文本域也有默认轮廓线，需要把outline设置为none；其默认边框通过border进行修改

3.vertical-align 垂直对齐

3.1图片、表单与文字的对齐

vertical-align: baseline(基线)|middle(垂直中线)|top(顶部)

3.2去除图片底侧的空白缝隙

用图片撑开没有高度的盒子时，底部会有空白缝隙（原理是图片与文字默认基线对齐，空隙实际上是基线与底线之间的那部分）

解决方法一：img的vertical-align设置为顶线、中线、底线对齐都可以，只要不是默认的基线对齐（baseline）

解决方法二：img改为display: block，原理是块级元素就不会有默认的vertical-align基线对齐

4.溢出的文字省略号显示

4.1 white-space

●white-space设置或检索对象内文本显示方式。通常我们使用于强制-行显示内容

white-space:normal ;默认处理方式white-space:nowrap ;强制在同- -行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

4.2 text-overflow文字溢出

●设置或检索是否使用一个省略标记(…）标示对象内文本的溢出

text-overflow : clip ;不显示省略标记(...) ，而是简单的裁切text-overflow: ellipsis ;当对象内文本溢出时 显示省略标记(...)

注意:
一定要首先强制一行内显示，再次和overflow属性搭配使用

5.CSS精灵技术（sprite）重点

5.1为什么需要精灵技术

为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

5.2精灵技术使用的核心总结

精确测量，每个小背景图片的大小和位置。
给盒子指定小背景图片时，背景定位基本都是负值。
使用background-position 属性精确的定位。

6.滑动门

总结：

a设置背景左侧，padding撑开合适宽度。
span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的，看成一个链接

<style>a {display: inline-block;height: 33px;background: url() no-repeat;}a span {display: inline-block;height: 33px;background: url() no-repeat right top; }
</style>

<a href="#">    <span>一个按钮</span></a>

CSS第七天——CSS高级技巧相关推荐

[css] 你所理解的css高级技巧有哪些？
[css] 你所理解的css高级技巧有哪些? 各种动画效果,能用css的都可以不去用js写的,对我来说就很高级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
[css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天学习目标: 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式 ...
CSS入门七、CSS3新特性
零.文章目录 CSS入门七.CSS3新特性 1.CSS3 的现状新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛 2.CSS3 新增选择器 CSS3 ...
从零开始学习html（七）CSS样式基本知识
一.内联式css样式,直接写在现有的HTML标签中 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equi ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
【CSS】537- 认真介绍 CSS 原理
作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 一.浏览器渲染开篇,我们还是不厌其烦的回顾一下浏览器的渲染过程,先上图: 正如上图所展示的,我们浏览器渲染过程分为了两条主线: 其一 ...
简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
超细的CSS学习笔记（CSS详解）
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录一.CSS介绍 1.CS ...

CSS第七天——CSS高级技巧

CSS第七天——CSS高级技巧

1.元素的显示与隐藏

1.1display显示（重点）

1.2visibility可见性（了解）

1.3overflow溢出（重点）

1.4显示与隐藏总结

2.CSS用户界面样式

2.1鼠标样式curor

2.2轮廓线outline

2.3防止拖拽文本域resize

3.vertical-align 垂直对齐

3.1图片、表单与文字的对齐

3.2去除图片底侧的空白缝隙

4.溢出的文字省略号显示

4.1 white-space

4.2 text-overflow文字溢出

5.CSS精灵技术（sprite）重点

5.1为什么需要精灵技术

5.2精灵技术使用的核心总结

6.滑动门

CSS第七天——CSS高级技巧相关推荐

最新文章

热门文章