Loading

06、CSS

1、定位

将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

1.1、边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

边偏移属性示例描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离

1.2、定位模式 (position)

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

 

 

1.3、静态定位(static)

  • 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。

  • 静态定位 按照标准流特性摆放位置，它没有边偏移。

  • 静态定位在布局时我们几乎不用的

1.4、相对定位(relative)

相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）

相对定位的特点：（务必记住）

  • 相对于 自己原来在标准流中位置来移动的

  • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

 

 

1.5、绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）

  1. 完全脱标 —— 完全不占位置；

  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

  1. 父元素要有定位

  • 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：（务必记住）

  • 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置

  • 不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

1.6、固定定位(fixed)

固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

  1. 完全脱标 —— 完全不占位置；

  2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

    • 跟父元素没有任何关系；单独使用的

    • 不随滚动条滚动。

  3. 提示：IE 6 等低版本浏览器不支持固定定位。

1.7、定位小结

定位模式是否脱标占有位置移动位置基准模式转换（行内块）使用情况
静态static 不脱标，正常模式 正常模式 不能 几乎不用
相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用
绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用
固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级

注意：

  1. 边偏移需要和定位模式联合使用，单独使用无效；

  2. top 和 bottom 不要同时使用；

  3. left 和 right 不要同时使用。

 

 

2、定位的扩展

2.1、绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

在使用绝对定位时要想实现水平居中，可以按照下图的方法：

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

 

 

2.2、堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

 

 

 

z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

  2. 如果属性值相同，则按照书写顺序，后来居上；

  3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

2.3、定位改变display属性

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

  • 可以用inline-block 转换为行内块

  • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

  • 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

完善新浪导航案例

同时注意：

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

2.4、圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度， 但是是有顺序的

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

如果4个角，数值相同

border-radius: 15px;

里面数值不同，我们也可以按照简写的形式，具体格式如下:

border-radius: 左上角 右上角  右下角  左下角;

3、元素的显示与隐藏

  • 目的

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

  • 场景

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

3.1、display 显示

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

display: none 隐藏对象

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

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

实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

 

3.2、visibility 可见性 (了解)

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

visibility：visible ; 　对象可视

visibility：hidden; 　  对象隐藏

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

 

3.3、overflow 溢出(重点)

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

实际开发场景：

  1. 清除浮动

  2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

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

 

3.4、显示与隐藏总结

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

4、CSS用户界面样式

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

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

  • 表单轮廓等。

  • 防止表单域拖拽

4.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>

4.2、轮廓线 outline

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

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

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

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

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

4.3、防止拖拽文本域resize

 

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

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

4.4、用户界面样式总结

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

5、vertical-align 垂直对齐

  • 有宽度的块级元素居中对齐，是margin: 0 auto;

  • 让文字居中对齐，是 text-align: center;

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

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

vertical-align : baseline |top |middle |bottom

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

  • 注意：

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

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

5.1、图片、表单和文字对齐

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

 

 

 

5.2、去除图片底侧空白缝隙

  • 原因：

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

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

  • 解决的方法就是：

    • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

    • 给img 添加 display：block; 转换为块级元素就不会存在问题了。

6、溢出的文字省略号显示

6.1、white-space

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

white-space:normal ；默认处理方式

white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

6.2、text-overflow 文字溢出

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

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

注意：

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

6.3、总结三步曲

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

7、CSS精灵技术（sprite)

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

7.1、精灵技术讲解

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

 

 

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的

  • background-image、

  • background-repeat

  • background-position属性进行背景定位，

  • 其中最关键的是使用background-position 属性精确地定位。

7.2、精灵技术使用的核心总结

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

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

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

 

 

posted @ 2021-10-30 21:26  菜鸟的道路  阅读(54)  评论(0)    收藏  举报