CSS - 保姆级面试基础扫盲版本一

盒子模型

盒子模型定义:

当对一个盒子模型进行文档布局的时候,浏览器的渲染引擎会根据标准之一的CSS盒子模型(CSS basic box model),将所有元素表示成一个个矩阵盒子。

一个盒子通常由四部分组成:border padding content margin



html 复制代码
<style>
 .box {
 width: 200px;
 height: 100px;
 padding: 20px;
 }
</style>
<div class="box">
 盒子模型
</div>


标准盒子模型


IE 盒子模型:


Box-Sizing:

css 复制代码
box-sizing: content-box|border-box|inherit:

css 复制代码
<style>
 .box {
 width: 200px;
 height: 100px;
 padding: 20px;
 box-sizing: border-box;
 }
</style>
<div class="box">
 盒子模型
</div>

如何理解BFC

什么是BFC


BFC触发条件

应用场景

1 防止margin重叠(塌陷)

html 复制代码
<style>
 p {
 color: #f55;
 background: #fcc;
 width: 200px;
 line-height: 100px;
 text-align:center;
 margin: 100px;
 }
</style>
<body>
 <p>Haha</p >
 <p>Hehe</p >
</body>



html 复制代码
<style>
 .wrap {
 overflow: hidden;// BFC
 }
 p {
 color: #f55;
 background: #fcc;
 width: 200px;
 line-height: 100px;
 text-align:center;
 margin: 100px;
 }
</style>
<body>
 <p>Haha</p >
 <div class="wrap">
 <p>Hehe</p >
 </div>
</body>

清除内部浮动

html 复制代码
<style>
 .par {
 border: 5px solid #fcc;
 width: 300px;
 }
 .child {
 border: 5px solid #f66;
 width:100px;
 height: 100px;
 float: left;
 }
</style>
<body>
 <div class="par">
 <div class="child"></div>
 <div class="child"></div>
 </div>
</body>


css 复制代码
.par {
 overflow: hidden;
}

自适应多栏布局

html 复制代码
<style>
 body {
 width: 300px;
 position: relative;
 }
 .aside {
 width: 100px;
 height: 150px;
 float: left;
 background: #f66;
 }
 .main {
 height: 200px;
 background: #fcc;
 }
</style>
<body>
 <div class="aside"></div>
 <div class="main"></div>
</body>
css 复制代码
.main {
 overflow: hidden;
}


响应式设计

什么是响应式设计


实现方式

html 复制代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

媒体查询

css 复制代码
@media screen and (max-width: 1920px) { ... }
css 复制代码
@media screen (min-width: 375px) and (max-width: 600px) {
 body {
 font-size: 18px;
 }
}

百分比

vm/vh

rem

css 复制代码
@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标签。

javascript 复制代码
//动态设置元素字体的大小
function init () {
 var width = document.documentElement.clientWidth
 document.documentElement.style.fontSize = width / 10 + 'px'
}
// 首次加载只加载 只加载一次
init()
window.addEventListener('orientationchange', init);
window.addEventListener('resize', init);

小结



相关推荐
IT_陈寒11 分钟前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码22 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation30 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔10 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗10 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥10 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js