三、盒模型
🍎总述
每一个 HTML 元素就相当于是一个矩形的 "盒子"
这个盒子由这几个部分构成
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 marg
先来张图
🍎边框
基础属性
- 粗细: border-width
- 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
- 颜色: border-color
🌰一个边框的代码栗子
<!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>Document</title> <!-- witdth粗细，border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框，颜色: border-color --> <style> .test { width: 200px; height: 100px; border-width: 50px; border-style: solid; border-color: brown; } </style> </head> <body> <div class="test"> 这是一个块级元素 </div> </body> </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>Document</title> <!-- border-witdth粗细，border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框，颜色: border-color --> <!-- 通过通配符选择器，我们就可以使我们所有的盒子都不被边框撑大 --> <style> * { box-sizing: border-box; } .test { width: 200px; height: 100px; /* border-width: 10px; border-style: solid; border-color: brown; */ border: 10px solid brown; /* 简写的和上面的效果是一样的 */ } p { width: 200px; height: 100px; border-top: 20px dashed green; border-bottom: 10px dotted gray; border-left: 10px solid yellow; border-right: 5px solid blue; } </style> </head> <body> <div class="test"> 这是一个块级元素 </div> <p> 这是一个段落 </p> </body> </html>
注意，通常情况下，我们设置的width和height是指的内容的大小，而一个盒子有了边框后，默认情况下我们的盒子会被撑大
但如果你设置了border-box，让盒子不再撑大。这时width和height指的就是整体盒子的大小，相当于内容大小就被缩水了。
🍎内边距
padding 设置内容和边框之间的距离.
基础写法
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
🌰栗子
一点补充：复合写法
可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
🍎外边距
基础写法
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
- margin-top
- margin-bottom
- margin-left
- margin-rig
🍎块级元素居中
🔔注意:
这个水平居中的方式和 text-align 不一样.
margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.
另外, 对于垂直居中, 不能使用 "上下 margin为auto"的方式
🍎去除浏览器默认样式
四、弹性布局
📝初体验
使用前
使用后
进一步的使用
📝flex 布局基本概念
flex 是 flexible box 的缩写. 意思为 "弹性盒子".
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
基础概念:
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
📝 实现元素的居中
📝注意
理解 stretch(拉伸):
这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度
align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
