前端学习-CSS-08-盒子模型
<p><strong>学习时间：2022.11.13</strong><br></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>盒子模型<ul><li>盒子模型的介绍</li><li>内容的宽高</li><li>边框(border)<ul><li>连写形式</li><li>单方向设置</li><li>单个属性</li></ul></li><li>简单案例</li><li>内边距(padding)</li><li>内减模式</li><li>外边距(margin)<ul><li>外边距折叠现象1-合并现象</li><li>外边距折叠现象2-塌陷现象</li><li>行内标签的内外边距问题</li></ul></li></ul></li></ul></div><p></p>
<h2 id="盒子模型">盒子模型</h2>
<h3 id="盒子模型的介绍">盒子模型的介绍</h3>
<ul>
<li>每个标签都可以看做是一个盒子</li>
<li>盒子模型分为：
<ul>
<li>内容区域(content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)</li>
</ul>
</li>
</ul>
<pre><code class="language-html"><!-- 01-盒子模型的介绍体验.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的介绍和体验</title>
<style>
div{
width: 300px;
height: 200px;
background-color: pink;
border: 3px solid #000;
padding: 20px;
margin: 50px;
}
</style>
</head>
<body>
<div>这是一个div标签，大小是300*200，背景颜色粉色，内边距20px，边框3px黑色，外边距50px</div>
<div>这是第二个div标签，大小是300*200，背景颜色粉色，内边距20px，边框3px黑色，外边距50px</div>
</body>
</html>
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/3028374/202212/3028374-20221218195343414-1172244357.png"></p>
<h3 id="内容的宽高">内容的宽高</h3>
<ul>
<li>width和height属性用于设置盒子的宽高</li>
</ul>
<h3 id="边框border">边框(border)</h3>
<h4 id="连写形式">连写形式</h4>
<ul>
<li>格式：
<ul>
<li>border:边框粗细 线条样式 线条颜色</li>
<li>三个取值没有先后顺序</li>
<li>其中线条样式有实线(solid)，虚线(dashed)，点线(dotted)等</li>
</ul>
</li>
</ul>
<pre><code class="language-html"><!-- 02-边框-1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框-1</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 15px;
}
.a{
border: 3px solid green;
}
.b{
border: 3px dashed green;
}
.c{
border: 3px dotted green;
}
</style>
</head>
<body>
<div class="a">这是一个div标签，大小是200*200，背景颜色粉色，边框3px绿色，边框实线(solid)，外边距15px</div>
<div class="b">这是一个div标签，大小是200*200，背景颜色粉色，边框3px绿色，边框虚线(dashed)，外边距15px</div>
<div class="c">这是一个div标签，大小是200*200，背景颜色粉色，边框3px绿色，边框点线(dotted)，外边距15px</div>
</body>
</html>
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/3028374/202212/3028374-20221218195348314-1258389217.png"></p>
<h4 id="单方向设置">单方向设置</h4>
<ul>
<li>格式：
<ul>
<li>border-方位名词</li>
</ul>
</li>
</ul>
<pre><code class="language-html"><!-- 03-边框-2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框-2</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
border-right: 3px green solid;
}
</style>
</head>
<body>
<div>这是一个div标签，大小是200*200，背景颜色粉色，边框3px绿色，边框实线(solid)，只有右侧边框</div>
</body>
</html>
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/3028374/202212/3028374-20221218195353095-1128973432.png"></p>
<h4 id="单个属性">单个属性</h4>
<ul>
<li>用于设置边框粗细，样式，颜色：
<ul>
<li>边框粗细：border-width</li>
<li>边框样式：border-style</li>
<li>边框颜色：border-color</li>
</ul>
</li>
<li>因为连写会更方便，因此这三个单独属性很少使用</li>
</ul>
<h3 id="简单案例">简单案例</h3>
<ul>
<li>使用pxcook测量盒子尺寸</li>
<li>打出相应代码</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3028374/202212/3028374-20221218195357196-1268430871.png"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>普通盒子</title>
<style>
div{
width: 351px;
height: 351px;
background-color:#ffc0cb;
border: 12px solid #00f;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</code></pre>
<h3 id="内边距padding">内边距(padding)</h3>
<ul>
<li>格式
<ul>
<li>padding:数字px</li>
<li>padding后最少跟1个值，最多跟4个</li>
<li>4值：按照顺时针顺序，上右下左依次赋值</li>
<li>3值：同样顺时针顺序，赋给上右下，左和右相同</li>
<li>2值：赋给上右，上下相同，左右相同</li>
<li>1值：上下左右均相同</li>
</ul>
</li>
<li>同样也可以使用padding-left, padding-right, paddin-top, padding-bottom来设置相应值</li>
</ul>
<pre><code class="language-html"><!-- 04-内边距.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 20px 30px 40px 50px;
/* padding: 20px 30px 40px;
padding: 20px 30px;
padding: 20px; */
}
</style>
</head>
<body>
<div>这是一个div标签</div>
</body>
</html>
</code></pre>
<h3 id="内减模式">内减模式</h3>
<ul>
<li>border和padding会将盒子撑大，有2种方法解决
<ul>
<li>手动内减：手动减去多余大小</li>
<li>自动内减：给盒子设置属性box-sizing:border-box即可</li>
</ul>
</li>
<li>自动内减属性可以让盒子变为CSS3的的盒子模型</li>
</ul>
<pre><code class="language-html"><!-- 05-内减模式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内减模式</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
border: 10px solid green;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</code></pre>
<h3 id="外边距margin">外边距(margin)</h3>
<ul>
<li>外边距与内边距的使用完全相同</li>
</ul>
<h4 id="外边距折叠现象1-合并现象">外边距折叠现象1-合并现象</h4>
<ul>
<li>垂直布局的块级元素，上下的margin会合并，取最大值</li>
<li>解决办法：
<ul>
<li>只给其中一个元素设置margin即可</li>
</ul>
</li>
</ul>
<h4 id="外边距折叠现象2-塌陷现象">外边距折叠现象2-塌陷现象</h4>
<ul>
<li>相互嵌套的块级元素，子女元素的margin-top会作用在父母元素上，导致父母元素一起向下移动</li>
<li>解决办法：
<ul>
<li>给父母元素设置border-top或者padding-top，分隔父母子女元素的margin-top</li>
<li>给父母元素设置overflow: hidden(最高级的办法)</li>
<li>将某个元素转换成行内块元素(因为塌陷现象仅对块级元素生效)</li>
<li>设置浮动：使用.clearfix::before解决塌陷问题，具体代码如下</li>
</ul>
<pre><code class="language-html"><!-- 下面的代码同时解决塌陷问题和浮动带来的问题 -->
<!-- 这里使用display: table，父母子女标签不再是块级元素，解决塌陷 -->
.clearfix::before,
.clearfix::after{
content: '';
display: table;
}
<!-- 这里使用clear:both清除浮动 -->
.clearfix::after{
clear:both;
}
</code></pre>
</li>
</ul>
<h4 id="行内标签的内外边距问题">行内标签的内外边距问题</h4>
<ul>
<li>无法通过margin或者padding改变行内标签的垂直位置，只能改变水平位置</li>
<li>即margin-top, margin-bottom, padding-top, padding-bottom并不会对行内标签生效</li>
<li>垂直位置使用line-height来改变</li>
</ul><br><br>
来源：https://www.cnblogs.com/ayubene/p/16990838.html
頁:
[1]