学习目标:
掌握:
字体属性
怪异盒模型
标准盒模型
盒子属性
三角形写法
当一个块标签中嵌套一个块级标签,也可以使用文字对齐方式进行左右或者上下对齐
盒模型:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
border: 20px solid pink;
padding: 20px;
margin: 20px;
/* box-sizing: content-box; */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<span>小天才阿展</span>
</div>
</body>
</html>
box-sizing默认content-box怪异盒模型
盒子宽度=width+padding+border
盒子高度= height+padding+border
box-sizing: border-box标准盒模型:
盒子宽度=width
盒子高度=height
/* transform: translateX(0px) translateY(0px) scaleX(1) scaleY(1); */
transform变换 translate 位移 scale缩放倍数 缩放以盒子中心为基点
位移和margin都可以实现 盒子居中对齐
区别:margin范围内不能有别的元素 位移的范围内可以
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div {
width: 0;
border: 50px solid transparent;
border-top: 50px solid skyblue;
/*
三角形要记得设置宽度为0
三角形底边为100px
border-left为50px
border-right为50px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transparent透明色
.d1:hover{}伪类选择器 里面样式 在鼠标经过时显示
background-color:rgba(x,y,z,n)
x,y,z红绿蓝范围0~255
n范围0~1 0为透明