![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 51
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
z-index属性在什么情况下会失效?
通常 z-index 的使用是在有两个重叠的标签,在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative,absolute或是fixed。z-index属性在下列情况下会失效:...原创 2022-06-27 11:48:32 · 1129 阅读 · 0 评论 -
重绘、重排区别及如何减少
重绘当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,所以重绘跳过了创建布局树和分层的阶段。重排(回流)当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。关系重排需要重新计算布局树,重绘不需要,重排必定发生重绘,但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。触发重排的方法-页面初始渲染,这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺原创 2022-05-12 15:42:10 · 686 阅读 · 0 评论 -
iPhoneX 适配方案
前言iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。 比如一些需要贴在底部的按钮,和呼起的tabBar和底部弹出框,在iphoneX上就会出现被小黑条遮挡内容,或者页面上出现白色空隙的问题。处理前后截图如下所示基本了解viewport-fitiOS11 新增特性,苹果公司为了适配原创 2022-04-08 17:23:48 · 595 阅读 · 0 评论 -
css 1px 的问题
前言retina 屏下 1px 问题是个常谈的问题,相比较普通屏,retina 屏的 1px 线会显得比较粗,设计美感欠缺;在视觉设计师眼里的 1px 是指设备像素 1px,而如果我们直接写 css 的大小 1px,那在 dpr = 2 时,则等于 2px 设备像素,dpr = 3 时,等于 3px 设备像素。所以对于要求处理 1px 的场景,我们要进行特殊处理。实现1、transform: scale(0.5)可以使用 transform: scale(0.5) 进行 X、Y 轴的缩放,如下示例所原创 2022-04-08 16:38:32 · 1176 阅读 · 0 评论 -
BFC块级格式化上下文
BFC的理解块级格式化上下文只有 块级盒子 参与与外部无关,拥有自己的一套渲染规则应用场景解决 子元素浮动,父元素高度塌陷问题取消盒子margin塌陷问题(子元素设为margin-top,父子元素都会一起margin-top(解决 :给父元素加上overflow))阻止被浮动元素覆盖(兄弟元素浮动,后面的元素没浮动(解决:给没浮动的元素加overflow),后面的元素会被前面浮动的元素覆盖到)如何创建BFCfloat 不为nonedisplay 为inline-bloc原创 2022-02-13 14:56:09 · 173 阅读 · 0 评论 -
前端面试高频题:实现左右宽度固定宽度,中间自适应的三栏布局
面试高频题实现:定高100px,左右宽度均为200px,中间自适应。1、浮动—float<style> .wrap > div {height: 200px; text-align: center; line-height: 200px; } .float .left { width: 200px; float: left; background-color: #f00; } .float .center { b原创 2021-08-07 15:12:03 · 217 阅读 · 0 评论 -
transition 和 animation 的区别+visibility=hidden, opacity=0,display:none 区别+画一条 0.5px 的线
1..line { height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; //scaleY Chrome/Safari的线都变虚了,加上就不会了}2.在移动端<meta name="viewport" content="width=device-width,initial-sacle=1">其中width=device-width表示将viewport视窗的宽度调整为设备的宽度,这个原创 2021-07-01 16:33:37 · 257 阅读 · 0 评论 -
css 盒模型
简介就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。值box-sizing有三个值分别为 border-box,padding-box,content-box(默认)标准的盒子模型中(content-box) width 指 content 部分的宽度,所以盒子宽度:左右 border+左右 padding+width在 IE 盒子模型中(border-box,) width 表示content+padding+border 这三个部分原创 2021-07-01 16:09:56 · 62 阅读 · 0 评论 -
移动端多倍图自适应
1.第一种方法 通过 css 的 DevicePixelRatio 媒体查询属性:/*默认大小*/.photo {background-image: url(image100.png);background-size: 100px 100px;}/* 如果设备像素大于等于2,则用2倍图 */@media screen and (-webkit-min-device-pixel-ratio: 2),screen and (min--moz-device-pixel-ratio: 2) {原创 2021-05-17 10:12:03 · 356 阅读 · 1 评论 -
纯css,div隐藏滚动条,保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。这里介绍一个简单的方法:大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-y: scroll;overflow-x: hidden;然后再设置外层div的width小于内层div的width。这个内层div其实是会出现滚动条原创 2021-03-20 16:39:04 · 152 阅读 · 0 评论 -
span与span之间多了一点空白间隔,是什么原因引起的?有什么解决办法?
hello world产生空白的原因:元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器转换成一个空白字符,这个字符的大小受font-size影响上面代码中的span可以明显地看到有间隔,解这几种决办法: 1.去掉换行,将 span 写成一行2.<span>hello</span><span>world</span> 3.父元素使用 flex 布局:.wrap {display: flex; fle...原创 2020-11-03 17:50:56 · 3271 阅读 · 0 评论 -
css垂直水平居中的7种实现方式及最优解
一、固定宽高:1、margin根据已知的宽高写死,不推荐2、定位 + margin-top + margin-left .box-container{ position: relative; width: 300px; height: 300px;}.box-container .box { width: 200px; height: 100px; position: absolute; left: 50%; t原创 2020-10-20 10:37:18 · 263 阅读 · 0 评论 -
css样式 单行或多行文本超出变省略号
1.单行文本.ellipsis{ width:200px;/*必须是固定宽度值*/ overflow:hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*超出部分显示省略号*/ white-space:nowrap;/*规定段落中的文本不进行换行 */}2.多行文本.ellipsis-more{ width:200px;/*必须是固...原创 2020-04-21 11:49:24 · 135 阅读 · 0 评论 -
css选择器
标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }类选择器类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:.类名{属性...原创 2019-03-26 15:18:51 · 402 阅读 · 0 评论 -
块级元素和行内元素区别 以及行内块元素
行内元素的特点:(1)和相邻行内元素在一行上。(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。(3)默认宽度就是它本身内容的宽度。(4)行内元素只能容纳文本或则其他行内元素。原创 2019-03-26 15:32:28 · 1464 阅读 · 0 评论 -
CSS的继承性
CSS继承性所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。简单的理解就是: 子承父业。注意:恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)继承的 权重是 0...原创 2019-03-26 15:36:32 · 889 阅读 · 0 评论 -
css background背景详解
背景简写background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置background: transparent url(image.jpg) repeat-y scroll 50% 0 ;背景图片(image)background-image : none | url (url) 参数:none : 无背景图(默认的)url : 使用绝对或相对地址指定背景...原创 2019-03-26 15:41:38 · 436 阅读 · 0 评论 -
外边距合并及解决方法
外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。解决方案...原创 2019-03-26 15:47:40 · 4432 阅读 · 1 评论 -
浮动 讲解 以及 怎么清除浮动
浮动详细内幕特性浮动脱离标准流,脱标 不占位置,会影响标准流。浮动只有左右浮动。可以理解为漂浮起来1.浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。2.一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示3. 元素添加浮动后,元素会具有行内块元素的特性,这时候就可以设置它的大小 补充:加了float position:abs...原创 2019-03-26 16:00:30 · 247 阅读 · 0 评论 -
CSS样式
内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中,style标签一般位于head标签中titl...原创 2019-03-26 14:51:57 · 81 阅读 · 0 评论