前端知识(五)CSS盒子模型(很实用)

时间:2022-01-12 来源:未知网络 作者:996建站网

各位大哥养成好习惯,点赞再看,关注不迷路,前后端知识这里都有,由浅入深,我们一起进步,你的支持就是我最大的动力。

第01阶段.前端基础.盒子模型
盒子模型(CSS重点)

css学习三大重点: css 盒子模型 、 浮动 、 定位

主题思路:

前端知识(五)CSS盒子模型(很实用)插图

目标:

  • 理解:
  • 能说出盒子模型有那四部分组成
  • 能说出内边距的作用以及对盒子的影响
  • 能说出padding设置不同数值个数分别代表的意思
  • 能说出块级盒子居中对齐需要的2个条件
  • 能说出外边距合并的解决方法
  • 应用:
  • 能利用边框复合写法给元素添加边框
  • 能计算盒子的实际大小
  • 能利用盒子模型布局模块案例

1.看透网页布局的本质

网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?

前端知识(五)CSS盒子模型(很实用)插图

  • 看透网页布局的本质:
  • 首先利用CSS设置好盒子的大小,然后摆放盒子的位置。
  • 最后把网页元素比如文字图片等等,放入盒子里面。
  • 以上两步 就是网页布局的本质

前端知识(五)CSS盒子模型(很实用)插图

我们明白了,盒子是网页布局的关键点,所以我们更应该弄明白 这个盒子有什么特点。
昨天在知乎上还看到一个,前端程序员是否需要CSS美工技术,这里就应该是前端程序员的一项技术。

2. 盒子模型(Box Model)

  • 所谓盒子模型:
  • 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

前端知识(五)CSS盒子模型(很实用)插图

前端知识(五)CSS盒子模型(很实用)插图1

我的一句话总结:

  • 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
  • 盒子里面的文字和图片等元素是 内容区域
  • 盒子的厚度 我们成为 盒子的边框
  • 盒子内容与边框的距离是内边距(类似单元格的 cellpadding)
  • 盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)

标准盒子模型

这个就是谷歌浏览器的调试模式下可以看到的,F12进入,右侧css到底

前端知识(五)CSS盒子模型(很实用)插图1

前端知识(五)CSS盒子模型(很实用)插图1

3. 盒子边框(border)

前端知识(五)CSS盒子模型(很实用)插图1

  • 语法:
border : border-width || border-style || border-color 

前端知识(五)CSS盒子模型(很实用)插图2

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序