sparks42的博客

要求：左右100px宽，中间自适应flex外层元素用 display: flex;自适应区 flex: 1;两边给固定宽度即可。grid外层元素用：display: grid;grid-template: 100px / 100px 1fr 100px; // 高 / 左 中 右...

HTML<canvas id="canvas"></canvas>JavaScriptvar canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d"); // 返回一个用于在画布上绘图的环境ctx.beginPath(); // 开始一条路径ctx.arc(75, 75, 50, 0, 2 * Math.PI); ctx.stroke(); // 进行绘制arc的参数

举个例子：父级和子级之间，给子级上边的外边距，父级会跟着子级下来<div class="dad"><div class="son"></div></div>.dad { width: 100px; height: 100px; background: red; border-top:1px solid; /* 这句不加就会塌陷 */}.son { width: 50px; height: 50px; margin

MDN 简介（Mozilla Developer Network）：始于2005年 网络技术开发文档的非商业网站 多国语言什么是空标签（empty element）：1.标签里面不能有内容。通俗点说就是：没有儿子的标签。断子绝孙的标签。2.不可能存在子节点（例如内嵌的元素或者元素内的文本）的element3.通常在一个空标签上使用一个闭合标签是无效的。有这些：...

1.content-box（默认）2.border-box（更好）border-box更好的原因：写起来更方便（调整padding和border，不用担心超出父元素）两者的主要区别是：二者的盒子宽高是否包括元素的边框和内边距。CSS3新增了box-sizing属性来改变盒模型的类型content-box：盒子宽高 = 内容宽高（content）border-box：盒子宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）...

左右布局、左中右布局(这2个差不多。都是 横向布局)float，写法：每个li上加上float li的父元素加上clearfix类.clearfix::after{ content:''; display:block; clear:both;}flex(因为现在的浏览器几乎都支持 flex 了，所以尽量用 flex ，不用 float )在要左右布局的元素上，加上 ...

html<div> <span>姓名</span> <br> <span>联系方式</span></div>css <style> div{ /* border: 1px solid red; */ font-size: 20px; } s...

Flex 布局特点与方向无关 空间自动分配、自动对齐 简单的线性布局flex container 的属性 （常用的只有4个）flex-direction 方向 flex-wrap 换行 flex-flow 上面两个的简写 （很少用这个，一般都是单独用上面两个，所以其实只有5个属性） justify-content 主轴方向对齐方式 align-items 侧轴对齐方式...