建设工程设计招标信息网站.,网站建站查询,wordpress采集优酷视频,wordpress站点标题字体盒子模型
盒子模型定义#xff1a; 当对一个盒子模型进行文档布局的时候#xff0c;浏览器的渲染引擎会根据标准之一的CSS盒子模型#xff08;CSS basic box model#xff09;#xff0c;将所有元素表示成一个个矩阵盒子。 一个盒子通常由四部分组成#xff1a;border p…盒子模型
盒子模型定义 当对一个盒子模型进行文档布局的时候浏览器的渲染引擎会根据标准之一的CSS盒子模型CSS basic box model将所有元素表示成一个个矩阵盒子。 一个盒子通常由四部分组成border padding content margin style.box {width: 200px;height: 100px;padding: 20px;}
/style
div classbox盒子模型
/div标准盒子模型 IE 盒子模型 Box-Sizing:
box-sizing: content-box|border-box|inherit:style.box {width: 200px;height: 100px;padding: 20px;box-sizing: border-box;}
/style
div classbox盒子模型
/div如何理解BFC 什么是BFC BFC触发条件 应用场景
1 防止margin重叠塌陷
stylep {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
/style
bodypHaha/p pHehe/p
/bodystyle.wrap {overflow: hidden;// BFC}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
/style
bodypHaha/p div classwrappHehe/p /div
/body清除内部浮动
style.par {border: 5px solid #fcc;width: 300px;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
/style
bodydiv classpardiv classchild/divdiv classchild/div/div
/body.par {overflow: hidden;
}自适应多栏布局
stylebody {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;}
/style
bodydiv classaside/divdiv classmain/div
/body.main {overflow: hidden;
}响应式设计 什么是响应式设计 实现方式 meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno”媒体查询 media screen and (max-width: 1920px) { ... }media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px;}
}百分比 vm/vh rem media screen and (max-width: 414px) {html {font-size: 18px}
}
media screen and (max-width: 375px) {html {font-size: 16px}
}
media screen and (max-width: 320px) {html {font-size: 12px}
}为了更加准确的监听前端可视窗口的变化可以在css之前插入javaScript标签。
//动态设置元素字体的大小
function init () {var width document.documentElement.clientWidthdocument.documentElement.style.fontSize width / 10 px
}
// 首次加载只加载 只加载一次
init()
window.addEventListener(orientationchange, init);
window.addEventListener(resize, init);小结
