学习目标
能够说出盒子模型的组成(content、padding、border、margin)
能够使用border的相关属性(width、color、style)
能够使用border-collapse实现边框合并
能够计算盒子的实际大小(content+padding+border)
能够说出*{margin:0;padding:0;}的作用
。。。。。。
盒子模型(思维模式)
一种思维方式(万物皆盒子,每个标签都可以看成是一个盒子)
盒子模型的组成
盒子模型的四个组成部分
- 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;
-
使用开发者工具查看盒子模型(计算盒子的大小,初级计算公式)
<!-- 需求 : 盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 --> 注意: 1.css设置的height和width设置的是内容的宽高 2.添加边框会让盒子变大 解决: 在设置边框之后根据初级公式,把height和width手动减去多出的部分 (手动内减) 解决方案:盒子内容 380*380 , 背景绿色, 边框:10px 实线 黑色
ヾ(๑╹◡╹)ノ"写一个小盒子(由内容和边框组成)
-------------------------------
ヾ(๑╹◡╹)ノ"不low导航~
内边距(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
------------------------------
让浏览器自动内减(拓展css3)~
<!-- 需求 :
盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 padding:20px
-->
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+右边框