css3是什么 css3实例

本人熟悉前端(html,css,js,vue等)，后端(python)，爬虫，小程序等，老板有需求私信联系我

第01阶段.前端基础.盒子模型

盒子模型（CSS重点）

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

主题思路：

目标：

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

1.看透网页布局的本质

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

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

我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白 这个盒子有什么特点。

2. 盒子模型（Box Model）

• 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。总结：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

• 盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

标准盒子模型

3. 盒子边框（border）

• 语法：

border : border-width || border-style || border-color 

• 边框的样式：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线 dotted：边框为点线

3.1 边框综合设置

border : border-width || border-style || border-color 

例如：

 border: 1px solid red;  没有顺序 

3.2 盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

3.3 表格的细线边框

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
• 但是两个单元格之间的边框会出现重叠，从而使边框变粗
• 通过css属性：table{ border-collapse:collapse; } collapse 单词是合并的意思border-collapse:collapse; 表示相邻边框合并在一起。