盒子背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 400px;
background-image: url(../Day05/images/bg.jpg);
background-color: red;
/*
设置背景平铺方式
repeat-x水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺
*/
background-repeat: no-repeat;
/* 设置背景图片尺寸 auto 自适应 cover 覆盖*/
/* background-size: 100% 100%; */
/* 设置背景图片的位置 水平位置 垂直位置 */
background-position: 10px 10px;
/* 简写 颜色 背景图片 平铺方式 关联方式 位置*/
background: blue url(../Day05/images/bg.jpg) no-repeat 20px 0px;
}
body{
background-image: url(../Day05/images/bg-1024.jpg);
background-repeat: no-repeat;
/* 背景图片关联方式
fixed 不随滚动条滚动
默认scroll */
background-attachment: fixed;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css布局机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
/* display: inline-block; */
/* 浮动布局:可以让元素水平排版 float:left right none 对文字不影响
脱离文档流,原先位置不保留 飘在文档流上方 */
float:left;
}
p{
width: 100px;
height: 100px;
background-color:blue;
}
</style>
</head>
<body>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<p>段落标签</p>
</body>
</html>
浮动对兄弟元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
div:last-child{
background-color: blue;
/* 1.浮动元素对兄弟元素的影响 */
clear: both;
}
div:first-child{
float: left;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
浮动对父级元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 10px solid red;
margin-top: 10px;
}
.parent>div{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*2. 清楚浮动 在浮动元素和非浮动元素中间设置一个空标签,给空标签清浮动 */
.clear{
clear: both;
}
/* 3.清楚浮动 子元素浮动给父元素清楚浮动 */
.parent:nth-child(2)::after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="parent">hello css</div>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!-- <div class="clear"></div> -->
<div class="parent">hello css</div>
</body>
</html>
自围浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float: left;
}
</style>
</head>
<body>
<img src="../Day05/images/bg.jpg" alt="">
<div>
块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素
</div>
</body>
</html>
笔记
高度塌陷?
给子元素设置浮动后,父元素失去了高度支撑,发生高度塌陷。
解决方案:
1.给父元素设置高度
2.给父元素清除浮动 使用伪元素清除浮动
::after{
display:block;
content:"";
clear:both
}
css中外边距合并问题?*************
兄弟级外边距合并
原因:一个兄弟元素设置了下外边距,另一个兄弟元素设置了上外边距,发生外边距合并现象
合并规则:{
1.如果两个值都为正数,取最大外边距合并
2.如果一个值是正数,另一个值是负数 取外边距之和
3.如果两个值都为负数,取最小外边距绝对值进行缩减
}
解决方案:
1.给其中一个元素设置外边距,另一个不设置
2.给下方兄弟元素元素开启BFC
3.
父子级外边距合并
原因:给子元素和父元素设置同一方向外边距就发生合并现象
合并规则:{
1.如果两个值都是正数,取最大的外边距合并
2.如果一个值是正数,另一个值是负数,取外边距之和
}
解决方案:
1.给父元素设置内边距,不给子元素设置外边距,可以将父元素设置为border-box
2.给父元素设置一个边框
3.给父元素开启BFC
BFC(Block Formatting Context)块级格式化上下文,把BFC当作是元素的一种属性,
只要元素拥有了这种属性,就成为独立的一块渲染区域,容器内的元素不会影响到容器外的元素
1.如何触发BFC
1.html
2.float不为none
3.position为absolute和fixed
4.display:inline-block
5.overflow不为visible hidden auto
2.BFC作用:
1.避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖
4.两列布局
5.三列布局