目标
能够准确阐述盒子模型的四个组成部分
能够利用边框复合写法给元素添加边框
能够计算盒子的实际大小
能够利用盒子模型布局模块案例
能够给盒子设置圆角边框
能够给盒子添加阴影
能够给文字添加阴影
目录
盒子模型
PS基本操作
综合案例
圆角边框
盒子阴影
文字阴影
盒子模型
页面布局学习的三大核心——盒子模型、浮动和定位。
看透网页布局的实质
网页布局过程:
先准备好相关的网页元素,网页元素基本都是盒子Box。
利用CSS设置好盒子样式,然后摆放到相应位置。
往盒子里面装内容。
网页布局的核心本质:
就是利用CSS摆盒子
盒子模型组成
盒子模型:把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边框、内边距和实际内容。
边框(border)
border可以设置元素的边框。
边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
语法
border: border-width||border-style||border-color
属性 | 作用 |
border-width | 定义边框的粗细,一般情况下单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的符合写法
边框简写:
border: 1px solid red; 没有先后顺序
边框分开写法:
border-top: 1px solid red; (只指定上边框,其余同理 border-bottom)
注意边框的层叠性
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式,用来控制相邻单元格的边框。
语法
border-collapse:collapse;
注意
collapse表示合并的意思
border-collapse:collapse;表示相邻边框合并在一起
边框会影响盒子实际大小
解决办法:
测量盒子大小的时候,不量边框
如果测量的时候包含了边框,则需要width/height减去边框宽度(边框是两个)
外边距margin
内边距padding
内边距(padding)
padding属性用于设置内边距,即边框与内容之间的距离
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding属性(简写属性)可以有1到4个值——(空格隔开)
给盒子指定了padding之后,会发生两件事
1.内容和边框有了距离,添加了内边距
2.padding影响了盒子实际大小
也就是说:如果盒子已经有了宽度和高度,再指定内边框,会撑大盒子。
解决方案:
如果保证盒子和效果图大小保持一致,则让width/height减去多余的内边距大小(左右两个的)即可
好处
可以不给盒子宽度,直接使用padding,padding可以影响盒子大小。
但是如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小。
外边距(margin)
margin属性用于设置外边距,即控制盒子和盒子之间的距离。
属性 | 作用 |
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin简写方式
margin简写方式代表的意义跟padding完全一致。
外边距的典型应用
外边距可以让块级盒子水平居中,但是必须满足两个条件:
盒子必须指定了宽度(width)。
盒子左右的外边距都设置为auto。
.header { width:960px; margin:0 auto;}
三种常见的写法
margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;
注意:
以上方法是让块级元素水平居中,行内元素或者行内块元素居中给其父元素添加text-align:center;即可
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案:
尽量只给一个盒子添加margin属性。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
可以为父元素定义上边框
可以为父元素定义上内布局
可以为父元素添加overflow:hidden
其他方法比如浮动、固定、绝对定位的盒子不会有塌陷问题。
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的边距也不一致,因此在布局前首先要清除下网页元素的内外边距。
* { /*星号是通配符选择器*/
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
注意:
行内元素为了照顾兼容性、尽量只设置左右内外边距,不要设置上下内外边距。
但是转换为块级和行内块元素就可以了!