前端基础问题小总结（三）

前端基础问题小总结（三）

一、CSS盒子模型由里到外有哪几部分组成？标准盒子模型和IE盒子模型有啥区别？通过什么方式进行转变?

一个盒子模型分成几部分：- 内容区（content）- 内边距（padding）- 边框（border）- 外边距（margin）
标准盒子模型： padding、border所占的空间不在width、height范围内
IE盒子模型： width包括content尺寸＋padding＋border的总和

二、响应式布局和自应式布局有啥区别？

响应式布局：
响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
自应式布局：
自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

三、多个inline元素之间会有空隙，为什么？怎么解决?

原因： 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
解决方法： ①为父元素中设置font-size: 0，在子元素上重置正确的font-size
②为inline-block元素添加样式float:left
③设置子元素margin值为负数
④设置父元素，display:table和word-spacing

四、写出以400px 800px 1400px为分隔点媒体查询的css框架

@media screen and (min-width: 400px或max-width：1400px) {
            html{
                font-size: 30px;
            }            
        }
        @media screen and (min-width: 800px或max-width：800px){
            html{
                font-size: 40px;
            }
        }
        @media screen and (min-width:1400px或max-width：400px){
            html{
                font-size: 50px;
            }
        }

五、单位rem,em,vw(vh)的区别？

1. rem 单位都是相对于根元素html的font-size来决定大小的
2. em 同百分比一样，相对于父元素计算
3. vw：1vw 等于视口宽度的1%，vh:1vh 等于视口高度的1%

六、如何设置小于12px的字体？

.box{
            font-size: 12px;
            transform: scale(0.6);/*缩小文字*/
        }

七、设置中viewport的width=device-width和user-scalable=no是啥意思？

width=device-width: 是自适应手机屏幕的尺寸宽度。

user-scalable=no是用户的不可以缩放的操作

八、响应式布局的实现方式有哪些？

1. 百分比布局。
2. 媒体查询布局。
3. rem响应式布局。
4. vw响应式布局。
5. flex弹性布局。