05-外边距塌陷+并集选择器+块元素的宽度+img底部留白的问题
1.外边距塌陷
<html lang="en">
<head>
<style type="text/css">
/*
1 嵌套的两个块元素，给第一个子元素设置外边距，此时父元素会跟着掉下来，形成外边距塌陷。
2 外边距塌陷的解决方法。
1 给父元素设置上边框。
2 给父元素设置overflow属性。
3 给父元素设置浮动。
4 给子元素设置浮动。
*/
.box {
width: 200px;
height: 200px;
background: red;
/* transparent，透明色。 */
border-top: 1px solid transparent;
}
.phone {
width: 50px;
height: 80px;
background: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="phone"></div>
<div class="phone" style="background: orange;"></div>
</div>
</body>
</html>
2.overflow属性
<html lang="en">
<head>
<style type="text/css">
/*
1 overflow，溢出属性。
hidden 溢出隐藏，隐藏溢出的部分。
scroll，溢出滚动，不管是否溢出都有滚动条的边框，如果溢出则会有滚动条。
auto 当内容超出元素时，自动设置滚动条。
*/
.box1 {
width: 100px;
height: 100px;
background: gray;
overflow: auto;
}
.box2 {
width: 100px;
height: 100px;
background: orange;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.box4 {
width: 100px;
height: 100px;
background: gray;
/* 强制换行 */
word-break: break-all;
}
.box5 {
width: 100px;
height: 100px;
background: orange;
/* 强制不换行 */
white-space: nowrap;
/* 设置字间距 */
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="box1">
学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校
</div>
<!-- 英语使用单词分割，所以即使一个英文单词的宽度超过了盒子宽度，也会进行自动换行。 -->
<div class="box2">
tomtomtomtomtomtomtomtomtom
</div>
<!-- 对于英语，想让一个单词换行，可以通过加空格完成。 -->
<div class="box3">
tomtomtom tomtom
</div>
<div class="box4">
tomtomtomtomtomtomtomtomtom
</div>
<!-- 中文使用一个汉字分割，所以会自动换行。 -->
<div class="box5">
学校学校学校学校学校学校学校学校
</div>
</body>
</html>
3.块元素水平居中
/* 通过给块元素设置margin: 0 auto;，让其水平居中于父元素。 */
.box {
width: 800px;
height: 500px;
background: red;
margin: 0 auto;
}
.phone {
width: 200px;
height: 100px;
background: green;
margin: 0 auto;
}
4.并集选择器
<html lang="en">
<head>
<style type="text/css">
/* 并集选择器：将多个选择器使用逗号隔开，实现共同的属性。 */
.box span,.box p {
color: red;
}
</style>
</head>
<body>
<div class="box">
<span>span</span>
<p>p</p>
</div>
</body>
</html>
5.清楚标签默认样式
/* 1 *可以看做是标签选择器，会匹配html所有的标签。 */
/* 2 清除标签默认样式。有些标签会自带一些属性，所以需要清零或者初始化这些标签的属性。*/
/* 3 第一种清除标签默认样式的方式。这种方式会清除所有标签的样式，效率不高，不能在项目中使用。 */
* {
padding: 0;
margin: 0;
}
/* 4 第二种清除标签默认样式的方式。使用并集选择器清除，这样方式执行效率，在工作经常使用。 */
body, h1, h2, h3, ul, ol, dl, dt, dd, p{
margin: 0;
padding: 0;
}
6.块元素的宽度
<html lang="en">
<head>
<style type="text/css">
/*
1 块元素在不设置固定宽度的情况下，宽度和父元素的content区域一样。
2 块元素的面积组成，margin+border+padding+content。
3 如果块元素没有设置width，则块元素的content=父元素content-块元素margin-块元素border-块元素padding；
如果块元素设置了width，则块元素的content就是width值。
*/
.box {
width: 1000px;
height: 800px;
margin: 0 auto;
background: green;
padding-left: 100px;
}
.phone {
height: 200px;
background: red;
padding-left: 100px;
border-left: 100px solid blue;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="phone"></div>
</div>
</body>
</html>
7.练习-爱宠知识
<html lang="en">
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
/* 清除无须列表的小点，清除有序列表的数字。 */
list-style: none;
}
body {
background: #333;
}
.box {
width: 240px;
padding: 10px;
background: url("./img/bg.gif");
margin: 50px auto 0;
}
.box h3 {
color: #fff;
font-size: 20px;
font-family: "黑体";
border-left: 4px solid #c9e143;
padding-left: 5px;
}
.box ul {
background: #fff;
margin-top: 5px;
}
.box ul li {
padding: 0 10px;
height: 30px;
line-height: 30px;
}
.box ul li a {
text-decoration: none;
/* 这里可以a标签转换为块元素也可以转换为行内块元素。转换为块元素的好处是继承了元素的宽，不需要在设置宽。 */
display: block;
color: #06f;
font-size: 12px;
border-bottom: 1px dashed #666;
padding-left: 19px;
background: url("./img/tb.gif") no-repeat 6px center;
}
.box ul li a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h3>爱宠知识</h3>
<ul>
<li><a href="##">养狗比养猫对健康更有利</a></li>
<li><a href="##">养狗比养猫对健康更有利</a></li>
<li><a href="##">养狗比养猫对健康更有利</a></li>
<li><a href="##">养狗比养猫对健康更有利</a></li>
<li><a href="##">养狗比养猫对健康更有利</a></li>
</ul>
</div>
</body>
</html>
8.练习-新浪博客
<html lang="en">
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 238px;
height: 212px;
border: 1px solid #d9e0ee;
border-top: 3px solid #ff8500;
margin: 100px auto 0;
}
.box h3 {
border-bottom: 1px solid #d9e0ee;
height: 35px;
line-height: 35px;
font-size: 16px;
font-weight: 400;
}
.box h3 a{
text-decoration: none;
color: #000;
margin-left: 12px;
}
.box .banner {
width: 180px;
height: 108px;
margin: 7px auto 0;
}
.box .banner a {
text-decoration: none;
}
.box .banner a img {
display: block;
}
.box .banner a span {
background: #000;
display: block;
color: #fff;
font-size: 14px;
height: 21px;
line-height: 21px;
text-align: center;
}
/* 鼠标移入a之后，改变span中文本的颜色。 */
.box .banner a:hover span {
color: #ff8500;
}
.box .list {
margin-top: 10px;
}
.box .list li {
padding-left: 19px;
background: url("./img/dian.png") no-repeat 9px center;
line-height: 24px;
height: 24px;
font-size: 12px;
}
.box .list li a {
text-decoration: none;
color: #666;
}
</style>
</head>
<body>
<div class="box">
<h3>
<a href="#">图片博客</a>
</h3>
<div class="banner">
<a href="#">
<img src="./img/banner.jpg">
<span>图片博客图片博客</span>
</a>
</div>
<ul class="list">
<li><a href="#">高考15分爸爸教四岁女儿学数学</a></li>
<li><a href="#">优秀应届毕业生都去了什么行业？</a></li>
</ul>
</div>
</body>
</html>
9.img底部留白的问题
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-img底部留白</title>
<style type="text/css">
/*
1 由于img是行内块元素，底部和默认会和文本的基线对齐，所以底部会有一部分留白。
2 解决img底部留白的两个方法。
1 将img转换为块元素，display: block;。
2 将img父元素的字体大小设置为0（font-size: 0;），不推荐使用。
*/
.box {
border: 1px solid red;
/*font-size: 0;*/
}
.box img {
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/timg.jpg">
</div>
</body>
</html>
浙公网安备 33010602011771号