1. 常用的长度单位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>常用的长度单位</title>
<style>
/* 像素 px */
#d1 {
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
}
/* 相对于当前元素或其父元素的font-size的倍数 em */
#d2 {
width: 10em;
height: 10em;
/* font-size: 20px; */
background-color: skyblue;
}
/* 相对于根元素的font-size的倍数 rem */
#d3 {
width: 5rem;
height: 5rem;
font-size: 20px;
background-color: skyblue;
}
/* 相对其父元素的百分比 */
#d4 {
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
}
.inside {
width: 50%;
height: 25%;
font-size: 150%;
background-color: gray;
}
</style>
</head>
<body>
<div id="d1">1</div>
<hr>
<div id="d2">2</div>
<hr>
<div id="d3">3</div>
<hr>
<div id="d4">
<div class="inside">4</div>
</div>
<hr>
</body>
</html>2. 元素的显示模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素的显示模式</title>
<style>
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: skyblue;
}
#d2 {
background-color: orange;
}
#d3 {
background-color: green;
}
.one {
background-color: skyblue;
}
.two {
background-color: orange;
}
span {
width: 200px;
height: 200px;
}
img {
width: 150px;
}
</style>
</head>
<body>
<!--
块元素：
1.在页面中独占一行，不会与任何元素共用一行，是从上到下排列的
2.默认宽度：撑满父元素
3.默认高度：由内容撑开
可以通过CSS设置宽高
-->
<div id="d1">举头望明月</div>
<div id="d2">低头思故乡</div>
<div id="d3">千山鸟飞绝</div>
<hr>
<!--
行内元素：
1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
2.默认宽度：由内容撑开
3.默认高度：由内容撑开
无法通过CSS设置宽高
-->
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<span class="one">孤舟蓑笠翁</span>
<span class="two">独钓寒江雪</span>
<hr>
<!--
行内块元素（内联块元素）：
1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
2.默认宽度：由内容撑开
3.默认高度：由内容撑开
可以通过CSS设置宽高
-->
<img src="../images/touxiang.jpg">
<img src="../images/touxiang.jpg">
<img src="../images/touxiang.jpg">
</body>
</html>总结各元素的显示模式.png
3. 修改元素的显示模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改元素的显示模式</title>
<style>
/*
display:
none 元素会被隐藏
block 元素将作为块级元素显示
inline 元素将作为内联元素显示
inline-block 元素将作为行内块元素显示
*/
div {
font-size: 20px;
width: 200px;
height: 200px;
display: inline-block;
}
#d1 {
background-color: skyblue;
}
#d2 {
background-color: olivedrab;
}
#d3 {
background-color: orange;
}
a {
font-size: 20px;
width: 200px;
height: 200px;
display: block;
}
#a1 {
background-color: skyblue;
}
#a2 {
background-color: orange;
}
#a3 {
background-color: green;
}
</style>
</head>
<body>
<div id="d1">孙笑川</div>
<div id="d2">刘波</div>
<div id="d3">药水哥</div>
<hr>
<a id="a1" href="https://www.baidu.com">去百度</a>
<a id="a2" href="https://www.jd.com">去京东</a>
<a id="a3" href="https://www.toutiao.com">去头条</a>
</body>
</html>4. 盒子模型的组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子模型的组成部分</title>
<style>
/*
CSS会把所有的HTML元素都看成一个盒子，所有的样式也都基于这个盒子
1.margin（外边距）：盒子与外界的距离，如电脑包装盒纸箱与墙角的距离
2.border（边框）：盒子的边框
3.padding（内边距）：紧贴内容的补白区域
4.content（内容）：元素中的文本或后代元素都是它的内容
盒子的大小 = content + 左右padding + 左右border
注：外边距margin不会影响盒子的大小，但会影响盒子的位置
*/
div {
/* 内容区的宽高 */
width: 400px;
height: 400px;
/* 内边距 */
padding: 20px;
border: 10px solid black;
font-size: 20px;
background-color: gray;
}
</style>
</head>
<body>
<div>带带大师兄</div>
</body>
</html>5. 盒子的内容区
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的内容区_content</title>
<style>
div {
/* 注：width与min-width一般不一起使用，height同理 */
width: 800px;
/* min-width: 600px; */
/* max-width: 1000px; */
height: 200px;
/* min-height: 50px; */
/* max-height: 400px; */
background-color: skyblue;
margin: 0px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium quibusdam eius sapiente voluptatem iure maiores at culpa ea tenetur aspernatur aperiam obcaecati fugit adipisci, architecto ex aliquam. Nostrum voluptatum possimus ipsa id repudiandae omnis dignissimos odio, praesentium, distinctio odit at. Dolorem quia fuga laboriosam reprehenderit ab quasi alias repudiandae, impedit quisquam perferendis praesentium veritatis totam? Ipsa laudantium, ab magnam minus natus delectus optio quis nulla voluptatibus ratione enim quod qui mollitia accusamus dolores cum doloribus dolorum non commodi fuga hic sequi nihil repellendus eius? Quos possimus nostrum numquam repellendus labore nemo minus accusantium sapiente. Aspernatur qui amet unde, iusto perspiciatis eveniet voluptates quae facilis voluptatem ipsa non illo? Aliquam odio corporis perferendis, laudantium architecto, recusandae temporibus, quasi animi repudiandae sit velit sed. Illum tenetur nostrum aspernatur perspiciatis accusamus, dolore a adipisci at. Eius quas et assumenda odit exercitationem quidem cum magnam distinctio sed, quibusdam repellat alias atque est, numquam obcaecati neque at deserunt delectus impedit! Tempore officia modi distinctio hic aliquam rerum, illum a autem, ipsum aperiam tenetur illo quasi maxime exercitationem tempora excepturi totam repellendus itaque cupiditate sed corrupti delectus. Iure totam minus pariatur, corrupti necessitatibus quaerat voluptates. Ab velit enim fuga blanditiis quia amet. Perferendis iusto laborum dicta sint unde, cupiditate facere possimus corrupti mollitia cumque quos beatae incidunt. Voluptatum nihil ipsam aspernatur consequuntur fugiat suscipit at beatae accusamus facilis? Quos, eaque obcaecati deleniti voluptate necessitatibus mollitia unde eos, ea molestiae asperiores amet beatae aliquid ipsam vero dicta corporis fugiat facilis consequatur pariatur nostrum atque! Eveniet amet voluptatem molestias in illo. Ipsum porro impedit doloremque ut facilis eum repellendus error est magnam sed rerum quas harum, debitis odio sit atque excepturi dolorem fugit dolor nisi magni cupiditate nulla. Dicta vel dolore explicabo ut, ratione necessitatibus deleniti error doloribus enim nisi consequatur accusamus, rem culpa blanditiis inventore ex et adipisci sint harum laborum! Quis cum delectus, tempora aliquam placeat, voluptates deserunt amet cupiditate voluptatem quod perspiciatis? Fuga enim obcaecati dolorem quas hic dignissimos temporibus ea ipsam? Fugiat unde, id delectus itaque nesciunt sit consectetur mollitia amet enim, deleniti autem possimus ea quaerat similique ex corrupti quos cupiditate error harum expedita. Ipsam cumque possimus reprehenderit incidunt eaque recusandae repudiandae sed aperiam ratione, corrupti vero quos animi fugit? Minus nam sit temporibus quibusdam voluptate repellendus quis voluptatem mollitia dolorum, voluptas vel error iure quos similique? Aperiam reprehenderit saepe expedita cupiditate a asperiores voluptatem illum qui fugit quaerat corrupti placeat veritatis non, quisquam at quos maxime soluta exercitationem neque velit dolorem culpa itaque pariatur mollitia! Nam consequatur exercitationem incidunt architecto, doloribus magni aliquam officiis tenetur debitis numquam at reprehenderit ex ea blanditiis a quidem ad totam recusandae sint? Doloremque quidem quasi quaerat non distinctio cupiditate molestias eos. Doloribus, quidem? Sit vero dolorum vel eum, deleniti unde aut ipsam, debitis, nulla ut explicabo reprehenderit pariatur nisi eos! Eum accusantium neque, est temporibus saepe omnis corrupti adipisci totam, voluptatibus, tempora sit sunt maiores harum ratione illum aliquam alias iste laboriosam! Maxime explicabo necessitatibus, possimus officiis nesciunt odit eveniet ab iusto commodi eligendi sed, excepturi distinctio similique vero non quidem perspiciatis amet, nobis consectetur. Explicabo, aspernatur velit ex exercitationem, expedita iusto deleniti corrupti optio, accusantium quaerat fuga. Sit animi eligendi exercitationem error minus, aliquid quaerat culpa nulla deserunt distinctio modi pariatur et provident inventore? Ipsa, nostrum perspiciatis magni adipisci numquam nemo ab enim quam quaerat facilis quia at laboriosam animi quas eum porro eaque obcaecati. Odio dolorem impedit iste at suscipit dolore eligendi beatae assumenda a velit veniam in tempore, magni tenetur dolor voluptatum distinctio. Provident reiciendis quod voluptatum incidunt inventore unde, minima illum, nobis fugit similique fugiat aspernatur. Possimus eligendi eos esse excepturi, hic molestias ex veniam dolorem porro ad quae sint doloremque saepe. Illo perferendis expedita dolore tempora quae qui esse minima ea eligendi at dicta iusto veniam aperiam cumque, voluptate nam ipsam asperiores! Rerum ea sint sapiente architecto officiis sequi non nulla mollitia nihil quaerat earum inventore delectus, ipsam dolor. Repellat nam similique quaerat deleniti, saepe atque. Neque rerum inventore odio! Temporibus at odit odio cum non quia deserunt officiis incidunt ad accusantium, nemo fuga quas sit itaque, aliquid voluptatibus, debitis ab obcaecati. Provident repellendus ad, delectus, eaque alias vel magnam qui recusandae temporibus magni et dicta ratione cumque sint dignissimos aliquid quia nobis. Placeat, earum. Molestiae similique ipsum explicabo saepe veritatis accusantium magni sed voluptates cumque iusto nobis totam porro placeat qui autem accusamus, numquam beatae! Tempora unde pariatur repellendus, officiis vel fugit dicta ullam quae voluptatum a repellat aperiam velit nam consequuntur, quo labore, officia tempore in veritatis asperiores corrupti. Quae qui nihil unde quasi corrupti iure reiciendis recusandae amet quia vero placeat perferendis sequi eum, sed mollitia illo expedita commodi voluptatum a, obcaecati eius provident consequuntur, voluptatem cupiditate. Laboriosam aliquid rerum tenetur tempore sed similique porro deserunt aspernatur minus voluptatibus eum ab maxime qui, et labore mollitia velit aliquam.</div>
</body>
</html>6. 默认宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关于默认宽度</title>
<style>
/*
默认宽度：不设置width属性时，元素所呈现出来的宽度
总宽度 = 父的content - 自身左右的margin
内容区的宽度 = 父的content - 自身左右的margin - 自身左右的border - 自身左右的padding
*/
div {
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div>带带大师兄</div>
</body>
</html>7. 盒子的内边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的内边距</title>
<style>
#d1 {
width: 400px;
height: 400px;
/* 左侧内边距，其他方向同理 */
/* padding-left: 20px; */
/* 复合属性，写一个值：四个方向的内边距是一样的 */
/* padding: 20px; */
/* 复合属性，写两个值：上下、左右 */
/* padding: 10px 20px; */
/* 复合属性，写三个值：上、左右、下 */
padding: 10px 20px 30px;
/* 复合属性，写四个值：上、右、下、左 */
padding: 10px 20px 30px 40px;
font-size: 20px;
background-color: skyblue;
}
/* 行内元素的左右边距设置没问题，上下边距不能完美的设置 */
span {
font-size: 20px;
background-color: orange;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
/* 块级元素、行内块级元素，四个方向的内边距都可以完美的设置 */
img {
padding: 20px;
}
</style>
</head>
<body>
<div id="d1">带带大师兄</div>
<hr>
<span>药水哥</span>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, veritatis.</div>
<hr>
<img src="../images/touxiang.jpg" alt="">
<div>有遮挡吗，没有</div>
</body>
</html>8. 盒子的边框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的边框_border</title>
<style>
div {
width: 400px;
height: 400px;
font-size: 20px;
background-color: skyblue;
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;
border-left-color: red;
border-right-color: orange;
border-top-color: green;
border-bottom-color: rebeccapurple;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;
/* border-width: 10px; */
/* border-color: red; */
/* border-style: solid; */
border-left: 50px solid purple;
border-right: 60px dashed purple;
border-top: 70px double purple;
border-bottom: 80px dotted purple;
border: 10px solid red;
}
</style>
</head>
<body>
<div>带带大师兄</div>
</body>
</html>9. 盒子的外边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的外边距</title>
<style>
div {
width: 400px;
height: 400px;
/* margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px; */
margin: 10px 20px 30px 40px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>带带大师兄</div>
</body>
</html>10. margin的注意事项一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项1</title>
<style>
.outer {
width: 400px;
height: 400px;
padding: 50px;
background-color: gray;
}
.inner {
width: 100px;
height: 100px;
margin: 100px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 子元素的margin是参考父元素的content计算的 -->
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>11. margin的注意事项二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项2</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
margin-top: 50px;
margin-bottom: 50px;
}
.box3 {
background-color: green;
}
.two {
margin-left: 50px;
margin-right: 50px;
}
</style>
</head>
<body>
<!-- 上margin、左margin会影响自身的位置，下margin、右margin会影响兄弟元素的位置 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<hr>
<img class="one" src="../images/touxiang.jpg" alt=""><img class="two" src="../images/touxiang.jpg" alt=""><img class="three" src="../images/touxiang.jpg" alt="">
</body>
</html>12. margin的注意事项三
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项3</title>
<style>
#d1 {
width: 400px;
height: 400px;
margin: 50px;
background-color: deepskyblue;
}
img {
margin: 50px;
}
.one {
background-color: skyblue;
}
.two {
background-color: orange;
margin-left: 10px;
margin-right: 20px;
margin-top: 100px;
margin-bottom: 3000px;
}
.three {
background-color: green;
}
</style>
</head>
<body>
<!-- 对于行内元素来说，左右的margin是可以完美设置的，上下的margin设置后是无效的 -->
<div id="d1">我是一个块级元素</div>
<div>我是一个块级元素</div>
<hr>
<img src="../images/touxiang.jpg" alt="">
<div>我是一段文字</div>
<hr>
<span class="one">人之初</span><span class="two">性本善</span><span class="three">性相近</span>
</body>
</html>13. margin的注意事项四
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项4</title>
<style>
div {
width: 800px;
height: 100px;
/* margin-left: auto;
margin-right: auto; */
margin: 100px auto;
background-color: deepskyblue;
}
span {
background-color: blueviolet;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- margin的值也可以是auto，给一个块级元素设置auto，可以使其在父元素内水平居中 -->
<div>带带大师兄</div>
<span>药水哥</span>
</body>
</html>14. margin的注意事项五
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项5</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<!-- margin的值可以是负值 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>15. margin的塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的塌陷问题</title>
<style>
.outer {
width: 400px;
/* height: 400px; */
background-color: gray;
/* margin塌陷问题：第一种解决方案，设置不为0的border */
/* border: 1px solid red; */
/* margin塌陷问题：第二种解决方案，设置不为0的padding */
/* padding: 1px; */
/* margin塌陷问题：第三种解决方案，给父元素设置SCC样式（强烈推荐） */
overflow: hidden;
}
.inner1 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
.inner2 {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<div>带带大师兄</div>
</body>
</html>16. margin合并问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin合并问题</title>
<style>
/* 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，且取其中最大的值，而不是相加 */
.box {
width: 200px;
height: 200px;
overflow: hidden;
}
.box1 {
background-color: skyblue;
margin-bottom: 50px;
}
.box2 {
background-color: orange;
margin-top: 60px;
}
.test {
width: 200px;
height: 200px;
display: inline-block;
}
.testa {
background-color: blueviolet;
margin-right: 50px;
}
.testb {
background-color: tomato;
margin-left: 60px;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<hr>
<div class="test testa">a</div><div class="test testb">b</div>
</body>
</html>
````
**17. 处理内容的溢出**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>处理内容的溢出</title>
<style>
/*
overflow-x overflow-y不能一个是hidden，一个是visible
overflow常用的属性是auto和hidden
*/
#d1 {
width: 400px;
height: 200px;
background-color: skyblue;
/* overflow: auto; */
overflow-x: hidden;
overflow-y: scroll;
}
#d2 {
width: 1000px;
background-color: orange;
}
</style><div id="d1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas eum veniam veritatis ea assumenda
nulla ab quos distinctio, quidem saepe esse voluptatem molestias vero recusandae doloribus natus iure dolore
quae, tempora corporis, qui molestiae dicta! Ratione animi magni eius temporibus deserunt nesciunt culpa ea quos
<div id="d2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea inventore itaque nobis dolor, aspernatur vel tempora dicta asperiores doloremque culpa unde, voluptatem nihil. Quos, inventore? Eligendi repellat doloribus repudiandae. Sed deleniti perspiciatis alias fugiat dolorum in aperiam modi. Eligendi voluptatibus ratione saepe amet praesentium consequatur aliquam molestias, rem qui voluptate!</div>
ipsum necessitatibus distinctio dicta aspernatur repudiandae aliquam iure illum numquam labore quod soluta, sint
in iusto accusamus, a velit. Ad totam hic sequi odit, quis impedit laudantium. Autem eos a libero atque, ullam
distinctio consequatur quidem. Quam quasi dicta earum excepturi veritatis, voluptatibus ut dolore ullam sed
facilis! Commodi in dolores cum ipsum nihil unde.
</div>
**18. 隐藏元素的两种方式**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>隐藏元素的两种方式</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
/* 不占位 */
/* display: none; */
/* 占位 */
visibility: hidden;
}
.box2 {
background-color: orange;
}
</style><div class="box box1">1</div>
<div class="box box2">2</div>
**19. 样式的继承**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>样式的继承</title>
<style>
/*
会继承的：
字体属性、文本属性（除了vertical-align）、文字颜色等
不会继承的：
边框、背景、内/外边距、宽/高、溢出方式等（换句话说就是与盒子模型相关的）
*/
#d1 {
height: 600px;
padding: 50px;
background-color: gray;
font-size: 40px;
color: yellow;
font-weight: bold;
}
#d2 {
height: 400px;
padding: 50px;
background-color: orange;
}
#d3 {
height: 200px;
background-color: green;
}
</style><div id="d1">
<div id="d2">
<div id="d3">带带大师兄</div>
</div>
</div>
**20. 元素的默认样式**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>元素的默认样式</title>
<style>
body {
/* margin: 0; */
}
#d1 {
font-size: 50px;
color: orange;
}
a {
color: black;
text-decoration: none;
cursor: default;
}
</style><div id="d1">
<a href="https://www.baidu.com">去百度</a>
<span>带带大师兄</span>
</div>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<hr>
<p>我是一个段落</p>
<hr>
<ul>
<li>张三</li>
<li>李四</li>
</ul>
**21. 布局的技巧一**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>布局的技巧_1</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
overflow: hidden;
}
.inner {
width: 200px;
height: 100px;
background-color: orange;
margin-left: 100px;
margin: 0 auto;
margin-top: 150px;
text-align: center;
line-height: 100px;
}
</style><div class="outer">
<div class="inner">inner</div>
</div>
**22. 布局的技巧二**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>布局的技巧_2</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
}
span {
background-color: orange;
}
</style><div class="outer">
<span>带带大师兄</span>
</div>
**23. 布局的技巧三**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>布局的技巧_3</title>
<style>
/*
1.行内元素、行内块元素，可以被父元素当作文本处理
2.子元素在父元素中水平居中：
（1）若子元素为块元素，给父元素加上 margin: 0 auto
（2）若子元素为行内元素、行内块元素，给父元素加上 text-align: center
3.子元素在父元素中垂直居中
（1）若子元素为块元素，给子元素加上 margin-top 值为(父元素content - 子元素盒子总高度) / 2
（2）若子元素为行内元素、行内块元素：
让父元素的height = line-height，每个子元素都加上 vertical-align: middle
若想绝对垂直居中，父元素 font-size 设置为 0
*/
.outer {
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
font-size: 0px;
}
img {
vertical-align: middle;
}
span {
font-size: 40px;
vertical-align: middle;
background-color: orange;
}
</style><div class="outer">
<span>带带大师兄</span>
<img src="../images/touxiang.jpg" alt="">
</div>
**24. 元素之间的空白问题**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>元素之间的空白问题</title>
<style>
/*
产生原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符
解决方案：
1.去掉换行和空格（不推荐）
2.给父元素设置 font-size: 0，再给需要显示文字的元素，单独设置字体大小
*/
div {
height: 200px;
background-color: gray;
font-size: 0;
}
span {
font-size: 20px;
}
.s1 {
background-color: skyblue;
}
.s2 {
background-color: orange;
}
.s3 {
background-color: green;
}
</style><div>
<span class="s1">孙笑川</span>
<span class="s2">药水哥</span>
<span class="s3">刘波</span>
<hr>
<img src="../images/touxiang.jpg" alt="" srcset="">
<img src="../images/touxiang.jpg" alt="" srcset="">
<img src="../images/touxiang.jpg" alt="" srcset="">
</div>
**25. 行内块的幽灵空白问题**
<!DOCTYPE html>
<meta charset="UTF-8">
<title>行内块的幽灵空白问题</title>
<style>
/*
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的
*/
div {
width: 600px;
background-color: skyblue;
/* 方案三：给父元素设置font-size: 0，如果该行内块内部还有文本，则需单独设置font-size */
/* font-size: 0; */
}
img {
width: 200px;
/* 方案一：给行内块元素设置vertical，值不为baselin即可， */
vertical-align: bottom;
/* 方案二：若父元素只有一张图片，设置图片为display: block */
/* display: block; */
}
</style><div>
<img src="../images/touxiang.jpg" alt="" srcset="">xg
</div>
评论 (0)