CSS学习笔记 Day 7

CSS Day 7

CSS学习笔记 by 小喾苦

目录

1. 元素的显示和隐藏

目的： 让一个元素在页面中消失或者显示出来
场景： 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重更新出现

1.1 display 显示（重点）

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

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

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

1.2 visibility 可见性（了解）

设置或检索是否显示对象

visibility: visible; /* 对象可见 */
visibility: hidden; /* 对象隐藏 */

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

默认 inherit 继承上一个父对象的可见性

1.3 overflow 溢出（重点）

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

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

2. CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

• 更改用户的鼠标样式（滚动条因为兼容性非常差，我们不研究）

• 表单轮廊等

• 防止表单域拖拽

2.1 鼠标样式 cursor

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

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

2.2 轮廓线 outline

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

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

但是我们都不关心可以设置多少，我们平时都是去掉的
最直接的写法是： outline: 0 或者 outline: none

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

2.3 防止拖拽文本域 resize

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

3 vertical-align 垂直对齐

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

vertical-align: baseline || top || middle || bottom

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

注意： vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素,特别是行内块元素，通常用来控制图片/表单与文字的对齐

属性值	模式
baseline	基线对齐（默认）
middle	垂直居中
top	顶部对齐
bottom	底部对齐

3.1 图片、表单和文字对齐

<img src="……" style="vertical-align: center" />

3.2 去除图片底侧空白缝隙

方法一：

<!-- 因为默认的是基线对齐，所以底侧有空白缝隙 -->
<img src="……" style="vertical-align: 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: ellipsis; /* 当对象文本溢出时显示省略标记（...） */

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

4.3 总结三部曲

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

5. 精灵技术 sprite （重点）

5.1 为什么需要精灵技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
为了有效地减少服务器接受和发送洁求的次数，提高而面的加载速度。
出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

5.2 精灵技术详解

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图)，然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

• background-image

• background-repeat

• background-position （最关键）

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

1. 精准测量每个小背景图片的大小和位置

2. 给盒子指定小背景图片时，背景定位基本都是负值

.img1 {
    width: 18px;
    height: 21px;
    background-image: url(1512021630-0.gif);
    background-repeat: no-repeat;
    background-position: -128px -39px;
}
.img2 {
    width: 18px;
    height: 21px;
    background: url(1512021630-0.gif) no-repeat -128px -39px;
}

5.4 制作精灵图（了解）

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。

分辨率：72 像素/英寸 PPI（1pt=1px），颜色模式：RGB颜色，背景内容：背景色，保存为PNG格式

我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

6. 滑动门

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办?

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度,以便能适应不同字数的导航栏。
—股的经典布局都是这样的：

<!-- a是设置左侧背景（左门）    span是做右侧背景（右门） -->
<li>
    <a href="#">
        <span>导航栏内容</span>
    </a>
</li>

a { /* 因为我们是滑动门,左右推拉 */
    display: inline-block; /* 跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块 */
    height: 33px;
    background: url(images/to.png) no-repeat;
    padding-left: 15px;
    color: #fff;

}
a span {
    display: inline-block;
    height: 33px;
    /* 一定注意 span 需要背景图片右对齐 */
    background: url(images/to.png) no-repeat right;
    padding-right: 15px;
}

7. margin 负值之美

1）负边距+定位：水平垂直居中

一个绝对定位的盒子，利用父级盒子的50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。

2）压住盒子相邻边框

直接给 border ，相邻盒子的边框会比较粗

margin-left: -1px;
margin-top: -1px;

突出显示盒子

div:hover {
    position: relative;
    border: 1px solid #f40;
}

8. CSS 三角形之美

div {
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-bottom: 10px solid red;
    border-left: 10px solid red;
}

1. 使用 CSS 边框可以模拟三角效果

2. 宽度高度为0

3. 四个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

4. 为了照顾兼容性，加上 font-size: 0; line-height: 0;

p {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: red transparent transparent transparent;
    font-size: 0;
    line-height: 0;
}