nbsl_的博客

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

概念一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性形成rander树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对用这些节点在和这个过程中，回流与DOM树有关，重绘与渲染树有关，怎么理解比如我们删除DOM节点，修改一个元素的高度，页面布局发生改变，DOM结构发生变化，那么就肯定重构DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完成，渲染树也随之被再次渲染，这个过程叫回流当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DO

px和em以及rem的区别一、px(像素)相对长度单位，相对于分辨率而言的，1920*1024意思为宽为1920像素，高为1024像素二、em它并不是固定的，em会继承父元素的大小没有父级继承时，默认继承浏览器字体大小16px 1em=16pxdiv{ font-size: 20px; } div>span{ font-size: 1em; } <div> <span>哈哈哈哈</span

清除浮动有哪几种方式一、额外标签法闭合思想(用最后一个盒子作为隔板) ul{ width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid #000; } li{ width: 100px; height: 100px; background-color: red; margin: 5px;

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

让一个不定宽高的盒子水平垂直居中一、使用定位的方式 .father{ position: relative; width: 500px; height: 300px; background-color: skyblue; } .son{ width: 40px; height: 40px; background-color: orange; position: absolute;

去除页面滚动条实现代码body::-webkit-scrollbar {display: none;}

使用CSS实现三角形和扇形一、实现三角形//原理就是使用边框实现，边框分为四份每一份是一个45度角的三角形，//通过设置边框宽度和颜色，不显示的颜色设置为transparent，展示三角形 div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color:red red transparent transparent; } &lt

三栏布局中间自适应一、使用flex布局//原理使用flex布局，左右给固定宽度，中间使用felx:1分得剩余宽度 .outer{ display: flex; width: 100%; } .outer>div{ height: 200px; } .left{ width: 200px; background-color: red; } .center{ flex: 1;

什么是BFCBFC全称是(Block Formatting Context) 块级格式化上下文，就是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素。有一个独立的块级渲染区域，该区域有一套渲染规则来约束盒子的布局，与外部的区域没有关系。透过现象看本质 ：BFC就是符合一些特性的HTML标签触发BFCfloat 的值不为 noneposition 的值为 absolute 或 fixedoverflow 的值不为 visible (hidden,auto,scroll)disp