斜光的博客

BFC(块级格式化上下文)(Block formatting context)直译为"块级格式化上下文"。是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。IE下为 Layout，可通过 zoom:1 触发1 元素的显示模式元素的显示模式 display。分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。...

如果说以前的文档流布局是一维布局的话，那么grid我们可以把它理解成二维布局以前的布局是从上到下，从左到右的文档流布局，也就是BFSgrid将改变这种布局方式grid的基本概念其实就是在父元素身上挖坑，然后用子元素去填。1 创建单元格1.1 行列display: grid;先分行，后分列grid-template-columnsgrid-template-rows...

最新版的sass文件后缀为scss1 变量$$width: 5px;.box{ width: $width;}---------------------------.box { width: 5px;}2 嵌套父级选择器标识符：&无间隔跟随选择器或名字群组选择器的嵌套分别拆分再分别组合nav, aside { a {color: blue}}...

1 嵌套类似于html的结构，通过嵌套，来表现父子级关系，不建议嵌套过多层（包含选择器：不推荐超过三层）.box{ .nav{ border: 1px solid #000; }}& —— 父选择器用于给嵌套父级加伪类.clearfix{ &:after{ content: ''; display: block; clear...

1

1 表格的基本组成<table> 表格 <caption></caption> 表格标题 <thead> 表格头部 <tr> 行 <th></th> 列 <th></th> 列 </tr> </thead> <tbody> ...

1 CSS3 transition 过渡transition-duration 过渡持续时间transition-property 想要执行过渡的样式默认all只支持数值类型的值，而且，必须是同一个样式，从一个数值，过渡到另一个样式transition-delay 过渡延迟时间transition-timing-function 过渡执行动画linear 整个过程保持匀速...

form - 表单（不怎么常用）<form action="提交地址" method="提交方式" target="_blank"></form>action 表单信息提交地址，信息提交成功会跳转去该地址method 提交方式get （默认）posttarget 信息提交成功打开页面的方式_blank_selfinput表单元素<inp...

常见页面布局图1 上中下一栏式2 左右两栏式（混合浮动+普通流）3 左右两栏式（纯浮动）

1 层级z-index同级元素情况定位会提高层级，除了static后面的定位元素层级，高于前面的定位元素层级嵌套元素情况子级的层级高于父级的层级改变层级的属性：z-index: 1; 默认：0；特性：只能加给定位元素数值越大层级越高，可以接受负数建议同级元素之间比较层级2 包含块的概念和作用( 包含块就是定位父级 )包含块是绝对定位的基础，包含块就是为绝对定...

浮动文档流页面上的元素按照：从上到下从左到右排列一个元素在页面中的位置，取决于他在代码中的位置从大到小，从左到右，从外到里先排成一行，一行不够再换行浮动会破坏文档流根据指定的方向发生位移，碰到父级的边界或者相邻元素后停止清除浮动<br clear="both">效果好，但是只能在块元素中起作用，而且会多一行代码产生空白伪元素:after主流方法.fix...

标签特性：块标签：1.独自占有一行2.支持所有样式的设置3.不设置宽度，默认撑满父级内联标签：1.一行可以显示多个2.不支持宽高的设置，宽高由内容撑开3.代码换行会解析空格4.上下margin、上下padding、上下border会受到影响内联块标签：inline-block1.一行可以显示多个2.支持宽高的设置3.代码换行会解析空格4.需要设置对齐方式为顶部 ver...

文本类标签 <p>用于文本段落</p> <span>文本</span> 并不具备任何含义，中间可以放置文本，对文本单独进行操作 <strong>文本加粗，强调</strong> <b>文本加粗，强调</b> <em>斜体</em> <i>斜体</i&g...

盒子模型content区域（由width和height组成）可以显示文字子元素子元素div的可视宽高（border+padding+content） 会撑满父级content区域可视宽高计算公式：标准盒模型标准盒模型的可视宽高 = border + padding + width/height（content）怪异盒子模型box-sizing: border-box可视宽高 = w...

1 backgroundbackground-repeat: repeat\repeat-x\repeat-y\no-repeat;背景重复background-position:位置;背景定位 控制背景的位置值的类型：关键词 ：right、left、top、bottom、center百分比 （单位：%）百分比的计算是基于：盒子的宽\高 - 背景的宽高 得到的结果，计...