2021年02月_Lhy@@

10月 09月 07月 06月 05月 04月 03月 02月 01月

原创 CSS3新特性calc()函数、过渡transition

一、calc(）此Css函数让你在声明css属性值时执行一些计算。例：width:calc(100% - 80px);运算包括：" + "，"- "，" * "，"/ "，其中运算符前后需要用空格隔开；二、过渡transition（重要）语法：transition：要过渡的属性，花费的时间，运动曲线，何时开始；属性：想要改变的属性，比如宽度高度，内外边距都可以。如果想要所有属性变化过渡，写一个all, 花费时间：单位是秒,（必须写单位），比如 5s; 运动曲线：默...

2021-02-27 15:53:17 427

原创常见布局小技巧----文字围绕浮动元素、分页按钮、三角形绘制

惊喜知识点：清除浮动元素。（详情参考：https://blog.csdn.net/Lhy_JL/article/details/113877618）文字围绕浮动元素案例运用行内块元素特性绘制分页图标三角形强化版的绘制案列代码下载：案列效果图：...

2021-02-25 12:04:03 97

原创 CSS字体图标添加、三角形的做法

精灵图放大缩小会失真，字体图标不会。字体图标：展示的是图标，本质是字体。轻量级：一个图标字体要比一系列图像要小，一旦字体加载了图标就会渲染出来，减少服务器请求；灵活性：本质其实是文字，可以随意调整大小，颜色，阴影等；兼容性：几乎所有浏览器都支持。总结：如果遇到一些结构和样式比较简单的小图标，可用字体图标。如果遇到一些结构和样式比较复杂的小图标，就用精灵图。一、字体图标的下载：1.阿里妈妈字体库：https://www.iconfont.cn/（免费）2.https://i

2021-02-24 17:05:31 488

原创 CSS精灵图（CSS sprite）介绍以及使用

1、为什么需要精灵图？一个网页中往往会应用很多小的背景图像，当王爷中图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites/CSS雪碧）。核心原理：将一些小图片整合到一张大的图片中，请求一次就好了。2、精灵图的使用前提：精灵技术主要针对背景图使用，精灵图在线测量工具：http://www.spritecow.com/

2021-02-24 15:54:53 711

原创 CSS元素的显示与隐藏方法（display、visibility、overflow）

主要方法有：display显示隐藏 visibility显示隐藏 overflow (溢出显示隐藏)一、display:none ;隐藏元素不占原有位置display:block ; 也有显示元素的意思。二、visibility：visible；可见visibility：hidden；隐藏，且占有原有位置三、对溢出的部分进行隐藏，overflowoverflow：scroll；隐藏溢出内容，始终显示滚动条，overflow ...

2021-02-24 15:05:54 428

原创浮动元素与标准流的文字层叠，绝对定位和固定定位与标准流的文字层叠

浮动、绝对定位和固定定位的区别：绝对、固定定位，浮动都是脱标的。设置了绝对、固定定位属性的元素类似有 float 元素属性（行内块元素）；例如 p 元素设置position：absolute，可直接设置p的width，height 浮动元素会压住下面的标准流盒子，但是不会压住下面标准流的文字（图片）。绝对、固定定位会完全压住下面的标准流盒子。浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果，文字会围绕浮动（float）元素！1、首先两个标准的盒子，排列顺序是...

2021-02-24 10:48:40 599

原创 z-index:0与z-index:auto的区别

区别：z-index: 0 会创建一个新的层叠上下文 z-index: auto 不会去创建 z-index: 0 会在 z-index: auto 遵守后来者居上层叠<head> <style> .parent{ position: relative; width: 300px; height: 300px; border: 1px solid #4c4c4c; } .box1,.box2,.b

2021-02-22 11:54:50 417

原创 CSS定位的叠放次序z-index，简单介绍

在使用定位布局的时候，可能出现盒子重叠现象，此时可以使用 z-index 来控制盒子的前后次序。语法：选择器 {z-index：1}数值可以为负数，数值越大，越靠上，越靠近用户。如果值相同，则按照书写顺序，后来者居上。只有定位的盒子才有 z-index 属性。<head> <style> .parent{ position: relative; width: 300px; height: 300px; .

2021-02-22 11:45:24 350

原创 css中设置了border-radius却不起效果问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位</title> <style> .test1 { di.

2021-02-21 23:38:56 13218 5

原创 CSS之定位模式介绍（重要）、子绝父相、

一、为什么需要定位？1、标准流或者浮动能实现，某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子？2、当我们滚动窗口的时候，某些盒子是固定在某个位置的。以上效果，标准流和浮动很难快速实现，此时需要定位来实现。所以：1、浮动（float）可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。2、定位（position）则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。二、定位组成定位：将盒子定在某一位置，所以定位也是在摆盒子，.

2021-02-21 17:55:46 656

原创 CSS之浮动与标准流、清除浮动的方法

1. 传统网页布局的三种方式网页布局的本质----用CSS来摆放盒子，把盒子摆放到相应位置。CSS（PC端）提供了三种传统的布局方式（即盒子如何进行排列）：普通流（标准流）浮动定位1.1 标准流所谓的标准流：就是便签规定好默认的方式排列块级元素会独占一行，从上向下排列。行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。1.2 浮动情景一：标准流，如何让多个块级盒子（div）水平排列一行？盒子设置 display: inline-block;；缺点：盒子之间默

2021-02-20 14:42:50 202

原创 CSS之盒子模型，padding改变实际盒子大小，margintop塌陷问题

此处插播哔哩哔哩Pink老师的RAPborder是边框，content内容哒；padding内边距，边框与内容的距离主要就靠它；margin外边距，盒子与盒子的距离它说了算。

2021-02-19 11:17:17 1193

原创 CSS常见的复合属性

fontfont:font-style font-weight font-size/line-height font-familymarginpaddingbackground推荐顺序： color url no-reapt fixed position.

2021-02-18 22:20:47 807

原创 Emment语法快速生成HTML标签

生成标签：直接输入标签名+按tab键/* div，然后tab键*/<div></div>生成多个相同的标签/*输入：div*5 (*之间不要空格)，然后tab键*/ <div></div> <div></div> <div></div> <div></div> <div></div>生成父子级关系的标签/*输入：div.

2021-02-18 17:31:09 284

原创 DOCTYPE、lang与charset

<!DOCTYPE html> 文档类型声明，作用是告诉浏览器使用的那种HTML版本来显示网页注意：<！DOCTYPE>位于文档的最前面，在 html标签前面。它不是html标签，它是文档类型声明标签。<html lang='en'> lang属性用来定义文档的语言种类。<meta charset='UTF-8'>字符集（character set）是多个字符的集合，一遍计算机能够识别和存储各种文字。...

2021-02-18 16:46:56 112