m0_46978034的博客

定义 流式布局，就是百分比布局，也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 在早期用来应对不同尺寸的PC端，如今也是移动开发使用的比较常见的布局方式。 配合来使用 max-width 最大宽度 （max-height 最大高度） min-width 最小宽度 （min-height 最小高度） 代码演示 <style> * { padding: 0px;

视口(viewport) 就是浏览器显示页面内容的屏幕区域，视口课分为布局视口，视觉视口 和 理想视口 最常用的还是理想视口 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 ios android 基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 视觉视口 visual viewport 它是用户正在看到的网站的区域，注意：是网站的区域

/*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box; /*点击高亮我们需要清除清除 设置为transparent 完成透明 比如a标签就有高亮*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none; /*禁用长按页面时的弹出菜单*/ img,a { -

Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局 flex弹性盒布局的优点：弹性盒是一个简单而强大的布局方式，我们通过弹性盒指明空间的分布方式 ，内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。通过弹性盒内容可以轻易的横向或纵向排列。 Flex布局原理就是：给父盒子添加display:flex；属性，来控制子盒子的位置排列方式从而实现flex布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

CSS3 盒子模型 box-sizing 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding 也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了 /*CSS3盒子模型*/ box-sizing: border-box; /*传统盒子模型*/ box-sizing: content-box; 注意：在移动端可以全部