CSS基础——盒子模型【学习笔记】

曾经终败给现在 2022-12-23 00:44 199阅读 0赞

## 盒子模型（Box Model） ##

*  所谓盒子模型：
    
     *  就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

![在这里插入图片描述][2020112109395950.png_pic_center]

![在这里插入图片描述][20201121094018569.png_pic_center]

*  盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
 *  盒子里面的文字和图片等元素是 内容区域
 *  盒子的厚度 我们成为 盒子的边框
 *  盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
 *  盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

**标准盒子模型**

![在这里插入图片描述][20201121094150330.png_pic_center]

## 1. 盒子边框（border） ##

![在这里插入图片描述][20201121094208171.png_pic_center]

*  语法：

border : border-width || border-style || border-color

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-width</td> 
   <td align="center">定义边框粗细，单位是px</td> 
  </tr> 
  <tr> 
   <td>border-style</td> 
   <td align="center">边框的样式</td> 
  </tr> 
  <tr> 
   <td>border-color</td> 
   <td align="center">边框颜色</td> 
  </tr> 
 </tbody> 
</table>

*  边框的样式：
    
     *  none：没有边框即忽略所有边框的宽度（默认值）
     *  solid：边框为单实线(最为常用的)
     *  dashed：边框为虚线
     *  dotted：边框为点线

### 1.1 边框综合设置 ###

border : border-width || border-style || border-color

例如：

border: 1px solid red;  没有顺序

### 1.2 盒子边框写法总结表 ###

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

<table> 
 <thead> 
  <tr> 
   <th align="left">上边框</th> 
   <th align="left">下边框</th> 
   <th align="left">左边框</th> 
   <th align="left">右边框</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">border-top-style:样式;</td> 
   <td align="left">border-bottom-style:样式;</td> 
   <td align="left">border-left-style:样式;</td> 
   <td align="left">border-right-style:样式;</td> 
  </tr> 
  <tr> 
   <td align="left">border-top-width:宽度;</td> 
   <td align="left">border- bottom-width:宽度;</td> 
   <td align="left">border-left-width:宽度;</td> 
   <td align="left">border-right-width:宽度;</td> 
  </tr> 
  <tr> 
   <td align="left">border-top-color:颜色;</td> 
   <td align="left">border- bottom-color:颜色;</td> 
   <td align="left">border-left-color:颜色;</td> 
   <td align="left">border-right-color:颜色;</td> 
  </tr> 
  <tr> 
   <td align="left">border-top:宽度 样式 颜色;</td> 
   <td align="left">border-bottom:宽度 样式 颜色;</td> 
   <td align="left">border-left:宽度 样式 颜色;</td> 
   <td align="left">border-right:宽度 样式 颜色;</td> 
  </tr> 
 </tbody> 
</table>

### 1.3 表格的细线边框 ###

![在这里插入图片描述][20201121094236800.png_pic_center]

*  通过表格的`cellspacing="0"`,将单元格与单元格之间的距离设置为0，
 *  但是两个单元格之间的边框会出现重叠，从而使边框变粗
 *  通过css属性：
    
        table{ border-collapse:collapse; }
    
     *  collapse 单词是合并的意思
     *  border-collapse:collapse; 表示相邻边框合并在一起。

![在这里插入图片描述][20201121094332646.png_pic_center]

## 2. 内边距（padding） ##

![在这里插入图片描述][20201121094740839.png_pic_center]

### 2.1 内边距： ###

padding属性用于设置内边距。 **是指 边框与内容之间的距离。**

### 2.2 设置 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding-left</td> 
   <td align="left">左内边距</td> 
  </tr> 
  <tr> 
   <td>padding-right</td> 
   <td align="left">右内边距</td> 
  </tr> 
  <tr> 
   <td>padding-top</td> 
   <td align="left">上内边距</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td align="left">下内边距</td> 
  </tr> 
 </tbody> 
</table>

当我们给盒子指定padding值之后， 发生了2件事情：

1.  内容和边框 有了距离，添加了内边距。
2.  盒子会变大了。

注意： 后面跟几个数值表示的意思是不一样的。\*\*

我们分开写有点麻烦，我们可以不可以简写呢？

<table> 
 <thead> 
  <tr> 
   <th>值的个数</th> 
   <th>表达意思</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1个值</td> 
   <td>padding：上下左右内边距;</td> 
  </tr> 
  <tr> 
   <td>2个值</td> 
   <td>padding: 上下内边距 左右内边距 ；</td> 
  </tr> 
  <tr> 
   <td>3个值</td> 
   <td>padding：上内边距 左右内边距 下内边距；</td> 
  </tr> 
  <tr> 
   <td>4个值</td> 
   <td>padding: 上内边距 右内边距 下内边距 左内边距 ；</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20201121094820253.png_pic_center]

请写出如下内边距：

1.  要求盒子有一个左边内边距是 5像素
2.  要求简写的形式写出 一个盒子上下是 25像素 左右是15像素。
3.  要求简写的形式写出 一个盒子 上内边距是 12像素 下内边距是 0 左内边距是 25像素 右内边距是 10像素

###  2.3 练习案例： 新浪导航 ###

新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给宽度，使用padding 撑开盒子。

![在这里插入图片描述][20201121094912647.gif_pic_center]  
代码参考（点击跳转）

### 2.4 内盒尺寸计算（元素实际大小） ###

![在这里插入图片描述][20201121094947548.png_pic_center]

*  宽度
    
    Element Height = content height + padding + border （Height为内容高度）
 *  高度
    
    Element Width = content width + padding + border （Width为内容宽度）
 *  盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

### 2.5 内边距产生的问题 ###

*  问题  
    ![在这里插入图片描述][20201121095049183.png_pic_center]
    
    会撑大原来的盒子
 *  解决：
    
    通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

![在这里插入图片描述][20201121100023637.png_pic_center]

### 2.6 padding不影响盒子大小情况 ###

> 如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

## 3. 外边距（margin） ##

![在这里插入图片描述][20201121100049327.png_pic_center]

### 3.1 外边距 ###

margin属性用于设置外边距。 margin就是控制**盒子和盒子之间的距离**

### 3.2 设置： ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin-left</td> 
   <td align="left">左外边距</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td align="left">右外边距</td> 
  </tr> 
  <tr> 
   <td>margin-top</td> 
   <td align="left">上外边距</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td align="left">下外边距</td> 
  </tr> 
 </tbody> 
</table>

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

### 3.3 块级盒子水平居中 ###

*  可以让一个块级盒子实现水平居中必须：
    
     *  盒子必须指定了宽度（width）
     *  然后就给**左右的外边距都设置为auto**，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{  width:960px; margin:0 auto;}

常见的写法，以下下三种都可以。

*  margin-left: auto; margin-right: auto;
 *  margin: auto;
 *  margin: 0 auto;

### 3.4 文字居中和盒子居中区别 ###

1.  盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2.  块级盒子水平居中 左右margin 改为 auto

text-align: center; /* 文字 行内元素 行内块元素水平居中 */
    margin: 10px auto;  /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */

### 3.5 插入图片和背景图片区别 ###

1.  插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2.  背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

img {   
    		width: 200px;/* 插入图片更改大小 width 和 height */
    		height: 210px;
    		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding 盒模型 */
    		margin-left: 50px; /* 插入当图片也是一个盒子 */
    	}
    
     div { 
    		width: 400px;
    		height: 400px;
    		border: 1px solid purple;
    		background: #fff url(images/sun.jpg) no-repeat;
    		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    	}

### 3.6 清除元素的默认内外边距(重要) ###

![在这里插入图片描述][20201121100343710.png_pic_center]

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

* { 
       padding:0;         /* 清除内边距 */
       margin:0;          /* 清除外边距 */
    }

注意：

*  行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

### 3.7 外边距合并 ###

使用margin定义块元素的**垂直外边距**时，可能会出现外边距的合并。

#### (1). 相邻块元素垂直外边距的合并 ####

*  当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
 *  下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
 *  **取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

![在这里插入图片描述][20201121100312870.png_pic_center]

**解决方案：尽量给只给一个盒子添加margin值**。

#### (2). 嵌套块元素垂直外边距的合并（塌陷） ####

*  对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
 *  父元素的上外边距会与子元素的上外边距发生合并
 *  合并后的外边距为两者中的较大者

![在这里插入图片描述][20201121100449591.png_pic_center]

**解决方案：**

1.  可以为父元素定义上边框。
2.  可以为父元素定义上内边距
3.  可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题

## 4. 盒子模型布局稳定性 ##

*  学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？
    
     *  大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

我们根据稳定性来分，建议如下：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

width >  padding  >   margin

*  原因：
    
     *  margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
     *  padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
     *  width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

## 5. 综合案例 ##

![在这里插入图片描述][20201121100600129.png_pic_center]  
代码参考（点击跳转）

#### 去掉列表默认的样式 ####

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下

li {  list-style: none; }

## 6.拓展 ##

以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。

## 6.1 圆角边框(CSS3) ##

![在这里插入图片描述][20201121100629417.png_pic_center]

*  语法：

border-radius:length;

*  其中每一个值可以为 数值或百分比的形式。
 *  技巧： 让一个正方形 变成圆圈
    
        border-radius: 50%;

![在这里插入图片描述][20201121100646404.png_pic_center]

*  ![在这里插入图片描述][20201121100629417.png]
 *  以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
 *  而我们这里矩形就只用 用 高度的一半就好了。精确单位。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> p { width: 100px; height: 20px; background-color: red; font-size: 12px; color: #fff; text-align: center; line-height: 20px; border-radius: 10px; } </style>
    </head>
    <body>
    
        <p> 新人福利 </p>
    </body>
    </html>

## 6.2 盒子阴影(CSS3) ##

![在这里插入图片描述][20201121100734462.png_pic_center]

*  语法:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

![media/1498467567011.png][media_1498467567011.png]

*  前两个属性是必须写的。其余的可以省略。
 *  外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset

p { 
    			width: 100px;
                height: 20px;
                background-color: red;
                font-size: 12px;
                color: #fff;
                text-align: center;
                line-height: 20px;
                border-radius: 10px;
    			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
    			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
    			
    }

###### 代码参考——新浪导航（点击回到原位置） ######

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>新浪导航栏案例</title>
    	<style> /*清除元素默认的内外边距*/ * { margin: 0; padding: 0; } .nav { height: 41px; background-color: #FCFCFC; /*上边框*/ border-top: 3px solid #FF8500; /*下边框*/ border-bottom: 1px solid #EDEEF0; } .nav a { /*转换为行内块*/ display: inline-block; height: 41px; line-height: 41px; color: #4C4C4C; /*代表 上下是 0 左右是 20 内边距*/ padding: 0 20px; /*background-color: pink;*/ text-decoration: none; font-size: 12px; } .nav a:hover { background-color: #eee; } </style>
    </head>
    <body>
    	<div class="nav">
    		<a href="#">设为首页</a>
    		<a href="#">手机新浪网</a>
    		<a href="#">移动客户端</a>
    		<a href="#">博客</a>
    		<a href="#">微博</a>
    		<a href="#">关注我</a>
    	</div>
    </body>
    </html>

点击回到原位置

###### 代码参考——综合案例（点击回到原位置） ######

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>新闻列表综合案例</title>
    	<style> /*这句话必须要写， 不要忘却了*/ * { margin: 0; padding: 0; } /*取消列表样式*/ li { list-style: none; } .box { width: 298px; height: 198px; border: 1px solid #ccc; /*块级盒子水平居中*/ margin: 100px auto; /*如果一个盒子给了一个padding值，会撑大盒子*/ padding: 15px; background: url(images/line.jpg); } .box h2 { font-size: 18px; padding: 5px 0; /*底边框思密达*/ border-bottom: 1px solid #ccc; margin-bottom: 10px; } .box ul li { height: 30px; line-height: 30px; /*background-color: pink;*/ border-bottom: 1px dashed #ccc; background: url(images/arr.jpg) no-repeat 5px center; /*因为这个li 没有宽度 所以padding 不会撑开盒子*/ padding-left: 20px; } .box ul li a { color: #333; font-size: 12px; text-decoration: none; /*margin-left: 20px;*/ /*padding-left: 20px;*/ } .box ul li a:hover { text-decoration: underline; } </style>
    </head>
    <body>
    	<div class="box">
    		
    		<h2>最新文章/New Articles</h2>
    	    
    	    <ul>
    	    	<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
    	    	<li><a href="#">体验javascript的魅力</a></li>
    	    	<li><a href="#">jquery世界来临</a></li>
    	    	<li><a href="#">网页设计师的梦想</a></li>
    	    	<li><a href="#">jquery中的链式编程是什么</a></li>
    	    </ul>
    	</div>
    </body>
    </html>

点击回到原位置

[2020112109395950.png_pic_center]: /images/20221120/334cb93ae5f54a59a60caf08e22c1331.png
[20201121094018569.png_pic_center]: /images/20221120/05437049d8fc46cf892130bc9678943d.png
[20201121094150330.png_pic_center]: /images/20221120/b3c2471e90b144839ded0e9c14afda5e.png
[20201121094208171.png_pic_center]: /images/20221120/4360888bcdcd49cfa32b3cbf6eebda80.png
[20201121094236800.png_pic_center]: /images/20221120/2e3e58d1f0674d9595686d6e97f26d95.png
[20201121094332646.png_pic_center]: /images/20221120/96c53035e68f4a0e9709256c928d4e11.png
[20201121094740839.png_pic_center]: /images/20221120/d27acacad61846679a1c444e5ba3e8de.png
[20201121094820253.png_pic_center]: /images/20221120/fea9b2028b04421294da79e01e9ae4c7.png
[20201121094912647.gif_pic_center]: /images/20221120/8119847e06c74182ae718393f409a2cb.png
[20201121094947548.png_pic_center]: /images/20221120/924122dcdfd94b8c994ba5844831cb57.png
[20201121095049183.png_pic_center]: /images/20221120/4a4e91e624364732a4bd382e25ea3f04.png
[20201121100023637.png_pic_center]: /images/20221120/e6ca41bd391b46259e67ee2c6befdd5a.png
[20201121100049327.png_pic_center]: /images/20221120/b6334e5bd0c74147aba4d362cae5e33d.png
[20201121100343710.png_pic_center]: /images/20221120/8d9e56394d25416fb9528595417ab89a.png
[20201121100312870.png_pic_center]: /images/20221120/faa94484b53541f3acb4a2f66019d10f.png
[20201121100449591.png_pic_center]: /images/20221120/810c501af6e44d6e8022d3f87bb4e3f9.png
[20201121100600129.png_pic_center]: /images/20221120/5fd7317f133446f6acc22e42098a7452.png
[20201121100629417.png_pic_center]: /images/20221120/2f8aef1eb5524861810d9b14278e189f.png
[20201121100646404.png_pic_center]: /images/20221120/7bc44b9520c541f19f0c63ce7ec873e3.png
[20201121100629417.png]: /images/20221120/5d95592d5228455a8cb1f306f4a80de9.png
[20201121100734462.png_pic_center]: /images/20221120/d68f44c694604066bc6f485f57a691a4.png
[media_1498467567011.png]: /images/20221120/3b0bf9c3a48146d482ad313218c192ce.png