weixin_44350171的博客

字符ASCII码不间断空格(No-break Space，简称NBSP)160空格（Space）32HTML会将多个连续的空格压缩成一个空格，所以网页布局时按再多空格键，也只显示一个空格；要想显示多个空格的位置，要使用&nbsp；也就是「不间断空格」；注意：微信发消息，所有的空格会被转为不间断空格如果用微信直接传代码，再黏贴到vscode中，vscode中不会显示，但是在页面上就会有一堆空格破坏布局样式微信传代码需谨慎...

谷歌浏览器中，1屏幕像素×0.8=1css像素0.8很容易联想到研究边框时最小能显示的0.8px如果把0.8px乘以1.25就等于1px，所以谷歌显示小数像素并不是使用了什么亚像素，而是将所有正常的css像素放大1.25倍显示，0.8px的css像素对应的就是一整个设备像素，而不是0.8个像素如果你的屏幕宽是1920px，将所有内外边距清零，创建一个宽1920px的div就会发现，元素超出屏幕，出现水平滚动条，而且超出不是一星半点；而div的宽设为1920*0.8=1536px，滚动条就会消失，再多加

在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外；所以在style.top<0时使其style.top=0在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它）但是出现了一个bug，如下图按理说我把

问题描述：浮动布局在页面缩小时，布局变形，最后一个子元素被挤到下一排。效果如下↓效果展示：问题出现的条件：1.宽度采用px固定值；2.子元素宽度相加，正好等于父元素宽度；3.有左右边框问题出现的原因：你css里边框写的是1px，页面缩放到50%，就是0.5px，小于屏幕最小能显示的1px，是无法显示的；这个时候你的谷歌浏览器，就会把你写的1px变为2px，缩小一倍正好是原来的1px。但是这个时候，在css里，子元素多了1px，原来严丝合缝的布局被打破了，最后一个子元素就被挤下去了。c

可能大家初学前端时，都要记住行级元素的性质：1.行级元素不能设置宽高；2.其宽高由内容撑开。但实际上：行级元素宽度由内容撑开，但高度hieght只与其font-size与font-family有关测试1.写一个<span>标签，样式只添加一个红色背景与字体大小，background: red;font-size=20px运行结果：空白页面此时，谷歌浏览器点击F2弹出控制台，鼠标放在右边代码的<span>标签上，页面上显示其宽高为0×0；（这种方式显示的是可视区域的宽高

文档流：1.父元素内容区(width) 包含 子元素整体(margin+border+padding+width)2.子元素紧贴父元素内容区左上角3.父元素(width）小于 子元素(margin+border+padding+width)时，子元素从右侧溢出子元素浮动：与文档流相同子元素相对定位，且不设置left等四个属性值，父元素相对定位：与文档流相同子元素相对定位，设置left=0；top=0；父元素相对定位：1.父元素内容区加内边距(width+padding) 包含 子元

绝对定位中，left/right/top/bottom是参考谁确定的left/right/top/bottom的值是父元素的border内侧 与 子元素的margin外侧的距离，也就是说如果left=right=top=bottom=0，父元素的内边距加内容区与子元素整个盒子模型重合父元素（padding+content）=子元素（margin+border+padding+content）...