HTML+CSS : 笔记整理(3 移动端布局简单了解)

流体布局:宽度用百分比,计算真实宽度用函数 : width: calc(25% - 4px);

box-sizing:

1.content-box:默认计算方式 ,宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

2. border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

------------------------------------------------------------------------------------------------------------

响应式布局:通过查询浏览器宽度,不同的宽度对应不同的样式块.

@media 可以针对不同的屏幕尺寸设置不同的样式，响应式的页面当重置浏览器大小的时候,

会根据浏览器的宽度和高度重新渲染页面。

语法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}

max-width:500px 的作用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块，即小于等于 500px

------------------------------------------------------------------------------------------------------------

rem布局:

rem单位是参照根节点(html)的文字大小,动态的调节的一种相对单位,如在html标签中设置 font-size:20px,

那么1rem就等于20px,通常会配合一个js脚本来使用,如果改变渲染窗口大小,那么js会调整根节点的文字大小,从而对

所有使用了rem单位的元素都有影响.

------------------------------------------------------------------------------------------------------------

弹性盒模型布局: display:flex(依靠参数设置规则,不太兼容)