![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
爱编程的梨清
向往成为前端大佬
展开
-
flex属性
父元素属性display:flex;(定义了一个flex容器)flex-direction(决定主轴的方向)row(横向 默认值,从左到右)row-reverse(横向 反转 从右到左)column(竖直 从上到下)column-reverse(竖直 从下到上)flex-wrap(是否换行)nowrap(默认值 不换行)wrap(换行)wrap-reverse(倒叙换行 第一排在下面)flex-flow(是flex-direction和flex-wrap的合并简写 row原创 2022-04-12 21:01:33 · 609 阅读 · 0 评论 -
重绘(repaint)和回流(reflow)
概念一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成rander树(渲染树),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的样式对用这些节点在和这个过程中,回流与DOM树有关,重绘与渲染树有关,怎么理解比如我们删除DOM节点,修改一个元素的高度,页面布局发生改变,DOM结构发生变化,那么就肯定重构DOM树,而DOM树与渲染树是紧密相连的,DOM树构建完成,渲染树也随之被再次渲染,这个过程叫回流当你给一个元素更换颜色,这样的行为是不会影响页面布局的,DO原创 2022-04-12 20:59:20 · 232 阅读 · 0 评论 -
px和em以及rem的区别
px和em以及rem的区别一、px(像素)相对长度单位,相对于分辨率而言的,1920*1024意思为宽为1920像素,高为1024像素二、em它并不是固定的,em会继承父元素的大小没有父级继承时,默认继承浏览器字体大小16px 1em=16pxdiv{ font-size: 20px; } div>span{ font-size: 1em; } <div> <span>哈哈哈哈</span原创 2022-04-05 11:48:40 · 354 阅读 · 0 评论 -
清除浮动有哪几种方式
清除浮动有哪几种方式一、额外标签法闭合思想(用最后一个盒子作为隔板) ul{ width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid #000; } li{ width: 100px; height: 100px; background-color: red; margin: 5px;原创 2022-04-05 11:34:49 · 146 阅读 · 0 评论 -
Css盒子模型
Css盒子模型一、当box-sizing:content-box(标准盒模型)width=content+padding(左右)+border(左右)div{ box-sizing: content-box; width: 100px; height: 100px; border: 10px solid red; padding: 20px; margin: 20px; } let div= document.qu原创 2022-04-05 11:25:51 · 239 阅读 · 0 评论 -
让一个不定宽高的盒子水平垂直居中
让一个不定宽高的盒子水平垂直居中一、使用定位的方式 .father{ position: relative; width: 500px; height: 300px; background-color: skyblue; } .son{ width: 40px; height: 40px; background-color: orange; position: absolute;原创 2022-04-03 21:15:18 · 953 阅读 · 2 评论 -
去除页面滚动条效果
去除页面滚动条实现代码body::-webkit-scrollbar {display: none;}原创 2022-03-05 16:31:07 · 1273 阅读 · 0 评论 -
使用CSS实现三角形和扇形
使用CSS实现三角形和扇形一、实现三角形//原理就是使用边框实现,边框分为四份每一份是一个45度角的三角形,//通过设置边框宽度和颜色,不显示的颜色设置为transparent,展示三角形 div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color:red red transparent transparent; } <原创 2022-04-03 14:27:20 · 430 阅读 · 0 评论 -
三栏布局中间自适应
三栏布局中间自适应一、使用flex布局//原理使用flex布局,左右给固定宽度,中间使用felx:1分得剩余宽度 .outer{ display: flex; width: 100%; } .outer>div{ height: 200px; } .left{ width: 200px; background-color: red; } .center{ flex: 1;原创 2022-04-03 14:02:52 · 1160 阅读 · 0 评论 -
什么是BFC?
什么是BFCBFC全称是(Block Formatting Context) 块级格式化上下文,就是页面上一个隔离的独立容器,容器内的子元素不会影响到外面的元素。有一个独立的块级渲染区域,该区域有一套渲染规则来约束盒子的布局,与外部的区域没有关系。透过现象看本质 :BFC就是符合一些特性的HTML标签触发BFCfloat 的值不为 noneposition 的值为 absolute 或 fixedoverflow 的值不为 visible (hidden,auto,scroll)disp转载 2022-04-03 12:02:11 · 451 阅读 · 0 评论