欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

入门级CSS教程(第4讲)

最编程 2024-07-28 07:51:18
...

1 定位

1.1 为什么需要定位

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。
  2. 定位则是可以让盒子*的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

1.2 定位组成

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

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

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.2.1 边偏移(方位名词)

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

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

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

1.2.2 定位模式 (position)

在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:

选择器 {
   
    
    position: 属性值; 
}

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

定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:

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

image.png

1.3 定位模式介绍

1.3.1 静态定位(static) - 了解

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

  • 语法:

    选择器 {
         
          
        position: static; 
    }
    
  • 静态定位 按照标准流特性摆放位置,它没有边偏移。

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

1.3.2 相对定位(relative) - 重要

  • 相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的(自恋型)。
  • 语法:
选择器 {
   
    
    position: relative; 
}
  • 相对定位的特点:(务必记住)

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

    • 2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)

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

  • 效果图:

image.png

1.3.3 绝对定位(absolute) - 重要

1.3.3.1 绝对定位的介绍

  • 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。

  • 语法:

     选择器 {
         
          
         position: absolute; 
     }
    
  1. 完全脱标 —— 完全不占位置;
  2. 父元素没有定位,则以浏览器为准定位(Document 文档)。

image.png

  1. 父元素要有定位

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

image.png

  • 绝对定位的特点总结:(务必记住)

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

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

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

1.3.3.2 定位口诀 —— 子绝父相

弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。

这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

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

①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时,需要占有位置,因此父亲只能是相对定位。

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级

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

当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

疑问:为什么在布局时,子级元素使用绝对定位时,父级元素就要用相对定位呢?

观察下图,思考一下在布局时,左右两个方向的箭头图片以及父级盒子的定位方式。

image.png

image.png

分析

  1. 方向箭头叠加在其他图片上方,应该使用绝对定位,因为绝对定位完全脱标,完全不占位置。
  2. 父级盒子应该使用相对定位,因为相对定位不脱标,后续盒子仍然以标准流的方式对待它。
    • 如果父级盒子也使用绝对定位,会完全脱标,那么下方的广告盒子会上移,这显然不是我们想要的。

结论父级要占有位置,子级要任意摆放,这就是子绝父相的由来。

1.3.4 固定定位(fixed) - 重要

  • 固定定位是元素固定于浏览器可视区的位置。(认死理型) 主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法:

     选择器 {
         
          
         position: fixed; 
     }
    
  • 固定定位的特点:(务必记住):

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

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

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

  • 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。(认死理型)

    • 完全脱标—— 完全不占位置;
    • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;
      • 跟父元素没有任何关系;单独使用的。
      • 不随滚动条滚动。

固定定位举例:

image.png

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

固定定位 小技巧:固定在版心右侧位置。

小算法:

  1. 让固定定位的盒子 left:50% 。走到浏览器可视区(也可以看做版心)的一半位置。

  2. 让固定定位的盒子 margin-left:版心宽度的一半距离。多走版心宽度的一半位置。

    就可以让固定定位的盒子贴着版心右侧对齐了。

1.3.5 粘性定位(sticky) - 了解

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

  • 语法:

     选择器 {
         
          
         position: sticky; 
         top: 10px; 
     }
    
  • 粘性定位的特点:

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

    2.粘性定位占有原先的位置(相对定位特点)。

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

    跟页面滚动搭配使用。 兼容性较差,IE 不支持。

1.3.6 定位总结

定位模式 是否脱标 移动位置 是否常用
static 静态定位 不能使用边偏移 很少
relative 相对定位 否 (占有位置) 相对于自身位置移动 基本单独使用
absolute绝对定位 是(不占有位置) 带有定位的父级 要和定位父级元素搭配使用
fixed 固定定位 是(不占有位置) 浏览器可视区 单独使用,不需要父级
sticky 粘性定位 否 (占有位置) 浏览器可视区 当前阶段少
  • 一定记住 相对定位、固定定位、绝对定位 两个大的特点: 1. 是否占有位置(脱标否) 2. 以谁为基准点移动位置。

  • 学习定位重点学会子绝父相。

  • 注意:
  1. 边偏移需要和定位模式联合使用,单独使用无效
  2. topbottom 不要同时使用;
  3. leftright 不要同时使用。

2 定位(position)的应用

2.1 固定定位小技巧: 固定在版心左侧位置。

小算法:

1.让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

5ef86a46e7af4c12b9609173a54a1e80.png

image.png

案例效果:

image.png

<style>
        .w {
    
    
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
    
    
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>

</body>

2.2 堆叠顺序(z-index)

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

  • 语法:

    选择器 {
         
          
        z-index: 1; 
    }
    
  • z-index 的特性如下:

    1. 属性值正整数负整数0,默认值是 0,数值越大,盒子越靠上;
    2. 如果属性值相同,则按照书写顺序,后来居上
    3. 数字后面不能加单位
    4. 只有定位的盒子才有 z-index 属性。

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

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

image.png

案例演示:堆叠顺序。

3 定位(position)的拓展

3.1 绝对定位的盒子居中

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

但是可以通过以下计算方法实现水平和垂直居中,可以按照下图的方法:

image.png

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

盒子居中定位示意图

image.png

3.2 定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

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

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
  • 绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。

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

3.3 脱标的盒子不会触发外边距塌陷

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

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

3.4 绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)。

但是绝对定位(固定定位) 会压住下面标准流所有的内容。

浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素。

image.png

4 网页布局总结

通过盒子模型,清楚知道大部分 html 标签是一个盒子。

通过 CSS 浮动、定位 可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

4.1 标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局

4.2 浮动

可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局

4.3 定位

定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素*在某个盒子内移动就用定位布局。

5 元素的显示与隐藏

  • 目的(本质)

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

  • 场景

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

5.1 display 显示(重点)

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

    display: none; 隐藏对象
    
    displayblock; 除了转换为块级元素之外,同时还有显示元素的意思。
    
  • 特点: display 隐藏元素后,不再占有原来的位置。

  • 后面应用及其广泛,搭配 JS 可以做很多的网页特效。实际开发场景:

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

image.png

5.2 visibility 可见性 (了解)

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

    visibilityvisible;  元素可视
    
    visibilityhidden;    元素隐藏
    
  • 特点:visibility 隐藏元素后,继续占有原来的位置。(停职留薪)

  • 如果隐藏元素想要原来位置, 就用 visibility:hidden

    • 如果隐藏元素不想要原来位置, 就用 display:none (用处更多 重点)

image.png

5.3 overflow 溢出(重点)

  • overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条
  • 一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
  • 但是如果有定位的盒子, 请慎用overflow:hidden 因为它会隐藏多余的部分。

image.png

  • 实际开发场景:
  1. 清除浮动
  2. 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。

5.4 显示与隐藏总结

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

6 精灵图(重点)

6.1 为什么需要精灵图

image.png

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

为什么使用精灵图(目的):

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

核心原理

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

精灵图举例:

image.png

6.2 精灵图(sprites)的使用

使用精灵图核心:

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

使用精灵图核心总结:

  1. 精灵图主要针对于小的背景图片使用。

  2. 主要借助于背景位置来实现---background-position

  3. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理。)

6.3 案例:拼出自己名字

6.3.1 案例效果

image.png

6.3.2 代码参考

结构

<span class="p">p</span>
<span class="i">i</span>
<span class="n">n</span>
<span class="k">k</span>

样式

span {
   
   
    display: inline-block;
    background: url(images/abcd.jpg) no-repeat;
}
.p {
   
   
    width: 100px;
    height: 112px;
    /* background-color: pink; */
    background-position:  -493px -276px;
}
.i {
   
   
    width: 60px;
    height: 108px;
    /* background-color: pink; */
    background-position: -327px -142px;
}
.n {
   
   
    width: 108px;
    height: 109px;
    /* background-color: pink; */
    background-position: -215px -141px;
}
.k {
   
   
    width: 105px;
    height: 114px;
    /* background-color: pink; */
    background-position: -495px -142px;
}

7 字体图标

7.1 字体图标的产生

字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。

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

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

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

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

此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont

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

7.2 字体图标的优点

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

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

总结:

1.如果遇到一些结构和样式比较简单的小图标,就用字体图标。image.png

2.如果遇到一些结构和样式复杂一点的小图片,就用精灵图。

image.png

使用步骤

字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为:

1.字体图标的下载

2.字体图标的引入 (引入到我们html页面中)

3.字体图标的追加 (以后添加新的小图标)

7.3 字体图标的下载

推荐下载网站:

  • icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

IcoMoon 成立于 2011 年,推出了第一个自定义图标字体生成器,它允许用户选择所需要的图标,使它们成一字型。该字库内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。

  • 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是,免费!

7.4 字体图标的引入

下载完毕之后,注意原先的文件不要删,后面会用

  1. 把下载包里面的 fonts 文件夹放入页面根目录下

image.png

  • 字体文件格式

不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。

1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

2).Web Open Font Format( .woff )格式woff字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

3).Embedded Open Type( .eot )格式.eot字体是IE专用字体,支持这种字体的浏览器有IE4+;

4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;

2.在 CSS 样式中全局声明字体: 简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题

 @font-face {
   
   
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
  1. html 标签内添加小图标。

image.png

  1. 给标签定义字体。

    span {
         
         
    font-family: "icomoon";
    }
    

    注意:务必保证 这个字体和上面@font-face里面的字体保持一致

image.png

7.5 字体图标的追加

如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。

image.png

7.6 字体图标加载的原理:

9b538f1f695d4ca98f66c0a51a3622b4.gif

8 CSS 三角

8.1 介绍

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

一张图, 你就知道 CSS 三角是怎么来的了, 做法如下:

b748294e6cf84845a311e61043084ba5.png

 div {
   
   
     width: 0; 
    height: 0;
    border: 50px solid transparent;
    border-color: red green blue black;
    line-height:0;
    font-size: 0;
 }
  1. 我们用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

8.2 案例:京东三角

8.2.1 效果图

image.png

8.2.2 代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 三角制作</title>
    <style>
        .box1 {
    
    
            width:
						

上一篇: 网页前端 CSS进阶布局技巧(二):详解5.3 子元素相对定位与父级元素的关系(子绝父相)

下一篇: 分类定位:从子类别到整体关系的深入探讨与扩展

推荐阅读