CSS14.高级应用

CSS高级应用

1. 元素的显示与隐藏

目的

让一个元素在页面中消失或者显示出来
场景

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出来！

1.1 display显示（重点）

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

display: none 隐藏对象

display: block 除了转换为块级元素以外，同时还有显示元素的意思

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

1.2 visibility可见性（了解）

设置或检索是否显示对象

visibility: visible;  对象可视

visibility: hidden;   对象隐藏

特点：隐藏之后，继续保留原有的位置。（停职留薪）

1.3 overflow溢出（重点）

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

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

实际开发场景：

清除浮动
隐藏超出内容，隐藏掉，不允许内容超过父盒子

1.4 显示与隐藏总结

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

2. CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便更好提高用户体验。
- 更改用户的鼠标样式兼容性差，不研究
- 表单轮廓
- 防止表单域拖拽

2.1 鼠标样式cursor

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

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

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

2.2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的周围，可起到突出元素的作用。

online: outline-color || outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是：outlint: 0或者outline: none

<input type="text" style="outline: 0;"/>

2.3 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽:

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

2.4 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住pointer
轮廓线	表单默认outline	outline轮廓线，我们一般去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们使用`resize: none`

3. vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是text-align: center;

但是我们从来没有讲过有垂直居中的属性。

vertical-align 垂直对齐，它只针对于行内元素 或者 行内块元素

vertical-align: baseline /*基线对齐，默认是文本和图片基线对齐*/
vertical-align: top      /*垂直居中，默认是文本和图片基线对齐*/
vertical-align: middle   /*顶部对齐，默认是文本和图片基线对齐*/
vertical-align: bottom

设置或检索对象内容的垂直对齐方式。

注意：

vertical-align不影响块级元素中的内容对齐，它只针对行内元素或者行内块元素

特别是行内块元素，通常用来控制图片/表单与文字的对齐

3.1 图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

3.2 去除图片底侧空白缝隙

原因：

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙

解决方法：
- 给img vertical-align: middle | top | bottom等等。让图片不要和基线对齐。
- 给img添加display：block; 转换为块级元素就不会存在问题了。

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

4.1 white-space

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

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

4.2 text-overflow 文字溢出

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

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

注意：

一定首先强调一行内显示，再次和overflow属性搭配使用

4.3 总结三步曲

/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

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

5.1 为什么需要精灵技术

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。

5.2 精灵技术讲解

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），每次只要精准定位到某个小图即可，这样只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。

######

我们需要使用CSS的

background-image
background-repeat
background-position属性进行背景定位
其中最关键的是使用background-position属性进行精准定位。

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

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img是不需要使用这个技术的。

精准测量，每个小背景图片的大小和位置。
给盒子指定小背景图片时，背景定位基本都是负值。

6. 滑动门

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。

它使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，最常见于各种导航栏的滑动门。

核心技术

核心技术就是使用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏。

一搬经典的布局都是这样的：

/*1.a是设置左侧背景（左门）*/
a{
	/*因为我们是滑动门，左右推拉跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块*/
    display: inline-block;
    height: 33px;
    background: url(1.jpg) no repeat;
    margin: 100px;
    padding-left: 15px;
    color: #fff;
}
/*2.span是设置右侧背景（右门）*/
a span {
    display: inline-block;
    height: 33px;
    /*span需要背景图片 右对齐*/
    background: url(1.jpg) no-repeat right top;
    padding-right: 15px;
}
/*3.因为整个导航栏都是链接所以a包含span*/
<body>
	<a href="#">
   		<span>首页</span>
   	</a>
	<a href="#">
   		<span>公司新闻</span>
   	</a>
</body>

总结：

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

posted on 2023-03-24 19:12 u_Dawn 阅读(56) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS12.浮动

· CSS13.定位

· CSS-07 CSS高级技巧

· CSS高级技巧

· CSS高级使用技巧

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

u_Dawn

CSS14.高级应用

CSS高级应用

1. 元素的显示与隐藏

1.1 display显示（重点）

1.2 visibility可见性（了解）

1.3 overflow溢出（重点）

1.4 显示与隐藏总结

2. CSS用户界面样式

2.1 鼠标样式cursor

2.2 轮廓线 outline

2.3 防止拖拽文本域 resize

2.4 用户界面样式总结

3. vertical-align 垂直对齐

3.1 图片、表单和文字对齐

3.2 去除图片底侧空白缝隙

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

4.1 white-space

4.2 text-overflow 文字溢出

4.3 总结三步曲

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

5.1 为什么需要精灵技术

5.2 精灵技术讲解

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

导航

公告

统计

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

u_Dawn

CSS14.高级应用

CSS高级应用

1. 元素的显示与隐藏

1.1 display显示（重点）

1.2 visibility可见性 （了解）

1.3 overflow溢出（重点）

1.4 显示与隐藏总结

2. CSS用户界面样式

2.1 鼠标样式cursor

2.2 轮廓线 outline

2.3 防止拖拽文本域 resize

2.4 用户界面样式总结

3. vertical-align 垂直对齐

3.1 图片、表单和文字对齐

3.2 去除图片底侧空白缝隙

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

4.1 white-space

4.2 text-overflow 文字溢出

4.3 总结三步曲

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

5.1 为什么需要精灵技术

5.2 精灵技术讲解

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

导航

公告

统计

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

1.2 visibility可见性（了解）