基础班day07笔记

发表于
字数统计: 1.7k | 阅读时长 ≈ 6

学习目标

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

。。。。。。

理解上课的知识点……

盒子模型

一种思维方式（万物皆盒子）

t1

盒子模型的组成

盒子模型的四个组成部分

生活中的盒子：

box

回到代码的总结：

  • 内容：content 即盒子里面的文字或者标签
  • 内边距：padding 即盒子边框到内容之间的距离
  • 边框：border 即盒子的边框
  • 外边距：margin 即盒子与盒子之间的距离

边框（border）

border相关属性

  • border-width：边框的宽度
  • border-style：边框的样式
    • solid：实线 （用的最多）
    • dashed：虚线
    • dotted：点线
  • border-color：边框的颜色

border的连写

代码： border:1px solid #000;

书写顺序 ：

border: 边框宽度 边框样式 边框颜色;

单方向设置border

单独设置盒子的一条边框

代码： border-left:1px solid #000;

border-方位名词：边框粗细 边框样式 边框颜色；

1
2
3
4
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框

边框合并（border-collapse）

也叫做细线表格

之前使用表格属性设置表格的样式，其实不推荐使用样式属性，那我们使用css改写之前的效果

ヾ(๑╹◡╹)ﾉ”使用css改写之前的表格案例

代码： border-collapse:collapse；

效果：

让表格的边框变成真正的一条边框

盒子大小的初级计算公式

学完border之后，可以学习盒子大小的初级计算公式

需求：

1
2
3
<!-- 需求 : 
	盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 
-->
  • 设置的width和height其实是内容的宽高
  • 设置border会撑大盒子

使用开发者工具查看盒子模型

谷歌浏览器会帮构建出一个盒子模型

并且鼠标移入某部分的时候，页面中的对应的盒子的部分会高亮

box1

盒子大小的初级计算公式：

盒子的宽度 = 左边框 + 内容的宽度 + 右边框

高度同理

问题：现在设置完border之后盒子会撑大，怎么样才能满足需求呢？

解决： 手动内减

手动计算多余的值，然后在内容中减去即可

结果就是：

  • 盒子内容：380*380。即width和height都是380px
ヾ(๑╹◡╹)ﾉ”写一个小盒子（由内容和边框组成）

边框练习

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

效果

内边距（padding）

盒子边框与内容之间的距离（可以控制内容与边框之间的距离）

padding的取值

  • 一个值： padding：10px;
    • 上右下左都设置为10px
  • 两个值： padding：10px 20px;
    • 上下设置为10px
    • 左右设置为20px
  • 三个值： padding：10px 20px 30px;
    • 上设置为10px
    • 左右设置为20px
    • 下设置为30px
  • 四个值： padding：10px 20px 30px 40px;
    • 上设置为10px
    • 右设置为20px
    • 下设置为30px
    • 左设置为40px

记忆规则： 从上开始顺时针赋值，如果没有赋值的，看对面的

单方向设置padding

单独设置盒子的一边padding

代码： padding-left:10px;

padding-方位名词：边框粗细 边框样式 边框颜色；

1
2
3
4
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

盒子大小的终极计算公式

学完padding之后，可以学习盒子大小的终极计算公式了

需求： 

1
2
3
<!-- 需求 : 
	盒子尺寸 300*300 , 背景粉色, 上下左右20px的padding , 边框: 10px 实线 黑色 
-->
  • width和height设置的是内容的宽高
  • border会撑大盒子
  • padding也会撑大盒子

盒子大小的终极计算公式：

盒子的宽度 = 左border+ 左padding + 内容的宽度 + 右padding + 右border

高度同理

问题： 现在设置完border和padding之后盒子会撑大，怎样才能满足需求呢？

同样也是手动计算多余的值，然后在内容中减去即可

结果就是：

  • 盒子内容：240*240。即width和height都是380px

不会撑大盒子的特殊情况

两个互相嵌套的块级元素，如果子盒子没有设置宽度，此时子盒子的宽度默认就是父盒子的宽度。当给子盒子设置以下属性时，子盒子的宽度不会被撑大。

  • padding-left
  • padding-right
  • border-left
  • border-right
ヾ(๑╹◡╹)ﾉ”新浪导航（不low导航升级版）~

用之前的方法，当a标签的文字数量不确定时，页面会有问题。

普遍的方法应该使用padding

导航

CSS3盒模型（自动内减→box-sizing）

在实际项目中会大量的用到盒子模型，如果每个盒子都去手动内减，就和不方便，此时我们可以让浏览器帮咱们自动内减

CSS3的新属性：box-sizing可以完成自动内减的效果

需求：

1
2
3
<!-- 需求 : 
	盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色  padding:20px
-->

  • 手动内减

    项目中计算量太大，很麻烦

  • 自动内减

    给盒子设置 box-sizing:border-box 属性。此时设置的width和height就是盒子的实际宽度

ヾ(๑╹◡╹)ﾉ”新闻列表案例

熟悉border和padding的使用

04-练习-新闻列表

外边距（margin）

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

margin的取值

  • 一个值： margin：10px;
    • 上右下左都设置为10px
  • 两个值： margin：10px 20px;
    • 上下设置为10px
    • 左右设置为20px
  • 三个值： margin：10px 20px 30px;
    • 上设置为10px
    • 左右设置为20px
    • 下设置为30px
  • 四个值： margin：10px 20px 30px 40px;
    • 上设置为10px
    • 右设置为20px
    • 下设置为30px
    • 左设置为40px

记忆规则： 从上开始顺时针赋值，如果没有赋值的，看对面的

单方向设置margin

单独设置盒子的一边margin

代码： margin-left:10px;

margin-方位名词：边框粗细 边框样式 边框颜色；

1
2
3
4
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

marign单方向的应用

  • 上下应用

    • margin-top：能让盒子下移
    • margin-bottom：能让下面的盒子往下移

  • 左右应用（先转换成行内块）

    • margin-left：能让盒子右移
    • margin-right：能让右边的盒子往右移动

清除默认内外边距

浏览器会默认给一些标签设置margin和padding，在项目开始之前需要清除这些标签默认的margin和padding，留给自己设置。

比如：

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

因为要清除所有标签默认的内外边距，此时可以使用通配符完成

1
2
3
4
* { 
	padding: 0;
	margin: 0; 
}
ヾ(๑╹◡╹)ﾉ”爱宠知识案例~

05-练习-爱宠知识