网页中的盒子模型是怎样的？如何调整其样式设置？

本文共计3340个文字，预计阅读时间需要14分钟。

欢迎访问博客冰山一棵树Sankey，浏览效果更佳。直接右上角搜索该即可。自由互联主页：自由互联主页-冰山一棵树Sankey+CSDN主页：CSDN主页-冰山一棵树Sankey+前端学习：学习地址：黑马程序员

欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可

自由互联主页：自由互联主页-冰山一树Sankey
CSDN主页：CSDN主页-冰山一树Sankey

前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成

一. CSS三大特性

• 层叠性
• 继承性
• 优先级

具体可参考CSS 三大特性

二. 盒子模型

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面

2.1 看透网页组成的本质

网页布局的核心本质： 就是利用 CSS 摆盒子。

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容.

2.2 盒子模型组成

所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

2.3 边框

border可以设置元素的边框。