【CSS】CSS入门笔记第三弹~

CSS今天就更新完啦~✨✨✨,接下来还是要不断的学习，一起加油吧🌸🌸🌸
💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜

CSS入门笔记第一弹：CSS入门笔记第一弹~
CSS入门笔记第二弹：CSS入门笔记第二弹~

此篇定位所占篇幅之多，可见其之重要💜💜💜💜

一、定位

1.1.定位概念

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

定位也是用来布局的

1.2.定位目的

💡💡

• 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

• 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.3.定位组成

定位 ：

• 定位模式

用于指定一个元素在文档中的定位方式

• 边偏移

决定了该元素的最终位置

边偏移（方位名词）

边偏移 :定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性

💡💡

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

1.4.定位模式

通过 position 属性定义元素的定位模式

💡💡

选择器 { 
    position: 属性值; 
}
1
2
3

选择器{position:static;}
/*脱标*/
选择器{position:absolute;}
/*相对定位相对于自己原来的位置移动，没有脱标*/
选择器{position:relative;}
/*脱标 以浏览器的可视窗口为参考点*/
选择器{position:fixed;}
1
2
3
4
5
6
7

1.5.静态定位(static)

静态定位是元素的默认定位方式，无定位的意思

  选择器 { 
      position: static; 
  }
1
2
3

1.6.相对定位(relative)

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的

选择器 { 
	position: relative; 
}
1
2
3

💡💡划重点啦

• 相对定位的特点：

  • 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

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

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

1.7.绝对定位(absolute)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

  选择器 { 
  	position: absolute; 
  }
1
2
3

💡💡划重点啦

• 绝对定位的特点总结：

  1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

  2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

  3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

💡💡
其它：

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

2. 父元素没有定位，则以浏览器为准定位

3. 父元素要有定位

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

1.8.父绝子相

💡💡这个超级重要

子级是绝对定位的话，父级要用相对定位。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

1.9.固定定位(fixed)

固定定位是元素固定于浏览器可视区的位置

  选择器 { 
  	position: fixed; 
  }
1
2
3

💡💡划重点啦

• 固定定位的特点

1.以浏览器的可视窗口为参照点移动元素。

• 跟父元素没有任何关系
• 不随滚动条滚动。

2.固定定位不在占有原先的位置。

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
  • 完全脱标—— 完全不占位置；
  • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
    • 跟父元素没有任何关系；单独使用的
    • 不随滚动条滚动。

1.10.粘性定位(sticky)

粘性定位可以被认为是相对定位和固定定位的混合

  选择器 { 
      position: sticky; 
      top: 10px; 
  }
 
1
2
3
4
5

💡💡

• 粘性定位的特点：

  1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

  2.粘性定位占有原先的位置（相对定位特点）

  3.必须添加 top 、left、right、bottom 其中一个才有效

1.11.堆叠顺序（z-index）

用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { 
	z-index: 1; 
}
1
2
3

💡💡

• z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  2. 如果属性值相同，则按照书写顺序，后来居上；
  3. 数字后面不能加单位。

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

选择器 {z-index:1;}
数值可以是正整数负数0  默认auto 数值越大 盒子越往上
只有定位的盒子才有z-index属性
1
2
3

1.12.定位拓展让一个元素在页面中消失或者显示出来

1. 绝对定位的盒子居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。

2. 固定定位——固定在版心右侧位置

1.left：50%
2.margin-left：版心宽度的一半距离

二、元素的显示与隐藏

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

2.1.display显示

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

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

特点： display 隐藏元素后，不再占有原来的位置

💡💡
实际开发场景：

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

2.2.visibility 可见性

• visibility 属性用于指定一个元素应可见还是隐藏

  visibility：visible ; 　元素可视
  
  visibility：hidden; 　  元素隐藏
  1
  2
  3

特点：visibility 隐藏元素后，继续占有原来的位置

2.3.overflow 溢出

• overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么

💡💡

overflow: hidden;
/* scroll移除的部分显示滚动条 */
overflow: scroll;
/*auto超出自动显示滚动条，不超出不显示*/
overflow: auto;
overflow:visible;
1
2
3
4
5
6

三、 精灵图

3.1.使用精灵图目的

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

原因：

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

原理：

将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了

3.2.精灵图（sprites）的使用

💡💡
使用精灵图：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

2、测量字母的大小及坐标

1. 通过矩形选框工具，测量字母的大小，并将div的大小设置为字母的大小。
2. 打开窗口菜单栏中的信息，可以查询字母width、height、x轴和y轴的信息。
3. 将鼠标光标移动到字母的左上角位置，通过右侧的信息面板测出x和y的值。
4. 在css中编写style样式，通过background-position定位到字母所在的位置。

1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现—background-position 。
3. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

四、 字体图标

4.1.字体图标产生

精灵图有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真。

3.一旦图片制作完毕想要更换非常复杂。

字体图标 iconfont很好的解决了以上问题。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

4.2.字体图标的优点

💡💡

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用
• 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

使用方法可以参考我之前写的一篇博客：icomoon下载字体图标

五、CSS 三角

5.1.简介

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标

5.2.三角形

💡💡

1. 上三角
   建一个盒子

<div class="shangsanjiao">div>
1

.shangsanjiao{
	width:0;
    height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
}

1
2
3
4
5
6
7
8

2. 右三角

.kailong{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:50px solid red;
}
1
2
3
4
5
6
7

3. 下三角

.kailong{
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-top:50px solid red;
}

两种写法

 .box2 {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: pink;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 左三角

.kailong{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid red;
}
1
2
3
4
5
6
7

六、CSS 用户界面样式

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

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

💡💡

<ul>
      <li style="cursor: default">pink老师太好啦li>
      <li style="cursor: pointer">pink老师太好啦li>
      <li style="cursor: move">pink老师太好啦li>
      <li style="cursor: text">pink老师太好啦li>
      <li style="cursor: not-allowed">pink老师太好啦li>
 ul>
1
2
3
4
5
6
7

6.1. 鼠标样式 cursor

 li {
 	cursor: pointer; 
 }
1
2
3

6.2. 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

 input {
 	outline: none; 
 }
1
2
3

6.3. 防止拖拽文本域 resize

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

 textarea{ 
 	resize: none;
 }
1
2
3

七、vertical-align 属性应用

7.1.使用场景

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

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

7.1.图片、表单和文字对齐

💡💡

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

7.2.解决图片底部默认空白缝隙问题

💡💡

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

2. 把图片转换为块级元素 display: block;

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

8.1.单行文本溢出显示省略号

单行文本溢出显示省略号–必须满足三个条件：

💡💡

  /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行）
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;
1
2
3
4
5
6
7
8

8.2. 多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS笔记就此已经整理完了⭐⭐，，后面如果发现有需要补充或者有些的不对的地方 我会对文章更改的~🌸🌸🌸🌸

下面还是要继续学习✨✨冲冲冲~
💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜

“少年有梦，不应止于心动，更要付诸行动”💜💜💜💜