目录
浮动的使用
float元素
可以让块属性元素排成一行
浮动会让行属性元素支持设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #AAFFFF;
/* 让行属性支持宽高 */
/* display: inline-block; */
/* 浮动:left、right
让块属性元素排成一行时候使用浮动
碰到父元素边缘会停下来
*/
/* float: left; */
float: right;
}
.one{
/* 字体大小 默认16px 最小8px */
font-size: 20px;
/* margin-top: 100px; */
}
</style>
</head>
<body>
<div class="one">1</div>
<div>2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
width: 100px;
height: 100px;
background-color: #AAFFFF;
/* 浮动会让行属性元素支持设置宽高 */
float: left;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
</body>
</html>
清除浮动影响
1:给父元素设置overflow: hidden;
2.在父元素最后加一个设置了clear:bth;块属性元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
background-color: #00FFFF;
/* 解决:给父元素设置overflow: hidden; */
/* overflow: hidden; */
}
.father::after{
content: '';
display: block;
clear: both;
}
.son{
width: 200px;
height: 200px;
background-color: #FFFF00;
float: left;
}
.three{
width: 300px;
height: 300px;
background-color: #FF0000;
}
</style>
</head>
<body>
<!-- 当父元素不设置高度,高度由子元素撑开的时候
一旦子元素浮动,就会脱离父元素,父元素就会失去高度
会影响后面元素布局
--><!-- 解决
1:给父元素设置overflow: hidden;
2.在父元素最后加一个设置了clear:bth;块属性元素
-->
<div class="father">
<div class="son"></div>
<!-- <div style="clear: both;"></div> -->
</div>
<div class="three"></div>
</body>
</html>
伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 添加相同的内容 */
p::before{
/* content:添加内容 */
content: 'QQ号:';
color: #AAFFFF;
}
p::after{
content: '@qq.com';
color: #FFFF7F;
}
</style>
</head>
<body>
<p>123456</p>
<p>234567</p>
<p>345678</p>
</body>
</html>
设置颜色
颜色
/* 16进制 */
/* background-color: #AAFFFF; */
/* 英文单词 */
/* background-color: darkcyan;*/
/* rgb值 每个值都在0-255*/
background-color: rgb(0,255,0);
透明度
opacity设置透明度
rgba设置透明色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.out{
width: 100px;
height: 100px;
/* background-color: #FF0000; */
/* 透明度 0-1(默认1)
透明度会继承给子元素
*/
/* opacity: 0.5; */
/* 设置透明色 */
background-color: rgba(255,0,0,0.5);
}
.in{
width: 50px;
height: 50px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
背景图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 400px;
height: 400xp;
background-color: #AAFFFF;
/* 背景图片 */
background-image: url();
/* 背景图片大小
一个值 横向固定 纵向自适应
两个值 横向和纵向大小
cover 平铺 会切掉一部分
contain 宽度和高度等比例自适应,可能撑不满 */
/* background-size: 400px; */
/* background-size: 400px 400px; */
/* background-size: cover;*/
background-size: contain;
/* 背景是否重复 */
background-repeat: no-repeat;
/* 背景图位置
左上角是0,0点 x向右正方向 y向下正方向
两个值 x轴方向偏移量 y轴偏移量
x轴 left right center
y轴 top bottom center
*/
/* background-position:100px 100px; */
background-position-x:center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>