Amelian的博客

窗口缩放导致页面排版错乱的解决方法简单的说就是设置body的宽度，那么如何动态的获取浏览器减去侧边滚动条之后的宽度，原理就是通过创建一个带有滚动条的div（也就是overflow:scroll），利用offsetWidth-clientWidth得到滚动条的宽度，再利用window.screen.availWidth减去滚动条的宽度即可得到浏览器除了滚动条以外的宽度，body再设置该宽度，即可解决缩放排版错乱的问题，代码展示如下function setBodyWidth(){ var barWi

scrollWidth,clientWidth,offsetWidth的区别通过一个demo测试这三个属性的差别。说明：scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。该demo就在页面中放一个textarea元素，采用默认宽高显示。情况1：元素内无内容或者内容不

常见的自适应布局又以下两种：1.左列固定右列自适应说明：左列固定右列自适应，也可以右列固定左列自适应<div class="container"> <div class="left">固定宽度</div> <div class="right">自适应</div></div>实现：方式1：子元素float：left思路：左列固定列设置为float：left（设置固定宽度），右列自适应设置为float：non

说在前面：伪类 前面是一个冒号， 伪元素 前面是两个冒号（CSS3之前是一个冒号，CSS3后变成两个冒号，用于区分）伪元素： 模拟添加一个元素，来实现某种效果伪类：作用于标签（状态本身）一、伪元素（使用双冒号 :: )1.伪元素主要用来创建一些不存在在原dom结构树中的元素，例如使用 ::before和 ::after在一些已经存在dom结构树中的元素添加文字样式等。这些添加的内容会以具体的UI现实出来，被用户所看待，但是这些内容不会改变文档的内容，不会出现在dom中，不可赋值，仅在CSS渲染层加

题目1：求背景图片左边到#box盒子左边外侧的距离 <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 200px; background-color: pink; padding: 100px; border: 80px solid blue; background-image: url('

1.对于1物理像素问题（不会出现在pc端，因为pc的像素比永远为1，而物理像素为1时，此时css自然为1），因此你写的css像素和物理像素永远时一对一的关系像素比=物理像素/css像素2.在移动中，不同设备其dpr即像素比不一样，可为2、3等，因此当你在dpr为2的移动端设置1px的css像素时，对应2物理像素，因此会达不到我们想要的效果3.解决–通过操作meta标签上的缩放比（即initial-scale）当initial-scale为1时，表示没有进行任何的缩放，而现在我想要把1px的css

常用的解决移动端布局的方案大概有：1.flex弹性布局2.百分比3.rem布局4.用框架搭建页面5.通过meta标签中的viewport6.媒体查询media百分比布局百分比布局采用百分比设置元素宽高flex布局父级元素设置display：flex子级元素通过flex参数来设置缩放比例，缩放条件、排列方式等缺点：具有兼容性问题rem布局这里提供两种思路：思路11）设置根节点字体大小为（为了方便，可以灵活设置：16、32、100等），布局时使用原px/@rem得出r

解决移动端适配问题方法一：使用rem准备：在实际开发中，一般设计稿都是给定的，而且设计稿中的元素的大小也是给定px值的，比如一般给定设计稿适应的屏幕宽度为750px；问题：ui设计师给定的设计稿是在移动设备屏幕为750px下的显示效果，而针对于使用不同设备的用户，其显示屏幕宽度必然是不同的，因此我们需要根据ui设计图做相应的适配；思路：假设一个元素宽度为200px，那么我要是的这个为w:200px的元素在750px设备和375px（或者其他设备）上显示的效果一样可以得到x=100，但是这只是针对

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。box-sizing属性用于更改

1.文档流文档流是一个多层的结构，一层摆着一层-通过CSS可以分别为每一层设置样式-作为用户只能看待文档流的最顶上一层-这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认是在文档流中进行排列-对于我们的元素主要有两种状态在文档流中脱离文档流2.元素在文档流中的特点：2.1 块级元素：1）块级元素默认在页面中独占一行（自上向下排列）2）默认宽度是父元素的全部（即会把父元素撑满）3）默认高度是根据内容而定（子元素）2.2 行内元素1）行内元素不会独占页面的一行

一、在css中，具有继承性的属性有三大类1.文本相关属性：font-family、font-size、font-style、font-weight、font、line-hight、text-align、text-indent、word-spacing2.列表相关属性：list-style-image、list-style-position、list-style-type、list-style3.颜色相关的属性：color注意:元素自身属性特征与继承之间优先级之间的关系----即体现样式的叠层性