![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML-CSS
HTML/CSS相关内容
日晞
这个作者很懒,什么都没留下…
展开
-
flex 布局
主轴由 flex-direction(row,row-reverse,column,column-reverse) 定义;交叉轴是相对于主轴而相应产生的,当以列(column)为主轴,那么交叉轴为行。flex-grow:如果第一个元素 flex-grow 值为 2,其他元素值为 1,则第一个元素将占有 2/4(上例中,即为 200px 中的 100px), 另外两个元素各占有 1/4(各 50px)。上面二者的缩写: flex-flow: flex-direction flex-wrap;转载 2023-08-25 11:56:23 · 60 阅读 · 0 评论 -
事件捕获和事件冒泡
以下代码,点击 aa ,控制台会打印什么呢?这就是事件冒泡,从内层向外层传递事件流。事件捕获和事件冒泡与事件流有关系。而事件捕获正相反,通过外层到内层。原创 2023-08-24 15:45:19 · 214 阅读 · 0 评论 -
svg 与 canvas 的区别
相同点:主要用于画 2D 图形不同点:Canvas 画的是位图,SVG 画的是矢量图,而矢量图是放大不失真的。 SVG 不依赖分辨率,Canvas 依赖分辨率。 SVG 节点过多时渲染慢,Canvas 性能更好一点。转载 2023-08-19 13:51:22 · 54 阅读 · 0 评论 -
scss 使用:变量和函数的使用
scss 使用:变量和函数的使用转载 2023-08-19 13:43:17 · 127 阅读 · 0 评论 -
script 标签 defer 和 async;script 和 CSS 放的位置
script 代码一般放在 body 下面,等HTML 渲染后再执行js;CSS 代码一般放在 body 上面,目的是直接展示有了样式后的界面,用户交互会更好。defer 必须要 html 执行完之后,再执行js。async 只要 js 下载完就执行。原创 2021-11-06 18:42:50 · 133 阅读 · 0 评论 -
重排重绘区别;display:none 和 visibility:hidden 的区别
style --> 创建布局树 --> 分层(对动画) --> 光栅化 --> 合成。stlye 表 --> 光栅化 --> 合成。原创 2021-09-20 13:23:12 · 319 阅读 · 0 评论 -
css 长度单位
px:一个长度单位,与屏幕分辨率有关 %:eg: 父元素 100px ,50% 就是 100px * 50% = 50px em:1em = 父元素的字体大小 rem: 1rem = html 根元素的字体大小 vw: 100vw = 窗口的宽度 vh:100vh = 窗口的高度原创 2023-08-15 11:10:30 · 49 阅读 · 0 评论 -
CSS3 新特性
以下以首字母排序:动画(animate)圆角(border-radius)怪异盒模型(box-sizing)阴影(box-shadow)背景(eg: background-image,background-clip)css 计算属性(calc())图片属性(filter)flex 布局线性渐变(gradient)rgba文字阴影(text-shadow)变换(transform)伪元素原创 2023-08-08 16:31:26 · 888 阅读 · 0 评论 -
用 CSS 实现长宽为浏览器窗口一半的正方形
【代码】用 CSS 实现长宽为浏览器窗口一半的正方形。原创 2023-08-08 15:58:16 · 140 阅读 · 0 评论 -
三栏布局,左右固定中间自适应
【代码】三栏布局,左右固定中间自适应。原创 2023-08-07 18:32:30 · 54 阅读 · 0 评论 -
两栏布局,左边固定右边自适应
【代码】两栏布局,左边固定右边自适应。转载 2023-08-07 17:52:48 · 59 阅读 · 0 评论 -
viewport 常见设置
2.css中的1px在移动端屏幕中不一定是一个像素,看手机分辨率,而且随着用户对手机的缩放,1px对应的像素也随之增大。1.菜鸟教程对viewport的解释。viewport就是移动设备看网页的区域。原创 2022-07-26 09:56:22 · 468 阅读 · 1 评论 -
让盒子内文本内容只显示三行,且结尾超出部分用省略号代替
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-10-13 18:56:47 · 299 阅读 · 0 评论 -
前端优化:SEO 优化 html 语义化 性能优化
语义化标签:header,footer,nav,article,section,aside。意义:让页面结构化,提高代码的可读性,有利于迭代和维护,SEO,前端优化分为:seo 优化,html 语义化,性能优化。原创 2021-10-13 18:52:50 · 242 阅读 · 0 评论 -
选择器权重计算规则
第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为0100。 第三等:代表类,伪类和属性选择器,如.content,权值为0010。 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。...原创 2021-10-13 11:06:03 · 61 阅读 · 0 评论 -
HTML5 与es6 新特性
arr.map() 和 arr.reduce()let 和 const 命令。for..of 循环。原创 2021-10-12 14:32:54 · 90 阅读 · 0 评论 -
隐藏元素的方式
display:none; 不占据位置,不响应绑定的监听事件overflow:hidden; 仍占据位置,不响应绑定的监听事件opacity:0; transform:scale(0,0); 仍占据位置,响应绑定的监听事件特别的: position:absolute; z-index:-10; 藏起来,让用户看不到原创 2021-10-10 21:00:58 · 136 阅读 · 0 评论 -
伪类 伪元素
伪类只是在原元素上加上特殊效果,而伪元素是额外插入了元素(这个新创造的元素就叫 "伪元素" )原创 2021-10-10 19:09:57 · 55 阅读 · 0 评论 -
元素——块级元素、行内元素、行内块元素区别
块级元素:div p h1~h6 ul行内元素:a span input select img原创 2021-10-09 12:51:25 · 78 阅读 · 0 评论 -
点击登录按钮,status 为canceled解决办法 无状态码
我的登录按钮是a 链接,把其改成button 就行了原创 2021-09-23 14:06:20 · 536 阅读 · 0 评论 -
怎么解决移动端响应式布局问题
达到这种布局,且是响应式(即随着移动端的变化,元素大小也相应变化)flex 布局(flex:25%) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...原创 2021-08-17 17:47:54 · 448 阅读 · 0 评论 -
rem、em、vw、vh区分
rem(r:root 根):根据根元素html font-size * rem (类似倍数)em:根据元素本身的字体大小*em大小(类似倍数)(继承)vh: (vw同理)原创 2021-08-16 22:36:08 · 150 阅读 · 0 评论 -
元素垂直水平居中的多种办法(块级 行内元素)
块级元素居中:1.未知子元素宽高,绝对定位+transform:translate<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w...原创 2021-08-16 19:03:22 · 123 阅读 · 0 评论 -
BFC(块格式化上下文)详解
下图即为margin 重叠效果:margin 最终只取了.sec 的 margin-top。是什么(what):是一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素。原创 2021-08-16 18:32:31 · 138 阅读 · 0 评论 -
盒子浮动,盒子塌陷,解决办法:清除浮动...
盒子塌陷:子盒子的内容到父盒子外面这里container:父亲盒子,item:子盒子子盒子的内容到父盒子外面了,盒子就是塌陷了产生塌陷的原因:父盒子:没有设置高度 且 子盒子:脱离文档流(eg:float:left)==> 盒子塌陷解决盒子塌陷问题:对父盒子:把父盒子的高度写死即可 或 对子盒子:清除子盒子的浮动清除子盒子的浮动方法(3个):在子盒子后面添加一个盒子,给其添加clear:both属性 <!DOCTYPE...转载 2021-08-16 18:06:09 · 2016 阅读 · 0 评论 -
盒模型:正常盒子: content-box 和怪异盒子: border-box 特点
offsetwidth=== boder+padding+width正常盒子设置(默认):box-sizing:content-box正常盒子特点:content == width(如下图)怪异盒子设置:box-sizing:boder-box怪异盒子特点:padding + boder + content == width(如下图所示)那想一想:这两张图片,哪个盒子大一些呢?(思考之后往下拉,答案)答案:正常盒子大一些,首..原创 2021-08-16 17:38:02 · 180 阅读 · 0 评论