box-sizing功能，相对定位/绝对定位
box-sizing
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>box-sizing</title>
<style>
/ 初始化 /
{
margin: 0;
padding: 0;
/ 将盒子的padding 和border 计算在width，height内 /
box-sizing: border-box;
}
html {
font-size: 16px;
}
/ em rem /
/ em :根据元素上下文来确定它的值 /
/ rem :根据元素的字号来设置 /
.box {
font-size: 16px;
width: 20rem;
height: 20rem;
border: 2px solid;
/ padding: 上，右，下，左;顺时针顺序 /
padding: 10px 5px 5px 10px;
/ 三值：左右相同，而上下不同 /
padding: 8px 10px 8px;
/ 二值进行简化 /
padding: 8px 10px;
background-color: lightseagreen;
/ 再转为标准盒子 */
box-sizing: content-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
<hr/>
视口
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vh /vw</title>
<style>
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/ 视口：可视窗口，手机端为了显示全PC页面，默认为980px /
/ vh :1vh = 视口高度的1/100，vh =view height /
/ vw :1vw =视口宽度的1/100，vw =view width /
.box {
background-color: limegreen;
width: 50vw;
height: 25vh;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<hr/>
##相对定位/绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位</title>
<style>
/ html {
border: 1px solid black;
} /
.box {
width: 20em;
height: 15em;
background-color: lightgreen;
/ 默认：静态定位，就是没有定位 /
/ position: static; /
/ 相对定位：自动转为定位元素 /
/ 定位元素：只要这个元素上有非static的定位属性，就是定位元素 /
/ position: relative; /
/ 只要是定位元素，定位偏移量有效 /
/ 相对于它在文档流中的原始位置进行定位 /
/ top: 5em;
left: 4em; /
/ 绝对定位 /
position: absolute;
/ 绝对定位元素脱离了文档流 /
/ 文档流:显示顺序与书写顺序一致 /
top: 5em;
left: 4em;
}
.parent {
border: 1px solid #000;
/ ]转为定位元素,作为绝对定位元素的定位父级/定位参考/定位包含块 */
position: relative;
top: 4em;
left: 4em;
min-height: 30em;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>
更多相关文章
- 【CSS入门】CCS基本语法和常用选择器的使用方法
- 【CSS入门】学习CSS盒模型及常用样式属性详解（整理）
- 浅谈Java：Stack浅析
- css元素选择器
- HTML选择器和JS基础
- 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现
- 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
- 0322作业-css基本语法、选择器及模块化开发
- css基础、选择器、模块化组件