css(4)

雨点打透心脏的1/2处 2023-06-10 11:22 23阅读 0赞

# 学习目标 #

> 能够说出盒子模型的组成（content、padding、border、margin）
> 
> 能够使用border的相关属性（width、color、style）
> 
> 能够使用border-collapse实现边框合并
> 
> 能够计算盒子的实际大小（content+padding+border）
> 
> 能够说出\*\{margin:0;padding:0;\}的作用
> 
> 。。。。。。

# 盒子模型（思维模式） #

> 一种思维方式（万物皆盒子，每个标签都可以看成是一个盒子）

## 盒子模型的组成 ##

> 盒子模型的四个组成部分

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTCDC2F6-1572156050251)(mdImg/20171105195348.jpg)\]][img-pTCDC2F6-1572156050251_mdImg_20171105195348.jpg]

*  content（内容/电脑）+padding（内边距/海绵）+border（边框/白色纸壳）+margin（外边距/盒子与盒子间的距离）

## 边框（border-边框-盒子的外纸壳） ##

**属性：**

*  border-width: 边框的宽度（10px）；
 *  border-style: 边框的样式；
    
     *  solid : 实线 （用的最多）
     *  dashed : 虚线
     *  dotted : 点线
 *  border-color: 边框的颜色；
    
     *  有颜色：red、\#fff、rgb()等等
     *  透明：transparent

**连写：**

border: 边框大小  边框样式 边框颜色;
    border: 1px solid blue;  // 不要记上面那个，就记这个即可 （用的最多）
    快捷方式：bd+ + tab  以后使用，都用连写，基本不会单独写

**方向：**

> 单独设置盒子的一条边框

border-方位名词:边框大小 边框样式 边框颜色;
    比如：
        border-left 左边框
        border-right 右边框
        border-top 上边框
        border-bottom 下边框

**补充：**

*  细线表格 `border-collapse:collapse；`
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DCU70KYY-1572156050252)(mdImg/细线表格.png)\]][img-DCU70KYY-1572156050252_mdImg_.png]
 *  使用开发者工具查看盒子模型（计算盒子的大小，**初级计算公式**）
    
        
        注意：
        	1.css设置的height和width设置的是内容的宽高
        	2.添加边框会让盒子变大
        
        解决：
        	在设置边框之后根据初级公式，把height和width手动减去多出的部分
        	（手动内减）
        
        解决方案：盒子内容 380*380 , 背景绿色, 边框：10px 实线 黑色

##### ヾ(๑╹◡╹)ﾉ"写一个小盒子（由内容和边框组成） #####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x90LGzRu-1572156050252)(mdImg/边框练习.png)\]][img-x90LGzRu-1572156050252_mdImg_.png]

##### \------------------------------- #####

##### ヾ(๑╹◡╹)ﾉ"不low导航~ #####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iv26dth9-1572156050252)(mdImg/效果-1537767437391.png)\]][img-iv26dth9-1572156050252_mdImg_-1537767437391.png]

## 内边距（padding-内边距-盒子的泡沫） ##

> 盒子边框与内容之间的距离

**取值：**

*  \*\*一个值：\*\*控制整个上下左右 `padding : 40px；`
    
    上、右、下、左 的内边距都设置了 40 px的距离;
 *  \*\*两个值：\*\*第一个控制上下 第二个控制左右 `padding : 40px 80px`
    
    上下 => 40px , 左右 => 80px
 *  \*\*三个值：\*\*第一个控制的上 第二个控制的左右 第三个控制的下 `padding : 40px 60px 80px;`
    
    上 => 40px , 左右 => 60px , 下 => 80px
 *  \*\*四个值：\*\*分别控制：上右下左 `padding : 40px 60px 80px 100px;`
    
    上 => 40px , 右 => 60px , 下 => 80px , 左 => 100px
 *  \*\*记忆：\*\*顺时针，上右下左，没有找对面

**单独设置（方向）：**

padding-top
    padding-right
    padding-bottom
    padding-left

## 计算盒子的大小 ##

> 盒子大小与内容大小的区别

*  盒子大小公式 :

// 左右相等 
    盒子宽度 =  内容宽度 + 2*padding + 2*border  
    // 左右不等
    盒子宽度 =  内容宽度 + padding-left+padding-left + border-left
     		   + border-right ;

> 那盒子高度是多少？

*  \*\*盒子大小：\*\*边框、内边距、内容决定的
 *  我们之前设置的width 和 height 都只是设置**内容的大小**

**注意（不会撑大盒子的情况）：**

*  当一个大盒子包含一个小盒子，并且两个盒子都是块级元素，小盒子宽度继承父盒子，这时候给小盒子加padding-left，是不会改变小盒子大小的 （下面的都可以）
    
     *  padding-left（用的最多）
     *  padding-right
     *  border-left
     *  border-right

##### ヾ(๑╹◡╹)ﾉ"新浪导航（不low导航升级版）~ #####

> 用之前的方法，当a标签的文字数量不确定时，页面会有问题。
> 
> 普遍的方法应该使用padding

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgapJOZy-1572156050253)(mdImg/导航-1537767908758.png)\]][img-qgapJOZy-1572156050253_mdImg_-1537767908758.png]

##### \------------------------------ #####

**让浏览器自动内减（拓展css3）~**

box-sizing：border-box；（自动内减，此时width和height就是当前盒子的实际大小）

##### ヾ(๑╹◡╹)ﾉ"新闻列表案例~ #####

## 外边距（margin-外边距-盒子与盒子之间的距离） ##

> 盒子与盒子之间的距离（控制盒子的位置）

**取值：**

*  **一个值**：控制整个上下左右 `margin : 40px；`
    
    上、右、下、左 的内边距都设置了 40 px的距离;
 *  \*\*两个值：\*\*第一个控制上下 第二个控制左右 `margin : 40px 80px`
    
    上下 => 40px , 左右 => 80px
 *  \*\*三个值：\*\*第一个控制的上 第二个控制的左右 第三个控制的下 `margin : 40px 60px 80px;`
    
    上 => 40px , 左右 => 60px , 下 => 80px
 *  \*\*四个值：\*\*分别控制：上右下左 `margin : 40px 60px 80px 100px;`
    
    上 => 40px , 右 => 60px , 下 => 80px , 左 => 100px

**单独设置（方向）：**

margin-top
    margin-right
    margin-bottom
    margin-left

**针对margin单方向的应用：**

*  上下应用
    
     *  margin-top：能让盒子下移
     *  margin-bottom：能让下面的盒子往下移
 *  左右应用（先转换成行内块）
    
     *  margin-left：能让盒子右移
     *  margin-right：能让右边的盒子往右移动

## 清除默认内外边距 ##

> 很多标签默认带有margin和padding，在布局之前需要清除这些标签默认的margin和padding，留给自己设置。

比如：

(1) body 标签: 自带 margin: 8px; 的属性
    (2) p 标签: 默认带有 margin: font-size 的值
    (3) h 标签: 也默认带有 margin-top 和 margin-bottom
    (4) ul标签: ul 标签默认带有上下的 margin, 和 padding-left
    ...

**方法（清除页面中标签的默认padding和margin）：**

* { 
    	padding: 0;
    	margin: 0; 
    }

##### \------------------------------ #####

##### ヾ(๑╹◡╹)ﾉ"爱宠知识案例~ #####

# 拓展 #

*  之后工作中，用什么软件测量都可以，顺手就行
 *  box-sizing：border-box；（自动内减，此时width和height就是当前盒子的实际大小）

# 总结 #

*  能够说出盒子模型四大组成部分
    
    内容：content
    
    内边距：padding
    
    边框：border
    
    外边距：margin
 *  能够写出1像素实线红色边框的代码
    
    border:1px solid red;
 *  能说出padding:10px 20px; 代表的意思
    
    上下内边距是10px
    
    左右内边距20px
 *  能够计算盒子实际大小
    
    盒子的宽度=左边框+左padding+内容的宽度+右padding+右边框

[img-pTCDC2F6-1572156050251_mdImg_20171105195348.jpg]: /images/20230531/fdc1f1a9f9844061a023e935f3b16451.png
[img-DCU70KYY-1572156050252_mdImg_.png]: /images/20230531/6b1d82d537c145d4b87f626a6d1e652c.png
[img-x90LGzRu-1572156050252_mdImg_.png]: /images/20230531/97e5d4bf31fe4de8ac9217cba56603d4.png
[img-iv26dth9-1572156050252_mdImg_-1537767437391.png]: /images/20230531/f502987332d841f3968f09cf6ad47b59.png
[img-qgapJOZy-1572156050253_mdImg_-1537767908758.png]: /images/20230531/25c230f323d44b30b5e55c75646b33e2.png