- 博客(42)
- 收藏
- 关注
RSS订阅原创 CSS高级技巧
1、使用原因为了有效减少服务器接受和发送请求的次数，提高页面的加载速度2、核心原理将网页中的一些小背景图像合到一张大图中，这样服务器只需要请求一次就可以了3、使用方法（1）精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。（这个大图片也称为 sprites 精灵图 / 雪碧图）（2）移动背景图片位置，此时可以使用（3）移动的距离就是这个目标图片的x和y坐标。（注意网页中的坐标有所不同：x轴右边为正，y轴下边为正（4）因为一般情况下都是往上往左移动，所以数值是负值。
2025-04-11 20:22:49
2330
原创 元素的隐藏和显示
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。如果隐藏元素不想要原来位置，就用 display:none（用处更多 重点）类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。如果隐藏元素想要原来位置，就用visibility:hidden。visibility 属性用于指定一个元素应可见还是隐藏。visibility隐藏元素后，display隐藏元素后，
2025-04-11 17:14:36
147
原创 网页布局思路
3、一行中的列模块经常用浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）遵循先有结构，后有样式的原则。定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。2、分析页面中的行模块，以及每个行模块中的列模块。通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页。可以让多个块级元素一行显示或者左右对齐盒子，标准流、浮动、定位一起完成布局的。可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。，每个都有自己的专门用法。
2025-04-11 16:58:34
148
原创 CSS定位
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）（3）父盒子布局时，需要占有位置（否则别的元素可以来占有父亲原有的位置），因此父亲只能是相对定位。（1）让固定定位的盒子 left: 50%;（1）子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其它的兄弟盒子。定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子。（1）它是相对于自己原来的位置来移动的（移动位置时，参照点是自己原来的位置）
2025-04-11 16:30:14
621
原创 CSS属性书写顺序
display / position / float / clear / visibility / overflow（建议 display第一个写，因为关系到模式）
2025-04-11 15:57:50
182
原创 CSS常见图片格式
PSD 格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对我们前端人员来说，最大的优点我们。是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的优点，具有存储形式丰富的特点，能够保持透明背景，GIF 格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，可以直接从上面复制文字、获得图片、还可以测量大小和距离。如果想要切成背景透明的图片，选择png格式。经常用 jpg 格式的。
2025-04-11 15:49:39
107
原创 盒子模型
网页元素很多都带有默认的内外边距，且不同浏览器默认的也不一致。现象：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷。4个值，代表上内边距是5px，右内边距是10px，下内边距是15px，左内边距是20px。如果盒子有了宽度和高度，此时再指定内边距，会撑大盒子。3个值，代表上内边距是5px，左右内边距是10px，下内边距是15px。（父元素外边距大，该值就是父元素的外边距；2个值，代表上下内边距是5px，左右内边距是10px。（2）可以为父元素定义上内边距。
2025-04-06 21:44:32
397
原创 CSS文本属性（接之前的颜色属性之外的属性）
单位：em是一个相对单位，相当于当前元素（font-size）几个文字的大小（例如：2em就是当前两个文字的大小，可以缩进两个文字），如果当前元素没有设置大小，则会按照父元素的1个文字大小。属性值：none（没有）、underline（下划线）、line-through（删除线）、overline（上划线）例：设置行高 line-height为26px， 字体大小 font-size为16px，此时上下间距分别为5px。共同构成，但文字本身大小已经不会再改变，故改变行间距其实是改变了上间距和下间距的距离。
2025-04-04 20:12:51
191
原创 在VMware上CentOS下载与安装
选择linux操作系统，版本根据自己下载的iso文件来选择（我选的是CentOS7 64位）设置好密码点“完成”即可（如果提示密码太过简单，可以再按一次“完成”按钮，就可成功设置密码）后面的点击“跳过” -> “完成 ” -> 出现一个页面，点右上角的“×”关闭即可。2、可以给重新命名，写一些描述，我这里就直接“拍摄快照”了。4、选择下面的下载地址（下载速度有点慢，需耐心等待）选择“我要配置分区” -> “完成”用超级管理员登录（点击“未列出”）选择“快照1” -> “转到”关闭“位置服务”（用不上）
2023-09-11 16:56:24
2485
原创 Fiddler如何定位bug是前后端的问题
看下面的接口有没有写要提示的字，如果写了，那就是前端的问题；如果没写，就是后端的问题。看Raw里面相应的文本信息，如果有信息，那就是前端的问题；如果没有，就是后端的问题。2、出现的问题：如果点击某个按钮会有提示，但是没显示这个提示。
2023-08-29 17:10:22
1653
原创 安装Fiddler
第一项随便选一个，填写邮箱，勾选同意，点击红色的下载按钮。安装完成，点击“Close”进入Fiddler页面。点击“I Agree”选择自己要下载的路径。
2023-08-28 13:34:55
110
原创 常用文本属性
1、由于字体设计原因，文字最终呈现的大小并不一定与font-size的值一致，可能大，也可能小。注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文。（1）line-height 过小--文字产生重叠，且最小值是0，不能为负数,（2）line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。（3）line-height 和 height 的关系?
2023-08-19 18:08:18
14
原创 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead解决办法
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead解决办法
2023-08-14 23:07:17
422
原创 css文本属性：颜色表示
HEX的原理与rgb一样，依然是通过红绿蓝进行组合，但是是用6位数字分为3组来表示，格式为#rrggbb。每一位数字的取值范围是：0~f ，即（0,1,2,3,4,5,6,7,8,9，a，b，c，d，e，f）（3）饱和度：取值范围是0%~100%（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）（4）亮度：取值范围是0%~100%（0%无亮度，为黑色；来表示一个颜色的，格式为：hsl（色相，饱和度，亮度）（1）三种颜色数值相同时，为灰色，值越大，灰色越浅。（3）rgb全为0是黑色，全为255为白色。
2023-08-13 16:17:05
103
原创 css三大特性
important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）元素的同一个样式名，被设置了不同的值，就是样式冲突。3、常见的可继承属性。
2023-08-12 18:28:09
75
1
原创 选择器的优先级
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值是，就发生了样式的冲突，所以要应用哪个样式，需看优先级。important的权重，大于行内样式，大于所有选择器，权重最高。行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。每个选择器，都可计算出一组权重，格式为：(a,b,c)（1）行内样式权重大于所有选择器。
2023-08-12 17:40:08
94
1
原创 伪类选择器
lang() 根据指定的语言选择元素（本质是看lang属性的值）（6）-n+3：选中的是前3个（公式中n从0开始计算）（5）2n+1或odd：选中序号为奇数的子元素。（3）1~正无穷的整数：选中对应序号的子元素。（4）2n或even：选中序号为偶数的子元素。（1）0或不写：什么都选不中——几乎不用。（2）效果（点击去看4,4的颜色改变）（2）n：选中所有子元素——几乎不用。（2）:visited 超链接。（4）:active 元素。（1）:link 超链接。（3）:hover 鼠标。
2023-08-12 10:53:43
233
1
原创 后代、子代、兄弟选择器
选中指定元素中符合要求的子元素（儿子元素）（先写服，再写子）符合条件的相邻兄弟元素（此处的“相邻”指：紧挨着的下一个）选择器1 选择器2 ... 选择器n {（1）后代选择器，选中的是后代，不是祖先。（1）子代选择器，选中的是子代，不是父级。（3）结构一定要符合html的嵌套要求。选择器1>选择器2>...选择器n {选中指定元素中符合要求的后代元素。（2）儿子、孙子...都属于后代。2、语法（先写祖先，再写后代）选择器1+选择器2 {选择器1~选择器2 {（1）相邻兄弟选择器。（2）通用兄弟选择器。
2023-08-07 20:23:04
236
1
原创 复合选择器
（2）用的最多的交集选择器是：元素选择器配合类名选择器，eg：p.zhang。（3）并集选择器，通常用户集体声明，可以缩小样式表体积。（2）任何形式的选择器，都可以作为并集选择器的一部分。选中多个选择器对应的元素，又称：分组选择器。选择器1,选择器2,...选择器n {选择器1选择器2...选择器n {（1）有标签名，标签名必须写在前面。（1）并集选择器，一般竖着写。选中同时符合多个条件的元素。
2023-08-07 10:37:12
103
1
原创 HTML元素间的关系
1、定义直接包裹某个元素的元素，就是该元素的父元素2、举例（1）代码（2）解释上述代码中，tfoot是tr的父元素，但不是td的父元素；tr是td的父元素。
2023-08-06 20:17:21
269
原创 CSS_基本选择器
（1）一个元素只能拥有一个id属性，多个元素的id属性值不能相同。（2）一个元素的class属性，可以写多个值，中间用空格隔开。（2）一个元素可以同时拥有id和class属性。，例如上面的代码中，所有的p元素效果都一样。根据元素的id属性值，来精准的选中某个元素。根据元素的class值，来选中某些元素。（1）一个元素不能写多个class属性。可以选中所有的HTML元素。
2023-08-06 19:37:19
65
原创 表单基础知识
input type="radio" name="gender" value="male" checked>男。<input type="checkbox" name="hobby" value="football">踢球。<input type="checkbox" name="hobby" value="painting">画画。<input type="radio" name="gender" value="female">女。<input type="button" value="普通按钮">
2023-08-05 17:37:06
475
1
原创 css简介
写在html页面内部，将所有的css代码提取出来，单独放在标签中，可以放在html文档的任何地方，但最好放在标签中。注：项目上线时，通过工具将展开风格的代码变成紧凑风格的代码，可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。样式可以重复使用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了“结构域样式的完全分离”（2）同一个样式表中，优先级也和编写顺序有关，后面样式的会覆盖前面的。实际开发中，几乎都使用外部样式，这是最推荐的使用方式。
2023-08-05 17:34:15
71
1
原创 框架标签介绍
frameborder :是否显示边框，可取值有0和1。（2）与超链接或表单的target配合，展示不同的内容。name ：框架名字，可以与target属性配合。框架（在网页嵌入其他文件）height ：框架的高。width ：框架的宽。（1）在网页中嵌入广告。
2023-08-01 21:44:05
213
1
原创 html中的快捷键
1、查看页面有几个所要搜索的标签。三、vscode整体内容大小改变。右键->检查->ctrl+f。alt+shift+下键。alt+shift+上键。
2023-07-27 20:28:07
1311
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人