02-display属性–元素互相转换
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--通常会去掉标签自带的内外边距, *表示所有标签-->*/
*{margin: 0;padding: 0}
.box01{
width: 100px;
height: 100px;
border: 1px solid red;
/*1. 把div转为行内块*/
display: inline-block;
/*转为行内元素*/
/*display: inline;*/
font-size: 16px;
}
/*2. 把span转为行内块*/
span{
/*转为行内块*/
display: inline-block;
/*转为块元素*/
/*display: block;*/
/*隐藏*/
/*display: none;*/
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 16px;
}
.box{
/*font-size: 0;*/
letter-spacing: 0;
}
</style>
</head>
<body>
<div class="box">
<!--解决行内块,外边距去不掉问题-->
<!--由换行符引起的,把换行符变成了空格-->
<!--解决方式一:不换行-->
<!--解决方式一:把父元素字体大小设为0,子元素重新设置字体大小-->
<div class="box01">1111</div>
<span>2222</span>
</div>
</body>
</html>
运行结果
03-标签转换–布局练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐网站</title>
<style>
*{
margin: 0;padding: 0;
/*去掉li标签样式*/
list-style: none;
}
ul{
width: 400px;
border: 1px solid red;
/*去掉行内块之间的空格*/
font-size: 0;
/*利用外边距margin,实现水平居中,并且窗口缩放,任然居中*/
margin: 0px auto;
}
ul>li{
width: 100px;
height: 50px;
border: 1px solid red;
/*转为行内块*/
display: inline-block;
font-size: 16px;
/*保证盒子大小,不受边框和padding影响*/
box-sizing: border-box;
/*设置行高等于父元素高度,实现垂直居中*/
line-height: 50px;
/*设置文本,水平居中*/
text-align: center;
}
/*伪类选择器,鼠标进入时,改变样式*/
ul>li:hover{
background-color: #5e5e5e;
}
.box{
width: 600px;
height: 100px;
background-color: #5bc0de;
/*默认隐藏*/
display: none;
}
/*鼠标进入后,显示隐藏的块*/
ul>li:hover .box{
display: block;
}
</style>
</head>
<body>
<ul>
<li>欧美
<div class="box"></div>
</li>
<li>日韩
<div class="box"></div>
</li>
<li>港台
<div class="box"></div>
</li>
<li>大陆
<div class="box"></div>
</li>
</ul>
</body>
</html>
04-overflow处理溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
/*图片溢出,清除内部元素对外部元素的影响*/
/*设置hidden隐藏, 把溢出部分剪切*/
overflow: hidden;
/*设置为auto自动,判断是否溢出,有溢出则添加滚动条*/
/*overflow: auto;*/
/*设置scroll滚动,添加滚动*/
/*overflow: scroll;*/
/*默认值visible,可见*/
/*overflow: visible;*/
}
</style>
</head>
<body>
<div class="box">
<img src="./images/timg.jpg" alt="">
<!--<img src="./images/111.jpg" alt="">-->
</div>
</body>
</html>
05-浮动float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box01{
width: 400px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
}
.box02{
width: 100px;
height: 100px;
background-color: #a94442;
/*添加浮动*/
/*1.可以设置左浮动,或者右浮动*/
/*2.浮动会脱离文档流,会将后面的元素覆盖*/
/*3.不会覆盖文字*/
/*4.碰到父元素或者前面右浮动元素,则停止浮动*/
/*5.浮动元素排在一行,总宽度超过父元素,则自动换一行*/
/*6.如果前面有未浮动的元素 会另起一行进行浮动*/
float: left;
}
.box03{
width: 110px;
height: 110px;
background-color: #5bc0de;
float: left;
}
.box04{
width: 110px;
height: 110px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<div class="box03">2222aeehtsrjytuyg</div>
<div class="box04">3333</div>
</div>
</body>
</html>
06-浮动后父元素高度撑不开问题–4种解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box01{
width: 300px;
/*1. 解决撑不开问题方案一:父元素添加高度*/
/*缺点:高度往往不能写死*/
/*height: 300px;*/
border: 5px solid red;
/*2.解决撑不开问题方案二:父元素添加 overflow: hidden;*/
/*设置隐藏,把溢出部分剪切*/
/*父元素没有高度,没有剪切的标准,以子元素高度去剪切*/
/*找到子元素的高度,父元素又能撑开了*/
/*overflow: hidden;*/
}
.box02{
width: 100px;
height: 100px;
background-color: #5bc0de;
/*浮动后,如果父元素没有设置高度,则导致父元素撑不开*/
float: left;
}
/*!*3.解决撑不开问题方案三:添加空白标签,清除两边浮动影响*!*/
/*!*缺点:添加了一个多余的空标签*!*/
/*.box03{*/
/*!*清除2边浮动影响*!*/
/*!*left right both*!*/
/*clear: both;*/
/*}*/
/*4. 解决撑不开问题方案四:给父元素添加伪元素 after*/
/*原理和方案3相同,但是不会添加多余的空标签*/
.box01:after{
/*在box01后面添加一个空字符*/
content: '';
/*把空字符变为块元素*/
display: block;
/*清除两边浮动影响*/
clear: both;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<!--<div class="box03"></div>-->
</div>
</body>
</html>
07-相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
.box01{
width: 300px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
}
.box02{
width: 100px;
height: 100px;
background-color: gold;
/*定位属性: 相对定位*/
/*1.相对定位,没有脱离文档流*/
/*2.参考点:是原来位置的起始点,相对于父元素*/
position: relative;
top: 50px;
left: 20px;
}
.box03{
width: 100px;
height: 100px;
background-color: red;
/*添加定位属性*/
position: relative;
/*定位层级/权重, 值越大,显示在最上面*/
z-index: 1;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<div class="box03">2222</div>
</div>
</body>
</html>
08-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
.box01{
width: 300px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
/*给父元素添加定位属性*/
/*position: relative;*/
}
.box02{
width: 100px;
height: 100px;
background-color: gold;
/*绝对定位:*/
/*1.绝对定位:脱离了文档流*/
/*2.参考点:如果父元素有定位属性,则相对父元素的起始位置*/
/*如果父元素没有定位属性,找父元素的上一级,找到body为止*/
position: absolute;
top: 20px;
left: 50px;
}
.box03{
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<div class="box03">2222</div>
</div>
</body>
</html>
10-小米侧边栏练习–绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;list-style: none}
ul{
width: 200px;
background-color: rgba(105, 101, 101, 0.6);
/*给ul设置定位属性,把ul作为参考点*/
position: relative;
margin-left: 50px;
margin-top: 50px;
}
ul>li{
width: 200px;
height: 80px;
border: 1px solid red;
/*保证盒子大小不变,不受padding和border影响*/
box-sizing: border-box;
line-height: 80px;
text-align: center;
}
.box{
width: 500px;
height: 320px;
background-color: #5bc0de;
/*绝对定位*/
position: absolute;
top: 0px;
left: 200px;
display: none;
}
ul>li:hover{
background-color: green;
}
/*伪类选择器,显示box*/
ul>li:hover .box{
display: block;
}
</style>
</head>
<body>
<ul>
<li>手机
<div class="box"></div>
</li>
<li>电视
<div class="box" ></div>
</li>
<li>空调
<div class="box"></div>
</li>
<li>扫地机器人
<div class="box"></div>
</li>
</ul>
</body>
</html>