CSS详解（6.盒子模型）

今天药忘吃喽~ 2023-06-30 10:55 21阅读 0赞

### 文章目录 ###

*  一，盒子模型的内容
 *  二，属性说明
 *  三，盒子模型的分类
 *  四，正常盒子模型
 *  五，怪异盒子模型
 *  六，旧伸缩盒ccs3
 *  七，新伸缩盒css3

# 一，盒子模型的内容 #

![在这里插入图片描述][20200117113445118.png]

margin属性: margin-top, margin-bottom, margin-left, margin-right

border属性: border-color, border-style, border-width, border-top…

padding属性: padding-top, padding-bottom, padding-left, padding-right

content属性:

# 二，属性说明 #

1，margin:

围绕在内容边框的区域就是外边距，外边距默认为透明区域

外边距接任何长度单位，百分数

•margin:设置所有的外边距

•margin-top 设置上边的外边距

•margin-bottom, 设置下边的外边距

•margin-left, 设置左边的外边距

•margin-right 设置右边的外边距

•注意外边距合并的问题

2，border 复合属性

•border-width 边框宽度

•border-style 边框样式

•border-color 边框颜色

•border-radius 设置圆角边框

•border-shadow 设置对象阴影

•border-image 边框的背景图片

3，padding

内边距在content外，边框内

•padding 设置所有的内边距

•padding-top 设置上边的内边距

•padding-bottom, 设置下边的内边距

•padding-left, 设置左边的内边距

•padding-right 设置右边的内边距

# 三，盒子模型的分类 #

1，标准盒子：正常盒子模型、怪异盒子模型

2，伸缩盒：新、旧

# 四，正常盒子模型 #

1.<html>
    2.	<head>
    3.		<meta charset="UTF-8">
    4.		<title></title>
    5.		<style type="text/css"> 6. .outerbox{ 7. width: 200px; 8. height: 200px; 9. background-color: rosybrown; 10. } 11. .innerbox{ 12. width: 200px; 13. height: 200px; 14. background-color: royalblue; 15. } 16. </style>
    17.	</head>
    18.	<body>
    19.		<div class="outerbox">
    20.			<div class="innerbox">
    21.				haha
    22.			</div>
    23.		</div>
    24.	</body>
    25.</html>

注意点：

1，padding内边距会在以前的基础上扩大，也就是会自动撑开，不用改原来的宽度

2，margin-top margin-bottom 会取它大的那一个值

# 五，怪异盒子模型 #

1.<!DOCTYPE html>
    2.<html>
    3.	<head>
    4.		<meta charset="UTF-8">
    5.		<title></title>
    6.		<style type="text/css"> 7. .outerbox{ 8. width: 200px; 9. height: 200px; 10. background-color: rosybrown; 11. padding: 20px; 12. box-sizing: border-box; 13. } 14. .innerbox{ 15. width: 200px; 16. height: 200px; 17. background-color: royalblue; 18. } 19. </style>
    20.	</head>
    21.	<body>
    22.		<div class="outerbox">
    23.			<div class="innerbox">
    24.				haha
    25.			</div>
    26.		</div>
    27.	</body>
    28.</html>

注意点：

使用怪异的特点是固定了盒子的大小，无论怎么加边距，盒子的大小是不会改变的

# 六，旧伸缩盒ccs3 #

1，css3引入一个种新的布局模式—flexbox布局，就是伸缩盒模型(flexible box) 用来提供一个更加有效的方式制定，调整和分布一个容器项目布局，即使它们的大小是未知或者动态的

2，FlexBox可以轻松的实现屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变

属性说明

*  1，box-orient 伸缩盒对象的子元素的排列方式
 *  2，box-pack 设置盒子里的内容垂直居中
 *  3，box-align 设置盒子里的内容水平居中
 *  4，box-flex 设置盒子内的对象按比例分配空间
 *  5，box-direction 盒子里面的对象排列顺序是否反转

1.<!DOCTYPE html>
    2.<html>
    3.
    4.	<head>
    5.		<meta charset="UTF-8">
    6.		<title></title>
    7.		<style type="text/css"> 8. .container{ 9. width: 500px; 10. height: 500px; 11. background-color: darkgray; 12. display: -webkit-box; 13. /*变成盒子*/ 14. /*-webkit-box-pack: center;*/ 15. /*-webkit-box-orient: vertical;*/ 16. /*-webkit-box-align: center;*/ 17. /*-webkit-box-direction: reverse;*/ 18. } 19. /*div{ 20. display: inline-block; 21. }*/ 22. 23. .one{ 24. width: 100px; 25. height: 100px; 26. background-color: antiquewhite; 27. -webkit-box-flex: 1; 28. } 29. .two{ 30. width: 100px; 31. height: 100px; 32. background-color: pink; 33. -webkit-box-flex: 1; 34. 35. } 36. .three{ 37. width: 100px; 38. height: 100px; 39. background-color: palegreen; 40. -webkit-box-flex: 1; 41. 42. } 43. </style>
    44.	</head>
    45.
    46.	<body>
    47.		<div class="container">
    48.			<div class="one">
    49.				d1
    50.			</div>
    51.			<div class="two">
    52.				d2
    53.			</div>
    54.			<div class="three">
    55.				d3
    56.			</div>
    57.		</div>
    58.	</body>
    59.
    60.</html>

# 七，新伸缩盒css3 #

相关属性

1.  flex 复合属性，设置伸缩盒子对象的子元素如何分配空间
2.  flex-grow 弹性盒子扩展比率，按比例平均分配
3.  flex-flow 复合属性 设置伸缩盒子对象子元素排列方式
4.  flex-direction 伸缩盒子对象的子元素在父容器中的位置
5.  flex-wrap 设置伸缩盒对象的子元素超出父容器时是否换行
6.  order 设置伸缩盒对象的子元素出现的顺序

1.<!DOCTYPE html>
    2.<html>
    3.
    4.	<head>
    5.		<meta charset="UTF-8">
    6.		<title></title>
    7.		<style type="text/css"> 8. .container{ 9. width: 500px; 10. height: 500px; 11. background-color: darkgray; 12. /*变成盒子*/ 13. display: -webkit-flex; 14. /*-webkit-flex-direction: column-reverse;*/ 15. /*-webkit-flex-wrap: wrap;*/ 16. } 17. .one{ 18. width: 300px; 19. height: 100px; 20. background-color: antiquewhite; 21. } 22. .two{ 23. width: 200px; 24. height: 100px; 25. background-color: pink; 26. /*-webkit-order: 3;*/ 27. } 28. .three{ 29. width: 100px; 30. height: 100px; 31. background-color: palegreen; 32. } 33. </style>
    34.	</head>
    35.
    36.	<body>
    37.		<div class="container">
    38.			<div class="one">
    39.				d1
    40.			</div>
    41.			<div class="two">
    42.				d2
    43.			</div>
    44.			<div class="three">
    45.				d3
    46.			</div>
    47.		</div>
    48.	</body>
    49.
    50.</html>

[20200117113445118.png]: https://img-blog.csdnimg.cn/20200117113445118.png