bordercollapse

⿊马程序员前端-CSS盒⼦模型以及PS基础

前端学习笔记教程不定期更新中，传送门：

上⼀期的CSS⼊门笔记没有更新完，继续更新中…

今天继续学习，CSS盒⼦模型以及PS基础。

下⾯开始继续更新内容，前⾯链接⼤家⽤来查漏补缺哦。

学习⽬录

⼀、盒⼦模型之⽹页布局的本质

⽹页布局的核⼼本质就是利⽤CSS摆盒⼦。

⽹页布局过程：

1.先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box。

2.利⽤CSS设置好盒⼦样式，然后摆放到相应位置。

3.往盒⼦⾥⾯装内容

⼆、盒⼦模型（BoxModel）组成

盒⼦模型：把HTML页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。

CSS盒⼦模型本质上是⼀个盒⼦，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容

三、边框（border）

3.1边框的使⽤

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)边框样式边框颜⾊；

2、语法：

边框样式border-style可以设置如下值：

-none：没有边框即忽略所有边框的宽度（默认值）

-solid：边框为单实线(最为常⽤的)

-dashed：边框为虚线

-dotted：边框为点线

3、边框的合写分写

边框分开写法

3.2表格的细线边框

1、border-collapse属性控制浏览器绘制表格边框的⽅式。它控制相邻单元格的边框。

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

border:1pxsolidred;

border-top:1pxsolidred;/*只设定上边框，其余同理*/

2、语法：

collapse单词是合并的意思

border-collapse:collapse;表⽰相邻边框合并在⼀起

3.3边框会影响盒⼦实际⼤⼩

边框会额外增加盒⼦的实际⼤⼩。因此我们有两种⽅案解决：

-测量盒⼦⼤⼩的时候,不量边框。

-如果测量的时候包含了边框,则需要width/height减去边框宽度

四、内边距（padding）

4.1内边距的使⽤⽅式

1、padding属性⽤于设置内边距，即边框与内容之间的距离。

2、语法：

合写属性：

分写属性

4.2内边距会影响盒⼦实际⼤⼩

1、当我们给盒⼦指定padding值之后，发⽣了2件事情：

内容和边距有了距离，添加了内边距

padding影响了盒⼦实际⼤⼩

2、内边距Udine盒⼦⼤⼩的影响：

-如果盒⼦已经有了宽度和⾼度，此时再指定内边框，会撑⼤盒⼦。

-如何盒⼦本⾝没有指定width/height属性,则此时padding不会撑开盒⼦⼤⼩。

3、解决⽅案：

如果保证盒⼦跟效果图⼤⼩保持⼀致，则让width/height减去多出来的内边距⼤⼩即可。

border-collapse:collapse;

五、外边距（margin）

5.1外边距的使⽤⽅式

margin属性⽤于设置外边距，即控制盒⼦和盒⼦之间的距离

5.2外边距的使⽤⽅式

外边距可以让块级盒⼦⽔平居中的两个条件：

-盒⼦必须指定了宽度（width）。

-盒⼦左右的外边距都设置为auto。

常见的写法，以下三种都可以：

注意：以上⽅法是让块级元素⽔平居中，⾏内元素或者⾏内块元素⽔平居中给其⽗元素添加text-align:center即可。

5.3外边距合并

使⽤margin定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上⾯的元素有下外边距margin-bottom，下⾯的元素有上外边距margin-top，则他

们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较⼤者这种现象被称为相邻块元素垂直外边距的合并。

1margin-left:auto;margin-right:auto;

2margin:auto;

3margin:0auto;

2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（⽗⼦关系）的块元素，⽗元素有上外边距同时⼦元素也有上外边距，此时⽗元素会塌陷较⼤的外边距值。

解决⽅案：

-可以为⽗元素定义上边框。

-可以为⽗元素定义上内边距。

-可以为⽗元素添加overflow:hidden。

5.4清除内外边距

⽹页元素很多都带有默认的内外边距，⽽且不同浏览器默认的也不⼀致。因此我们在布局前，⾸先要清除下⽹页元素的内外边距。

注意：⾏内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和⾏内块元素就可以了

六、PS基本操作

因为⽹页美⼯⼤部分效果图都是利⽤PS（Photoshop）来做的，所以以后我们⼤部分切图⼯作都是在PS⾥⾯完成。

部分操作：

-⽂件→打开：可以打开我们要测量的图⽚

-Ctrl+R：可以打开标尺，或者视图→标尺

-右击标尺，把⾥⾯的单位改为像素

-Ctrl+加号(+)可以放⼤视图，Ctrl+减号(-)可以缩⼩视图

-按住空格键，⿏标可以变成⼩⼿，拖动PS视图

-⽤选区拖动可以测量⼤⼩

-Ctrl+D可以取消选区，或者在旁边空⽩处点击⼀下也可以取消选区

欢迎⼩伙伴们留⾔哦，期待看到⼤家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。

1*{

2padding:0;/*清除内边距*/

3margin:0;/*清除外边距*/

4}