8-CSS-布局总结

836 views

目录内容

图片

16 网页布局总结

  1. 标准流：垂直的块级盒子显示就用标准流（上下排列）
  2. 浮动：多个块级盒子水平显示就用浮动（左右排列）
  3. 如果元素在某个盒子内自由移动就用定位布局（自由定位）

17 元素的隐藏与显示

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

  • display 显示隐藏
  • visibility 显示隐藏
  • overflow 溢出部分显示隐藏

17.1 display 属性 display：non``e

display属性：设置一个元素如何显示

  • display：none; 隐藏对象（对象也不占有原来位置）
  • display：block; 转为块级元素 / 显示元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .block1 {
            display: none;  /* 隐藏了block1 */
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

        .block2 {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="block1"></div>
    <div class="block2"></div>
</body>

</html>

图片

display后面的应用极其广泛，搭配 JS 可以做很多网页特效。

17.2 visibility 可见性 visibility：hidden

属性值设置：

  • visibility：inherit 继承父级元素的隐藏性
  • visibility：visible 元素可视
  • visibility：hidden 元素不可视（继续占有原来的位置）

注意点：

  • 如果隐藏元素想要保留原来的位置，就使用visibility
  • 如果隐藏元素不想要保留原来的位置，就使用display

17.3 overflow 溢出隐藏 overflow：hidden

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

  • visible：不剪切内容也不添加滚动条

    图片

  • hidden：不显示超过对象尺寸的内容，超出部分隐藏

    图片

  • scroll：不管超出内容否，总是显示滚动条

    图片

  • auto：当没有超出内容时不显示滚动条，当超出内容时，显示滚动条

    图片

注意点：

  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
  • 但是如果有定位的盒子，请慎用 overflow:hidden，因为它会隐藏多余的部分。

18 精灵图sprites

为何需要精灵图？

页面有许多的图片，每次加载网页都需要向服务器中请求，图片数量太多时需要反复向服务器请求和接收图片，导致速度非常慢。

CSS精灵技术：我们将一些图片组合在一起，只进行一次请求，提升页面加载速度。

精灵图的使用：

  • 精灵图主要是针对小的背景图片（不包括经常更换的产品图）
  • 移动整个合并后的背景图片位置：background-position
  • 一般情况下精灵图（背景图片中的一个小图）都是负值（x往右为正，y往下为正）
.box1 {
    width: 60px;      /* 框出精灵图的大小 */
    height: 60px;
    margin: 100px auto;    /* 精灵图的左上角最终显示在页面的哪个位置 */
    background: ur1(images/sprites.png) no-repeat -182px 0;   /* 将背景图sprites.png往左移动182px，垂直不动 */
}

效果：从背景图sprites.png中截取到所需的精灵图，放入盒子box1中：

图片

19 字体图标 iconfont

使用场景：显示网页中通用、常用的一些小图标

图片

精灵图的缺点：

  • 图片文件比较大（字体图标看上去是图片，但本质是文字，所占的内存非常小）

  • 图片本身放大和缩小会失真（字体图标是字体，字体是矢量的，随便放大或缩小）

  • 一旦图片制作完毕想要更换很复杂，需要P图（字体图标是文字，可以直接更换）

字体图标的优点：

  • 轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以很随意地改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，可以放心使用

字体图标展示的是图标，但是本质是字体：可以继承文字的属性，例如：font-size color

注意：字体图标不能取代精灵图技术，因为字体图标是很简单的图标，不能展示非常难的图标，例：腾讯的logo很难用字体图标表示。

小结：

  • 如果遇到一些样式比较简单的小图标，就使用字体图标
  • 如果遇到一些样式复杂的小图片，就使用精灵图

19.1 字体图标下载

  1. 阿里矢量库（国内）
  2. icomoon（国外）

19.2 字体图标的使用

字体图标的使用分为4步:

  • 第一步：下载字体图标，最后得到一个这个文件：

    图片

  • 第二步：将fonts文件夹复制到index.html的同级目录（页面的根目录）下。

图片图片-20231206193925654

fonts文件夹内有4个文件，是为了更好的兼容性：不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

  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+ ;

  5. 第三步：打开style.css文件，把这些字体文件通过css引入到我们页面中，注意字体文件的路径，复制以下代码到index.html的中（或者外部样式表中），进行字体声明：

    @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?c07rcx');
      src:  url('fonts/icomoon.eot?c07rcx#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?c07rcx') format('truetype'),
        url('fonts/icomoon.woff?c07rcx') format('woff'),
        url('fonts/icomoon.svg?c07rcx#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

  • 第四步：打开demo.html，选择自己的想要的字体图标，复制这个小框到自己的html文档中的中间：图片

  • 这个小框就是一个字体，我们需要设置字体样式：

    span {
        font-family:'icomoon';
        font-size: 30px;
    }
  • 最后就可以在浏览器中看到我们的字体图标了

总结代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
</head>
<style>
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?c07rcx');
        src: url('fonts/icomoon.eot?c07rcx#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?c07rcx') format('truetype'),
            url('fonts/icomoon.woff?c07rcx') format('woff'),
            url('fonts/icomoon.svg?c07rcx#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    p{
        font-family:'icomoon' ;   
        /* 和上面font-family保持一致 */
        font-size: 30px;
    }
</style>
<body>
    <p></p>
</body>
</html>

19.3 字体图标的追加

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

步骤：网址中点击IconMoon App，点击左上角Import Icons，把压缩包iconmoon里面的selection.json 打开，点击新加的图标，点击Generate Font，点击Download，并替换原来的文件即可。

原理：向服务器一次性请求包括所有的字体的iconmoon文件。

20 三角形制作

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

图片

设置一个没有大小的盒子，然后给这个盒子一个边框：

.one {
    width: 0;   /* 没有大小 */
    height: 0;
    border-top: 10px solid pink;
    border-left: 10px solid green;
    border-right: 10px solid red;
    border-bottom: 10px solid blue;
}

图片

因此三角形的制作方法为：

.one {
    width: 0;
    height: 0;
    border: 50px solid transparent;  /* 使用边框宽度50px控制三角形大小 */
    border-top-color: pink;
}

图片

同时，对于这种效果：

图片

可以使用“子绝父相”的方法，父级一个大的相对定位的盒子，子级为一个绝对定位的小三角。