当前位置：首页 > news >正文

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

news 2024/10/29 3:15:18

盒子模型

盒子模型定义：
当对一个盒子模型进行文档布局的时候，浏览器的渲染引擎会根据标准之一的CSS盒子模型（CSS basic box model），将所有元素表示成一个个矩阵盒子。
一个盒子通常由四部分组成：border padding content margin

在这里插入图片描述

<style>.box {width: 200px;height: 100px;padding: 20px;}
</style>
<div class="box">盒子模型
</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 class="box">盒子模型
</div>

如何理解BFC

在这里插入图片描述

什么是BFC

在这里插入图片描述

BFC触发条件

在这里插入图片描述

应用场景

1 防止margin重叠（塌陷）

<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>

在这里插入图片描述

<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>

在这里插入图片描述

清除内部浮动

<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>

在这里插入图片描述

.par {overflow: hidden;
}

在这里插入图片描述

自适应多栏布局

<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>

在这里插入图片描述

.main {overflow: hidden;
}

在这里插入图片描述

响应式设计

在这里插入图片描述

什么是响应式设计

在这里插入图片描述

实现方式

在这里插入图片描述

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

在这里插入图片描述

媒体查询

在这里插入图片描述

@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);