![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 92
大脸胖柴
这个作者很懒,什么都没留下…
展开
-
单独修改组件库样式/样式穿透/深度选择器
Ant Design of Vue、Element UI、Vant等各种组件库固然好用,但官方给定的样式却不符合自家ui的设计风格,我们想要修改却又无从下手,改了却又产生连锁反应,所有页面都会受影响。在实际项目开发中或在面试中常会遇到如何单独修改当前页面单个组件样式,并且不影响当前页面其他组件样式。解决方案:一、修改组件库样式方法首先来介绍此事件的主角 --- 深度选择器。原创 2022-11-09 16:32:27 · 4204 阅读 · 0 评论 -
弹性盒子的布局运用
弹性盒子——传统布局——基于盒子模型,依赖 display 属性、position属性、float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。并且,传统布局代码冗长,出错率高,要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。Flex布局可以避免这种情况:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。......原创 2022-03-23 19:38:50 · 2043 阅读 · 0 评论 -
使用columns简单实现瀑布流、分栏、自适应布局和响应式布局、媒体查询、单位(px em rem)的区别、VW与VH介绍、vw/vh和百分比%的区别、怪异盒子模型——移动端入门知识点
一、分栏1、列宽度语法:column-widthcolumn-width: 200px;/* 栏宽 列宽 */2、列数语法:column-countcolumn-count: 4;/*栏数 列数 */3、列间距语法:column-gap column-gap: 20px; /* 列间距 */4、列样式(边框)语法:column-rulecolumn-rule: 1px dotted pink;原创 2022-03-21 23:14:59 · 1898 阅读 · 0 评论 -
自定义字体样式引入使用方法、文本阴影、边框阴影、(边框)圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别
自定义字体样式方法文件层级关系:引入与使用方法举例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>字体练习</title> <style type="text/css"> /* 字体存放文件命名应为fonts */ /* 引入字体标签 */ @font-face { font-family: ".原创 2022-03-16 21:48:16 · 635 阅读 · 0 评论 -
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display:none;的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结
一、css3新增选择器1、兄弟选择器相邻兄弟选择器E + F { }紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器,该代码意思是选择紧邻div后的那一个span元素,且只有第一个span会被选中。 */ div+span{ color: pink; }通用兄弟选择器E ~ F{ }选择器E后的所有的兄弟选择器F/* 通用兄弟选择器,选择所有div元素后面的span元素 */ /* 一对.原创 2022-03-15 23:48:08 · 2315 阅读 · 0 评论 -
盒子模型——网页布局、定位、光标样式、背景不透明度、格式化列表(ul、ol)样式
前言:网页布局常用到定位,并且与浮动等内容结合使用定位简单概述:定位=定位模式+边偏移将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素最终位置浮动和定位的区别:1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子边偏移:边偏移就是定位的盒子移动到最终位置t.原创 2022-03-11 00:22:25 · 1398 阅读 · 0 评论 -
盒子模型——网页布局、浮动、如何开启BFC
前述:传统网页布局的三种方式:网页布局的本质----用css来摆放盒子,把盒子摆到相应位置css提供了三种传统布局方式(简单易懂就是盒子如何进行排列顺序):标准流(普通流/文档流) 浮动 定位一、标准流(普通流/文档流)所谓的标准流:就是标签按照规定好默认方式排列二、浮动 float : left 左浮动float :right 右浮动 float : none 默认 不浮动1.浮动元素会脱离标准流(脱标)脱离标准流的控制(浮)移动到......原创 2022-03-10 23:46:11 · 970 阅读 · 1 评论 -
CSS背景图片与CSS精灵
一、背景颜色1、background-color 属性指定元素的背景色。body { background-color: blue;} /*为页面指定一个蓝色背景*/二、background-image 背景图片1.给页面添加图片背景值:url("图片路径")background-image: url(图片路径.jpg);也可以同时添加多张图片:background-image: url(图片1.jpg),url(图片2.jpg),...;2.b原创 2022-03-07 23:55:46 · 650 阅读 · 0 评论 -
盒子模型( 溢出显示处理)、盒子边框(边框样式)、伪类、文本样式——CSS知识点
一、文本相关样式1. 文本水平对齐方式text-align 文本水平对齐方式 left (默认) 左对齐(默认) right 右对齐 center 居中对齐 justify 两端对齐 2.首行缩进text-indent首行缩进 值:数值+单位 常用em作为单位 3.文本修饰text-decoration 文本修饰 none 无修饰 underline 下划线 line-t......原创 2022-03-03 21:42:51 · 325 阅读 · 1 评论