web前端之CSS技术(三)
续web前端之CSS技术(一)
续web前端之CSS技术(二)
9. 盒子模型
9.1 看透网页布局的本质
网页布局过程:
- 先准备好相关的网页元素,网页元素基本都是盒子 Box 。
- 利用 CSS 设置好盒子样式,然后摆放到相应位置。
- 往盒子里面装内容.
网页布局的核心本质: 就是利用 CSS 摆盒子。
9.2 盒子模型的组成
所谓 盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型其本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 内容。
9.3 边框(border)
border
可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
-
语法:
border: border-width border-style border-color
边框可分开写:
border-top: border-width border-style border-color /*上边框*/ border-bottom: border-width border-style border-color /*下边框*/ border-left: border-width border-style border-color /*左边框*/ border-right: border-width border-style border-color /*右边框*/
-
解释:
属性 | 作用 |
---|---|
border-width | 边框粗细,单位是px |
border-style | 边框样式,如实线、虚线等 |
border-color | 边框颜色 |
注意: 三种属性的写法没有顺序。
border-style
值:
参数值 | 作用 |
---|---|
none | 无边框。与任何指定的border-width 值无关 |
hidden | 隐藏边框。IE不支持 |
dotted | 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 |
dashed | 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 |
solid | 实线边框 |
double | 双线边框。两条单线与其间隔的和等于指定的border-width 值 |
groove | 根据border-color 的值画3D凹槽 |
ridge | 根据border-color 的值画菱形边框 |
inset | 根据border-color 的值画3D凹边 |
outset | 根据border-color 的值画3D凸边 |
4. 注意:
边框会额外增加盒子的实际大小。因此有两种方案解决:
- 测量盒子大小的时候,不量边框.
- 如果测量的时候包含了边框,则需要
width/height
减去边框宽度
9.4 内边距(padding)
padding
属性用于设置内边距,即边框与内容之间的距离。
-
语法:
padding-top: value /*上内边距*/ padding-bottom: value /*下内边距*/ padding-left: value /*左内边距*/ padding-right: value /*右内边距*/
-
解释:
value
表示要设置的内边距的像素,单位是px
-
复合写法:
padding: top_value right_value bottom_value left_value
padding: top_value right_and_left_value bottom_value
padding: top_and_bottom_value right_and_left_value
padding: top_and_right_and_bottom_and_left_value
-
注意:
- 内边距会影响盒子的实际大小。
- 如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
- 如果保证盒子跟效果图大小保持一致,则让
width/height
减去多出来的内边距大小即可。 - 如果盒子本身没有指定
width/height
属性, 则此时padding
不会撑开盒子。
9.5 外边距(margin)
margin
属性用于设置外边距,即控制盒子和盒子之间的距离。
-
语法:
margin-top: value /*上内边距*/ margin-bottom: value /*下内边距*/ margin-left: value /*左内边距*/ margin-right: value /*右内边距*/
-
解释:
value
表示要设置的内边距的像素,单位是px
-
复合写法:
margin: top_value right_value bottom_value left_value
margin: top_value right_and_right_value bottom_value
margin: top_and_bottom_value right_and_left_value
margin: top_and_right_and_bottom_and_left_value
margin
复合写法代表的意义跟 padding 完全一致。 -
外边距典型应用:
外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒子必须指定了宽度(
width
) - 盒子左右的边距都设为
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
还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题
-
9.6 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此在布局前,首先要清除网页元素的内外边距。
-
语法:
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }
-
注意:
行内元素为了照顾兼容性,尽量 只设置左右内外边距,不要设置上下内外边距。但是行内元素转换为块级和行内块元素就可以都设置了。
9.7 圆角边框
border-radius
属性用于设置元素的外边框圆角。
-
语法:
border-radius: length;
-
注意:
· 参数值可以为数值或百分比的形式
· 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
· 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
· 分开写:border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
和border-bottom-left-radius
· 兼容性: ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用
9.8 盒子阴影
box-shadow
属性用于为盒子添加阴影。
-
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
-
解释:
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
- 注意:
· 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
· 盒子阴影不占用空间,不会影响其他盒子排列。
9.9 文字阴影
text-shadow
属性将阴影应用于文本。
-
语法:
text-shadow: h-shadow v-shadow blur color;
-
解释:
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。 |
10. 浮动
10.1 传统网页布局的三种方式
网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):
· 普通流(标准流)
· 浮动
· 定位
10.2 标准流(普通流/文本流)
所谓的标准流:就是标签按照规定好默认方式排列.
-
块级元素会独占一行,从上向下顺序排列。
· 常用元素:div
、hr
、p
、h1~h6
、ul
、ol
、dl
、form
、table
-
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
· 常用元素:span
、a
、i
、em
等以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。 这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。
-
实际开发中,一个页面基本都包含了这三种布局方式 。
10.3 为什么需要浮动
有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
10.4 什么是浮动
float
属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
-
语法:
选择器 { float: 属性值; }
-
解释:
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素左浮动 |
right | 元素右浮动 |
10.5 浮动特性
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的,是紧挨在一起的
- 行内元素同理
- 注意:
- 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐。
- 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。
- 一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。
10.6 清除浮动
-
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。
-
如果父盒子本身有高度,则不需要清除浮动
-
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
-
语法:
选择器 {clear: 属性值;}
-
解释:
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动元素的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动元素的影响) |
both | 同时清除左右两侧浮动元素的影响 |
- 清除浮动的方法:
-
额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=”clear:both”></div>
,或者其他标签(如<br />
等)。
注意: 要求这个新的空标签必须是块级元素。 -
父级添加 overflow 属性
可以给父级添加overflow
属性,将其属性值设置为hidden
、auto
或scroll
。 -
父级添加after伪元素
:after
方式是额外标签法的升级版。也是给父元素添加.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }
-
父级添加双伪元素
也是给父元素添加.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
-