☀️前端基础—【CSS高级技巧⭐⭐⭐】

最新推荐文章于 2022-10-15 10:34:44 发布
最新推荐文章于 2022-10-15 10:34:44 发布
阅读量262 收藏 3
点赞数 6
分类专栏： HTML-CSS-JS 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58040147/article/details/120892600
版权

文章目录（PS：觉得不错请点赞收藏支持一下）

一、元素的显示与隐藏

1.1 display：显示

  • 说明

    • 用来转换元素及如何显示与隐藏元素
    • 隐藏元素之后不再保留位置
    /* 隐藏对象 */
display: none; 

/* 显示对象，并把元素转换为块级元素，还可以转换为行内元素，行内块元素 */
display: block;

  • 应用

    • <style>
    div {
        width: 160px;
        height: 90px;
        background-color: orange;
        margin: 10px 0;
    }

    .c1 {
        display: none;
    }
</style>

<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
</body>

    • 效果如下

      5r19n1.png

1.2 visibility：可见性

  • 说明

    • 用来指定一个元素是否是可见的
    • 隐藏之后，保留位置
    /* 默认值，元素可见 */
visibility: visible;

/* 元素不可见 */
visibility: hidden;

  • 应用

    • <style>
    div {
    width: 160px;
    height: 90px;
    background-color: orange;
    margin: 10px 0;
    }

    .c2 {
    /* 元素不可见 */
    visibility: hidden;
    }
</style>

<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
</body>

    • 效果如下

      5r1hE6.png

1.3 opacity：不透明

  • 说明

    • 用来设置元素的不透明级别
    • 属性值是从 0.0（完全透明）到 1.0（完全不透明）
    • 完全透明之后，保留位置

  • 应用

    • <style>
    div {
        width: 160px;
        height: 90px;
        background-color: orange;
        margin: 10px 0;
    }

    .c2 {
        /* 设置为完全透明 */
        opacity: 0;
    }
</style>

<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
</body>

    • 效果如下

      5r8Eyd.png

1.4 overflow：溢出

  • 说明

    • 用来设置当内容溢出元素框时的一些属性样式

      属性值描述
      visible默认值，内容不会被修剪，会呈现在元素框之外
      hidden超出的内容会被修剪，隐藏掉
      scroll不管内容有没有超出，总是显示滚动条
      auto内容超出显示滚动条，不超出不显示

  • 应用

    • 效果如下
      5r8QfS.png

二、CSS 用户界面样式

2.1 cursor：鼠标样式

  • 说明

    • 用于设置光标显示的形状

      属性值描述
      default默认光标（通常是一个箭头）
      pointer光标呈现为指示链接的指针（小手）
      move光标呈现为可被移动的样式（移动）
      text光标呈现为指示文本的样式（文本）
      not-allowed光标呈现为禁止的样式（禁止）url
      url自定义光标

  • 举例

    •   <style>
      div {
      width: 160px;
      height: 90px;
      background-color: orange;
      margin: 10px 0;
      /* 设置为小手的样式 */
      cursor: pointer;
      }
  </style>
  
  <body>
      <div class="c1">1</div>
  </body>

    • 效果如下

      5rNOSK.png

2.2 outline：轮廓线

  • 说明

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

      属性值描述
      outline-color规定边框的颜色
      outline-style规定边框的样式
      outline-width规定边框的宽度

  • 格式

    • /* 写法顺序 */
outline: outline-color outline-style outline-width;

    • /* 举例 */

<style>
    input {
        outline: blue dotted 2px;
    }
</style>

<body>
    <input type="text">
</body>

    • 效果如下

      5raPHJ.png

2.3 resize：防止拖拽文本域

  • 说明

    • 用于设置用户可否调整文本域的尺寸

      属性值描述
      none用户无法调整元素的尺寸
      both默认值，用户可调整元素的高度和宽度
      horizontal用户可调整元素的宽度
      vertical用户可调整元素的高度

  • 应用

    • <style>
    textarea {
    /* 设置只可以调高度 */
    resize: vertical;
    }
</style>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

      5rdVaj.png

三、vertical-align：垂直对齐

  • 说明

    • vertical-align 用于设置元素的垂直对齐方式，它只针对于行内元素和行内块元素

      属性值描述
      baseline默认值，元素放置在父元素的基线上
      middle将元素与父元素的中部对齐
      top将元素的顶端与行中最高元素的顶端对齐
      bottom将元素的顶端与行中最低元素的顶端对齐

    5r0Z3q.png

  • 补充知识

    • margin: 0 auto; 是设置有宽度的块级元素水平居中对齐
    • text-align: center; 是设置元素中的文字居中对齐

3.1 如何去除图片底侧空白缝隙

5rrUK0.png

  • 分析原因

    • img 图片是行内块元素，它的底线会和父级盒子的基线对齐，所以导致图片底侧会有一个空白缝隙

  • 解决方法

    • 给 img 添加 vertical-align 属性，属性值设置为middle，top，bottom，让图片不要和基线对齐
    • 给 img 添加 display: block，转换为块级元素也可以解决

    5rsmi4.png

四、溢出的文字用省略号显示

4.1 white-space：换行处理

  • 说明

    • 主要用于设置段落中的文本不进行换行，因为默认情况下，文字会自动换行展示

      属性值描述
      normal默认值，空白会被浏览器忽略
      nowrap设置文本不会换行，直到遇到 <br> 标签为止

4.2 text-overflow： 文字溢出

  • 说明

    • 用于设置当文本溢出时的样式

      属性值描述
      clip修剪文本
      ellipsis被修剪的文本用省略号来代表显示
      string被修剪的文本使用自定义的字符串来代表显示

4.3 实现溢出的文字用省略号显示

  • <style>
    .desc {
        border: 1px solid black;
        width: 300px;
        /* 设置为不自动换行 */
        white-space: nowrap;
        /* 溢出部分隐藏 */
        overflow: hidden;
        /* 溢出部分设置为省略号 */
        text-overflow: ellipsis;
    }
</style>

<div class="desc">
        鸿蒙OS是华为公司开发的一款基于微内核、 [23]  耗时10年、4000多名研发人员投入开发、 [28]  面向5G物联网 [23]  、面向全场景的分布式操作系统。鸿蒙的英文名是HarmonyOS，意为和谐 
</div>

    5rR8eI.png

五、CSS精灵技术（sprite）

5.1 为什么需要精灵技术

  • 分析原因

5rfWL9.png

  • 上图为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
  • 当网页中的图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度。
  • 所以，为了有效的减少服务器的压力，提高页面的加载速度，我们需要用到精灵技术（也称CSS Sprite、CSS 雪碧）。

5.2 讲解精灵技术

​5r5YRK.png

  • 说明

    • 如上图所示就是一个精灵图
    • 其实就是将网页中的一些背景图整合到一张大图中（精灵图），然后，各个网页元素只需要精确定位到精灵图中的某个小图。
    • 这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。

  • 注意

    • CSS 精灵技术主要针对于背景图片，插入的图片 img 是不需要这个技术的。

  • 应用

    <style>
    .c1 {
    width: 80px;
    height: 80px;
    border: 1px solid black;
    /* 插入背景图片 */
    background-image: url(./imgs/精灵图.png);
    /* 背景图片定位 */
    background-position: 0 -178px;
    }
</style>

<body>
    <div class="c1"></div>
</body>
    • 效果如下
      ​ 5rIJTs.png

六、CSS 的美

6.1 margin 负值之美

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

  • 说明

    • 绝对定位/固定定位的盒子不能通过设置 margin: auto 实现居中。

  • 分析

    • 第一步，设置 left: 50%; top:50%; 让盒子的左侧移动到父级元素的水平垂直中心位置
    • 第二步，设置 margin-left: 负值; margin-top: 负值; 让盒子向左向上移动自身宽度的一半

  • 应用

    <style>
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -150px;
        width: 500px;
        height: 300px;
        background-color: red;
    }
</style>

<body>
    <div class="box"></div>
</body>
    • 效果如下

    5sFx7d.png

6.1.2 压住盒子相邻边框
  • 相邻盒子，边框相加变粗

5sfS6e.png

  • 分析

    • 如果盒子都在一行，让每个盒子外边距向左 1 像素，即 margin-left: 1px;
    • 如果盒子存在多行，让每个盒子外边距向左向上 1 像素，即 margin-left: -1px; margin-top: -1px;

  • 应用

    • <style>
    div {
        float: left;
        width: 300px;
        height: 300px;
        margin-left: -1px;
        margin-top: -1px;
        border: 1px solid #ccc;  
    }
</style>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

    • 效果如下

      5sO84e.png

6.2 CSS 三角形之美

  • 说明

    • 用 CSS 边框模拟出一个上三角形效果
    • 宽度和高度设置为0
    • 我们 4 个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
    • 为了照顾兼容性，加上 font-size: 0; line-height: 0;

  • 应用

  •  <style>
     .c1 {
         width: 0px;
         height: 0px;
         background-color: black;
         border-top: 10px solid green;
         border-right: 10px solid blue;
         border-bottom: 10px solid gray;
         border-left: 10px solid transparent;
     }
 </style>
 
 <body>
     <div class="c1"></div>
 </body>

  • 效果如下

    5szz3F.png

七、静态页面编写流程

7.1 介绍

​ 所谓静态页面（又称静态网页）是指通过 HTML 和 CSS 等纯静态建站语言编写的网页，相对而言，浏览器访问的其他人的制作的网站叫做动态网站，静态网页与动态网站的区别在于静态页面没有后台，不能实现用户交互功能，如：注册、登录、搜索等等。

​ 制作静态网页的作用是为了制作动态网站打下基础，制作网站前首先制作静态网页，然后再将静态网页转化成动态网站。

7.2 流程

  1. 创建项目，创建相应的目录，存储不同的文件

    ​ 1）meishimeike(文件夹)：管理当前网站中所有的文件

    ​ 2）index.html/default.html(文件)：当前网站的入口文件

    ​ 3）css(文件夹)：管理当前网站中所有的 css 文件

    ​ 4）js(文件夹)：管理当前网站中所有的 js 文件

    ​ 5）images(文件夹)：管理当前网站中所有的小图片，如：logo 等等

    ​ 6）upload(文件夹)：管理当前网站中所有的大图片，如：产品图片 等等

  2. 准备 静态网页效果图（用于转换为 html 页面的设计图）

    ​ 1）ps(附言)：一般设计部门都已经设计好了，拿来用即可。

  3. 确定一种开发方式

    ​ 1）从上到下的方式（比较适合新手）

    ​ 2）先确定结构再在结构中填充内容（比较适合老司机）

  4. css 初始化（清除浏览器标签的一些默认样式）

    ​ 1）去掉标签的默认margin外边距和padding内边距属性

    ​ 2）去除超链接的下划线，并设置统一的颜色

    ​ 3）统一的去除ul、ol列表标签前面的符号

    ​ 4）统一的将 h1~h6 标题标签的加粗去除，字号统一等等

    ​ 5）设置版心，一般设置宽度 1000px、1200px

  5. 开始网页代码的书写

    ​ 1）网页布局应遵从 “先大后小，先外后里” 的原则

    ​ 2）搭建完之后优化网页代码，删除冗余(重复/啰嗦)的文件

八、CSS 最小宽度 min-width 最小高度 min-height

8.1 为什么要设置最小宽度和最小高度？

答：虽然现在全屏 100% 宽度构造越来越多，但手机浏览器或电脑阅读器比较小，为了防止浏览器窗口改变大小之后页面内容也发生改变，我们给页面设置最小宽度和最小高度。

8.2 应用

咱们只要对最外层 div盒子 或对 body 标签 设置最小宽度和最小高度即可

  1. 最外层 div 盒子设置

    div {
    min-width: 980px;
    min-height: 600px;
}

  2. body设置

    body {
    min-width: 980px;
    min-height: 600px;
}

    那么当浏览器窗口改变大小时，此网页宽度最小是 980px，最小高度是 600px。

九、 iconfont-阿里巴巴矢量图标库

如何用伪元素选择器 content 属性使用 iconfont 图标？？？

9.1 Unicode 写法

  • <style>
    @font-face {
        font-family: 'iconfont';
        /* Project id 2870438 */
        src: url('//at.alicdn.com/t/font_2870438_p3mz2ll6g5.woff2?t=1634728469548') format('woff2'),
        url('//at.alicdn.com/t/font_2870438_p3mz2ll6g5.woff?t=1634728469548') format('woff'),
        url('//at.alicdn.com/t/font_2870438_p3mz2ll6g5.ttf?t=1634728469548') format('truetype');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
	
	/* 
        使用 Unicode 码
        1) 图标代码其中 &# 开头用以表明这是字符实体，x 表示这是十六进制
        2) css 的 content 属性接受的也是 16进制的 Unicode 编码
        3) 所以直接写 content: "\e600";
	*/
    div::before {
    	content: "\e600;";
    }
</style>

<body>
    <div class="iconfont">热搜</div>
</body>

  • 效果如下

    5yrzJe.png

9.2 Font class 写法

  • <link rel="stylesheet" href="//at.alicdn.com/t/font_2870438_p3mz2ll6g5.css">
<style>
    div::before {
        content: "\e600";
    }
</style>

<body>
    <div class="iconfont">热搜</div>
</body>

  • 效果如下

    5yrzJe.png
    在这里插入图片描述

张浔
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
html 文本区域 带行数,使用htmlunit的多行文本区域
weixin_39940913的博客
06-18 280
要求：我在网页上有一个多行textarea，有一些默认值，我需要更改这些值并提交表单。文本区域定义如下。class="editor"onkeyup="getSuggestions(this.id)"onclick="setCursorPos(this.id)"onchange="setCursorPos(this.id)"rows="20" cols="80">! Lorem ipsum" ...
CSS字体图标、平面转换、渐变的使用
qq_45274635的博客
03-05 290
目标：使用字体图标技巧实现网页中简洁的图标效果（一）字体图标展示的是图标，本质是字体（二）处理简单的、颜色单一的小图标字体图标的优点：​ 灵活性：灵活地修改样式，例如：尺寸、颜色等​ 轻量级：体积小、渲染块、降低服务器请求次数​ 兼容性：几乎兼容所有主流浏览器（除老版ie浏览器）​ 使用方便图标库：Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用)
在一句话后面加ps是表示附言的意思
热门推荐
qq_15821487的博客
10-15 1万+
P.S.是postscript（备注，又可解释为附言、后记）的缩写，中文意思就是附笔。最开始是指用在信尾的补充内容，现在用的也有些泛泛了，凡是补充说明都可以用。来源于拉丁语postscriptum，“writtenafterward”，“正文之后”。postscript，还有一个意思专门指故事，小说等末尾的一些补充信息或说明。在一句话后面加ps是表示附言的意思。
HTML和CSS你可能不知道的技巧
blurooo的博客
09-20 1596
1. 禁止鼠标双击选中文本<div onselectstart="return false;" style="-moz-user-select:none;">不被双击选中文字的区域</div> 2. 自定义li样式li:{ list-style: none; } li:before{ content: "◆"; display: block; float: left;
css选择器权重排序_CSS样式选择优先级
weixin_31659095的博客
12-31 658
记录一下之前看到过的CSS样式优先级计算方法。CSS的样式优先级由一个4位数字权重表示，对于同一个文档元素，如果存在多个样式，就比较每个样式4位数的优先级权重，然后选择值较大的那个。那么这4位数权重是怎么计算的呢？一般我们添加样式有以下几种方法：内联样式通过style="..."直接将样式加到HTML元素上。如果样式是通过内联方法加上去的，则其权重的千位数字上为1，即1000。id选择器在HTML...
前端基础的学习html+css.zip
01-05
前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css...
12个CSS高级技巧汇总
09-24
下面这些CSS高级技巧，一般人我可不告诉他哦
前端基础,CSS学习思维导图
最新发布
04-11
前端基础,CSS学习思维导图
HTML678day_htmlCSS_前端基础_
10-01
在本课程中，我们主要探讨的是HTML5、CSS3以及前端基础的相关知识，这是Web开发领域不可或缺的部分。从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别...
css第二天高级技巧.md
07-14
css第二天高级技巧.md
CSS3 字体@fontface入门详解
kouryoushine的博客
10-08 941
背景 做前端会遇到使用图标的问题，虽然使用图标并不复杂，偶尔遇到需要在插件中添加图标，以及自定义图标的场景。这里深入研究下图标的实现原理，方便日后在复杂场景下搞定图标问题。 什么是font字体 最早接触的字体是word里面使用到各种字体，这些字体属于 操作系统所有。C:\Windows\Fonts目录下看到很多ttf字体的文件。如果有宋体的ttf在word中才能使用，如果没有则不能使用。不同语言的...
CSS图片廊实例详解
bcbobo21cn的专栏
05-26 2814
效果： div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; bor
CSS中属性排序
Beijiyang
02-03 1120
Form: http://markdotto.com/2011/11/29/css-property-order/ CSS property order November 29, 2011 Tweet CSS property order matters, especially on larger teams with several engineers and d
CSS 高度(css height)
bytxl的专栏
11-17 2575
一、height高度语法   -   TOP 1、高度基本语法 Height:auto 设置高度自动 （通常默认高度是auto自动，自适用内容而增高，通常如果想高度自适应不用设置） Height:20px 设置高度为固定数值 2、CSS高度用法结构 #divcss5{height:50px} 设置了divcss5对象盒子高度为50px（像素） 3、height高
CSS实现竖排导航栏/图像选择【HTML/JS】
jiayuanCo的博客
07-15 7489
ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#bebebe; width:120px; text-align:center; padding:4px; text-decorat
css icon设置,CSS之字体图标 icon 的多种实现
weixin_39627408的博客
08-03 4781
什么是icon？让我们先来看一个例子：我们以简书为例子，图中看到的用圆圈起来的部分都是icon这个时候你就想问了，这不就是几张图片么？不，它不是图片，而是文字什么？？这怎么可能是文字，文字怎么会是这样的？...icon到底是什么正如你所看到的，现在市面上大多数网页使用的图标都是类似这样的形式，也有不少icon图标库可供我们使用它的实现方式有：imageCSS SpritesIcon FontSVG...
CSS - 通过 WebFont 技术引入在线字体（@font-face 语句）
kikajack的博客
02-07 1万+
@font-face MDN 资料 @font-face 用法的参考博客 WebFont 技术的参考博客 开源项目 webfontloader 开源项目 字蛛（中文字体压缩器） 中文字体网页开发指南 - 阮一峰 @font-face 兼容性，如何用 @import 或 link 标签引入字体，各种字体格式详解 科大博客提供 Google Fonts 加速 360网站卫士常用前端公共...
前端基础知识(css+js+vue)概览
10-13
"前端开发是构建网页或应用程序的...这些基础知识是构建复杂前端应用的基础，并且随着技术的发展，如Flexbox和Grid布局、CSS预处理器、现代JavaScript语法（ES6+）以及Vue的高级特性等，都将在进阶学习中发挥关键作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张浔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值