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 · 108 阅读 · 0 评论 -
关于重绘、重排的二三事
关于重绘、重排 DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排。 浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘。 引起重绘重排的原因： 添加或者删除可见的DOM 元素尺寸或者位置的变换 浏览器页面初始化 浏览器窗口大小发生变化，重排一定导致重绘，重绘不一定会导致重排 减少重绘重排的方法有： 不再布局信息改变时做DOM查询 使用csstext、className一次性改变属性 使用frag原创 2021-04-21 20:42:58 · 106 阅读 · 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 · 529 阅读 · 0 评论 -
关于隐藏一个元素
关于隐藏一个元素 1.显示隐藏 隐藏元素 display:none; display:block;除了转换块级元素外还有显示意思 隐藏元素后不再占有原来位置，就相当于删除了差不多，切元素绑定的事件也不会触发了 visibility:visible;元素可视 visibility:hidden;元素隐藏 隐藏元素后继续占有原来位置，切元素绑定的事件不可以触发 opacity=0 元素隐藏，但继续占有原来位置，元素绑定的事件可以触发 overflow溢出 overflow:visible; overflow:h原创 2021-04-21 19:21:01 · 101 阅读 · 0 评论 -
关于定位
关于定位 相对定位 绝对定位 固定地位 粘性定位 sticky 叠放次序 z-index： z轴，懂？ 只有定位的盒子才有这个属性 定位的特殊性 脱离标准流就不可以使用margin：auto；来定位了原创 2021-04-21 19:14:58 · 58 阅读 · 0 评论 -
双边距重叠问题
双边距重叠问题 多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会重叠 两个相邻的外边距都是正数时、折叠结果是它们两者之间的较大值 都是负数时、折叠结果是两者绝对值的较大值 一正一负时、折叠结果是两者的相加值 解决嵌套块元素塌陷问题（父级子级同时有外边距，系统用较大的） 可以给父元素定义边框 可以为父元素定义内边距 可以为父元素添加overflow:hidden; ...原创 2021-04-21 19:09:03 · 410 阅读 · 0 评论 -
关于行内元素、块元素、行内块元素
关于行内元素、块元素、行内块元素 块元素 文字类元素内不允许再使用块级元素 行内元素 行内块元素 4.显示模式转换 转换为块级元素：display:block; 转换为行内元素：dispaly:inline; 转换为行内块元素：display:inline-block; ...原创 2021-04-21 19:02:40 · 70 阅读 · 0 评论 -
css与js动画的优缺点对比
css与js动画的优缺点对比 JS动画 缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度高于CSS动画 优点：(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。 (2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有Jav转载 2021-04-20 21:41:58 · 154 阅读 · 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 · 134 阅读 · 0 评论 -
关于2D转换、css3动画、3D转换
关于2D转换、动画、3D转换 1.移动translate transform：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 · 198 阅读 · 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 · 87 阅读 · 0 评论 -
浮动及清除浮动
标题：浮动及清除浮动 1.浮动 特性： 脱标 行内块元素特性 块级盒子没设置宽度时默认和父级一样宽、设置浮动后宽度根据内容决定 设置浮动的元素间无缝隙、一行占不下会另起一行 一行内顶端对齐排序 清除浮动： 额外标签发、空标签必须是块级元素<div style="clear:both;"></div> 父级添加overflow属性 伪元素发 :after伪元素发 双伪元素清除浮动 :after其实已经达到了清除浮动的目的，:before的设置目的是为了阻止margin-to原创 2021-04-06 10:01:44 · 65 阅读 · 0 评论