![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
花椰菜14528
这个作者很懒,什么都没留下…
展开
-
css实现一个三角形
直接贴代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {原创 2021-05-17 22:44:32 · 90 阅读 · 0 评论 -
关于重绘、重排的二三事
关于重绘、重排DOM的变化影响到了预算内宿的几何属性比如宽高,浏览器重新计算元素的几何属性,其他元素的几何属性也会受到影响,浏览器需要重新构造渲染书,这个过程称之为重排。浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘。引起重绘重排的原因:添加或者删除可见的DOM元素尺寸或者位置的变换浏览器页面初始化浏览器窗口大小发生变化,重排一定导致重绘,重绘不一定会导致重排减少重绘重排的方法有:不再布局信息改变时做DOM查询使用csstext、className一次性改变属性使用frag原创 2021-04-21 20:42:58 · 90 阅读 · 0 评论 -
关于选择器以及它们的权重问题
关于选择器以及它们的权重问题1.属性选择器<button disabled="disabled">按钮</botton><style>botton[disabled] { cursor:pointer;}</style>2.结构伪类选择器E:nth-child(n) n可以是数字,可以是关键字(even偶数、odd奇数),可以是公式(如果是公式,n从0开始计算)第0个和超出的会被忽略div span:nth-of-type(2原创 2021-04-21 19:52:29 · 507 阅读 · 0 评论 -
关于隐藏一个元素
关于隐藏一个元素1.显示隐藏隐藏元素display:none;display:block;除了转换块级元素外还有显示意思隐藏元素后不再占有原来位置,就相当于删除了差不多,切元素绑定的事件也不会触发了visibility:visible;元素可视visibility:hidden;元素隐藏隐藏元素后继续占有原来位置,切元素绑定的事件不可以触发opacity=0元素隐藏,但继续占有原来位置,元素绑定的事件可以触发overflow溢出overflow:visible;overflow:h原创 2021-04-21 19:21:01 · 79 阅读 · 0 评论 -
关于定位
关于定位相对定位绝对定位固定地位粘性定位 sticky叠放次序z-index:z轴,懂?只有定位的盒子才有这个属性定位的特殊性脱离标准流就不可以使用margin:auto;来定位了原创 2021-04-21 19:14:58 · 43 阅读 · 0 评论 -
双边距重叠问题
双边距重叠问题多个相邻(兄弟或者父子关系)普通流的块元素垂直方向margin会重叠两个相邻的外边距都是正数时、折叠结果是它们两者之间的较大值都是负数时、折叠结果是两者绝对值的较大值一正一负时、折叠结果是两者的相加值解决嵌套块元素塌陷问题(父级子级同时有外边距,系统用较大的)可以给父元素定义边框可以为父元素定义内边距可以为父元素添加overflow:hidden;...原创 2021-04-21 19:09:03 · 386 阅读 · 0 评论 -
关于行内元素、块元素、行内块元素
关于行内元素、块元素、行内块元素块元素文字类元素内不允许再使用块级元素行内元素行内块元素4.显示模式转换转换为块级元素:display:block;转换为行内元素:dispaly:inline;转换为行内块元素:display:inline-block;...原创 2021-04-21 19:02:40 · 51 阅读 · 0 评论 -
css与js动画的优缺点对比
css与js动画的优缺点对比JS动画缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况。 (2)代码的复杂度高于CSS动画优点:(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。 (2)动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有Jav转载 2021-04-20 21:41:58 · 139 阅读 · 0 评论 -
关于布局
关于布局2.flex布局display:flex;设置x轴或者y轴为主轴flex布局中,默认子元素是不换行的,如果装不下,会自动缩小子元素宽度,放到父元素中设置换行:flex-wrap:wrap;换行 nowrap;不换行主轴方向与换行见下面例子p {display:flex;width:60%;height:150px;background-color:red;margin: 0 auto;}p span {flex:1;}p span:nth原创 2021-04-20 21:24:53 · 111 阅读 · 0 评论 -
关于2D转换、css3动画、3D转换
关于2D转换、动画、3D转换1.移动translatetransform:translate(x,y)等价于下面transform:translateX(100px);transform:translateY(100px);translate 不会影响其它元素的位置对行内标签没有用百分比移动是对于自己本身而言2.2D转换顺时针旋转45度transform:rotate(45deg);过渡(过渡写在本身上,谁做动画给谁加)0.3秒过渡时间transition:all 0.3s;原创 2021-04-20 19:42:38 · 175 阅读 · 0 评论 -
块级格式化上下文
块级格式化上下文(BFC)1.定义是一个独立的渲染区域,只规定内部Block-level Box如何布局,与区域外部毫不相干Box:css布局的对象和基本单位元素类型和diaplay决定这个Box的类型Formatting Context:W3C css2.1规范中的一个概念它是页面的一块渲染区域,并规定一套渲染规则,他决定子元素如何定位,以及和其它元素的关系和相互作用2.BFC的布局规则内部的box会垂直方向一个接一个放置box垂直方向的距离由margin决定,属于同一个BFC的相邻两原创 2021-04-06 14:13:22 · 63 阅读 · 0 评论 -
浮动及清除浮动
标题:浮动及清除浮动1.浮动特性:脱标行内块元素特性块级盒子没设置宽度时默认和父级一样宽、设置浮动后宽度根据内容决定设置浮动的元素间无缝隙、一行占不下会另起一行一行内顶端对齐排序清除浮动:额外标签发、空标签必须是块级元素<div style="clear:both;"></div>父级添加overflow属性伪元素发:after伪元素发双伪元素清除浮动:after其实已经达到了清除浮动的目的,:before的设置目的是为了阻止margin-to原创 2021-04-06 10:01:44 · 50 阅读 · 0 评论