CSS 学习笔记
2018-11-11 本文已影响0人
激萌咖啡
一、 行高 （line-height）
image.png
行高等于容器大小时，文字上下居中
过渡效果
1.变化的属性
- transition 变化属性 + 时间数
.text01:hover {
height: 300px;
line-height: 300px;
transition: height 3s;
transition: line-height 3s;
}
二、关于定位
2.1. 相对定位
父盒子
···
position: relative;
···
浮动的盒子
···
position: absolute
···
2.2. 浮动定位
···
position: fixed;
top： left： 相对于浏览器
···
2.3 使div绝对居中的方法
top: 50%;
left: 50%;
background-color: black;
transform: translateX(-50%) translateY(-50%);
三、关于div大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--<div class="div1">-->
<!--<span class="text01">杨尤艺</span>-->
<!--</div>-->
<div class="div2">
<div class="div2-1"></div>
<div class="div2-2"></div>
</div>
<div>
哈哈哈哈
</div>
<style>
.div1 {
width: 300px;
height: 300px;
background-color: aqua;
}
.text01 {
background-color: fuchsia;
display: block;
height: 200px;
line-height: 100px;
}
.text01:hover {
height: 300px;
line-height: 300px;
transition: height 3s;
transition: line-height 3s;
}
.div2 {
height: 300px;
width: 300px;
background-color: blue;
padding: 20px;
}
.div2-1 {
width: 400%;
height: 140%;
background-color: aqua;
float: left;
}
.div2-2{
width: 50%;
height: 150%;
background-color: black;
}
</style>
</body>
</html>
效果
image.png
父盒子浮动孩子元素，会占用父亲兄弟元素。但是父亲非浮动孩子不会拥挤兄弟元素（通常都需要保证父盒子大小一定包裹全部孩子元素）
3.2 父容器大小问题
（1）父容器大小在没设置的情况下，是由子元素最终大小撑开（包括自己的padding值）
（2）父容器内 浮动子元素不参与撑开体积，若需要计算浮动元素的大小撑开父盒子（在父盒子大小不确定的情况下可以在父容器 overflow: hidden; 使之重新计算父容器大小）
