![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 61
CSS相关知识点
橘子味的香蕉
这个作者很懒,什么都没留下…
展开
-
CSS基础知识(二十一):重排和重绘
重排一定会重绘,但重绘不一定会重排重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。当元素的尺寸、结构或者触发某些属性时重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等当元素样式的改变不影响布局时引发重排:添加、删除可见的dom,元素的位置改变,元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)原创 2021-11-12 17:40:36 · 1055 阅读 · 0 评论 -
CSS基础知识(二十):display:none和visibility:hidden的区别
display:none和visibility:hidden的区别(1)display: none隐藏后的元素不占据任何空间,无法使用屏幕阅读器等辅助设备访问,而visibility: hidden隐藏后的元素空间依旧保留(2) visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。display: none非继承性,重新设置子元素也不会显示(3)visibility原创 2021-11-12 17:32:26 · 981 阅读 · 0 评论 -
CSS基础知识(十九):link和@import引入外部样式的区别
文章目录一、继承一、继承继承:子代继承父级元素的css属性无继承性的属性:display、width、height、margin、border、padding、background、float、position可以继承的属性:visibility、cursor、font-size、font-family、color...原创 2021-11-12 17:29:20 · 218 阅读 · 0 评论 -
CSS基础知识(十八):BFC和IFC
文章目录一、BFC1、概念2、作用3、触发条件一、BFC1、概念BFC:块级格式化上下文,是页面中的一块渲染区域,有一套自己的渲染规则,决定子元素如何定位,以及和其他元素的关系和相互作用2、作用作用:可以将BFC理解成一个箱子,不会影响箱子外部,解决传统布局带来的问题传统布局问题:相邻块元素的垂直外边距合并:两个盒子设置BFC嵌套块元素的垂直外边距塌陷:父级盒子设置BFC,父元素position浮动流造成父级元素高度坍塌:父级盒子设置BFC浮动元素覆盖:非浮动元素设置BFC3、触发条件原创 2021-11-12 17:26:49 · 477 阅读 · 0 评论 -
CSS基础知识(十七):Flex——阮一峰
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新...转载 2021-11-12 17:18:25 · 2787 阅读 · 0 评论 -
CSS基础知识(十六):动画
文章目录1、定义动画2、使用(调用)动画1、定义动画用keyframes 定义动画(类似定义类选择器)@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; }}动画序列:0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效原创 2021-11-05 18:10:28 · 445 阅读 · 0 评论 -
CSS基础知识(十五):转换
这里写自定义目录标题一、2D转换1.1 2D 转换之移动 translate1.2 2D 转换之旋转 rotate1.3 2D 转换之缩放scale1.4 2D 转换综合写法二、3D转换2.1 3D移动 translate3d2.2 透视 perspective2.3 3D旋转 rotate3d2.4 3D呈现 transfrom-style一、2D转换1.1 2D 转换之移动 translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位transform: t原创 2021-11-05 18:10:02 · 172 阅读 · 0 评论 -
CSS基础知识(十四):CSS3新特性
文章目录一、CSS3新增选择器1.属性选择器2.结构伪类选择器3.伪元素选择器。一、CSS3新增选择器1.属性选择器属性选择器:根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。选择符简介E[att]选择具有att属性的E元素E[att=“value”]选择具有att属性且属性值等于value的E元素E[att^=value]匹配具有att属性且属性值以value开头的E元素E[att$=“value”]匹配具有att属性且属性原创 2021-11-05 18:09:41 · 743 阅读 · 0 评论 -
CSS高级技巧(五):溢出的文字省略号显示
溢出的文字省略号显示1.单行文本溢出显示省略号–必须满足三个条件 /*1. 先强制一行内显示文本*/ white-space: nowrap; ( 默认 normal 自动换行) /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;2.多行文本溢出显示省略号overflow: hidden; text-overflow: ellipsi原创 2021-11-04 17:46:55 · 1534 阅读 · 0 评论 -
CSS高级技巧(四):解决图片底部默认空白缝隙问题
项目场景:bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。解决方法1. 给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)2. 把图片转换为块级元素 display: block;...原创 2021-11-04 17:44:49 · 224 阅读 · 0 评论 -
CSS基础知识(十三):vertical-align
这里写自定义目录标题一、vertical-align一、vertical-alignCSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。vertical-align : baseline | top | middle | bottom值描述baseline默认,元素放在父元素的基线上top把元素的顶端与行中最高元素的顶原创 2021-11-04 17:41:05 · 270 阅读 · 0 评论 -
CSS基础知识(十二):鼠标样式、轮廓线、防止文本域拖拽
这里写自定义目录标题一、鼠标样式 cursor二、轮廓线 outline三、防止拖拽文本域 resize一、鼠标样式 cursorcursor: 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状li { cursor: pointer; } 属性值描述default小白,默认pointer小手move移动text文本not-allowed静止二、轮廓线 outline给表单添加 outline: 0; 或者原创 2021-11-04 17:34:59 · 564 阅读 · 0 评论 -
CSS高级技巧(三):三角形
文章目录总结总结三角形:将盒子的宽和高设置为0,只给盒子的边框设置宽度 div { width: 0; height: 0; border: 50px solid transparent; //transparent:设置边框颜色为透明色 border-left-color: pink; //transparent:设置左边框颜色为粉色 }//上下左右边框设置相同的大小,并且设置三个边框颜色透明,剩下的边框以三角形的形式展现...原创 2021-11-04 17:15:36 · 94 阅读 · 0 评论 -
CSS高级技巧(二):字体图标
文章目录一、使用场景二、字体图标使用1.引入2.给标签定义字体3.字体图标的追加一、使用场景精灵图是有诸多优点的,但是缺点很明显。图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体字体图标的优点轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质原创 2021-11-04 17:10:31 · 364 阅读 · 0 评论 -
CSS高级技巧(一):精灵图
文章目录一、精灵图一、精灵图精灵图由来:一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。使用精灵图核心:精灵技术主要针对于背景图片使用。就是把多个小背原创 2021-11-04 17:02:04 · 2324 阅读 · 0 评论 -
CSS基础知识(十一):元素的显示与隐藏
文章目录一、display 显示与隐藏二、visibility 显示与隐藏三、overflow 溢出显示隐藏四、总结一、display 显示与隐藏display 属性用于设置一个元素应如何显示。display: none ;隐藏对象display:block ;除了转换为块级元素之外,同时还有显示元素的意思display 隐藏元素后,不再占有原来的位置二、visibility 显示与隐藏visibility 属性用于指定一个元素应可见还是隐藏。visibility:visible ;原创 2021-11-04 16:55:12 · 116 阅读 · 0 评论 -
CSS基础知识(十):定位
文章目录一、为什么需要定位二、定位1.定位模式与边偏移2.静态定位 static3.相对定位 relative4.绝对定位 absolute5.子绝父相6.固定定位 fixed7.粘性定位 sticky8.定位总结9.定位叠放次序 z-index10.定位拓展一、为什么需要定位某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.当我们滚动窗口的时候,盒子是固定屏幕某个位置的。以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以: 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常原创 2021-11-04 16:48:56 · 207 阅读 · 0 评论 -
CSS基础知识(九):浮动
文章目录一、标准流二、浮动1.float2.浮动特性3.清除浮动一、标准流标准流(普通流/文档流):标签按照规定好默认方式排列.块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span、a、i、em 等有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标 签默认的排列方式.浮动最典型的应用:可以让多个块级原创 2021-11-04 16:16:12 · 262 阅读 · 0 评论 -
CSS基础知识(八):盒子模型——border、padding、margin、content
文章目录前言一、盒子模型二、border1.border2.border-style2.边框简写3.border-collapse4. border-radius5.box-shadow6.text-shadow二、padding三、margin四、盒模型1.标准盒模型2.怪异盒模型前言一、盒子模型二、border1.borderborder可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色border : border-width || border-style原创 2021-11-02 00:08:09 · 1861 阅读 · 0 评论 -
CSS基础知识(七):CSS三大特性——层叠性、继承性、优先级
文章目录一、CSS三大特性二、层叠性三、继承性四、优先级一、CSS三大特性CSS三大特性:层叠性、继承性、优先级二、层叠性层叠性主要解决:冲突的问题,相同的选择器设置相同的样式,此时会产生样式冲突,层叠性使用就近原则,让一个样式覆盖掉另一个样式样式冲突,遵循的原则就是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠三、继承性css的继承: 子标签会继承父标签的某些样式,如文本的颜色和字号,简单的理解就是子承父业恰当的使用继承可以简化代码,降低css样式的复杂性原创 2021-11-01 22:05:36 · 912 阅读 · 0 评论 -
CSS基础知识(六):背景属性
文章目录一、背景属性二、背景属性细分1.background-color2.background-image3.background-repeat4.background-position5.background-attachment6.background一、背景属性背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等二、背景属性细分1.background-colorbackground-color 属性定义了元素的背景颜色background-color: 颜色原创 2021-11-01 20:54:54 · 4225 阅读 · 0 评论 -
CSS基础知识(五):水平居中和垂直居中
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码原创 2021-10-28 21:48:56 · 2906 阅读 · 0 评论 -
CSS基础知识(四):快速生成html结构语法
一、快速生成HTML结构语法1. 生成标签——直接输入标签名,按tab键或回车键即可输入div然后按tab键或回车键, 可以生成 < div > </ div > //div + tab键/回车键: <div></div>2. 如果想要生成多个相同标签——使用*输入div*3, 可以生成3个< div > </ div > //div*3 + tab键/回车键(*左右不要加空格): <div>原创 2021-10-28 17:31:22 · 868 阅读 · 0 评论 -
CSS基础知识(三):CSS样式表分类
文章目录前言一、CSS样式表二、行内样式表(行内式)三、内部样式表(嵌入式)四、外部样式表(链接式)总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、CSS样式表Cascading Style Sheets:层叠样式表,简称CSS按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类行内样式表(行内式原创 2021-10-28 10:51:18 · 714 阅读 · 0 评论 -
CSS基础知识(二):字体属性和文本属性
文章目录前言一、字体属性1.1 font-family1.2 font-size1.3 font-weight1.4 font-style1.5 字体的复合属性1.6 字体属性总结二、文本属性2.1 color2.2 text-align2.3 text-decoration2.4 text-indent2.5 line-height2.6 文本属性总结前言提示:以下是学习前端以来,整理过的一些CSS知识点。知识主要来源于黑马程序员Pink老师,内容都是自己的理解,如果有不对的地方,请评论区指正,谢谢~原创 2021-10-23 19:45:50 · 1014 阅读 · 0 评论 -
CSS基础知识(一):选择器
文章目录前言一、CSS基础知识二、选择器1.选择器2.基础选择器2.1 标签选择器2.2 类选择器2.3 id选择器2.4 通配符选择器2.5 基础选择器总结3.复合选择器3.1 后代选择器3.2 子元素选择器3.3 并集选择器3.4 相邻兄弟选择器3.5 复合选择器总结4.伪类选择器4.1 动态伪类选择器4.2 UI元素状态伪类选择器4.3 结构伪类选择器4.4 否定伪类选择器5.伪元素选择器5.1 :before选择器5.2 :after选择器5.3 :first-line选择器5.3 :first-l原创 2021-10-21 19:31:10 · 790 阅读 · 2 评论