开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天,点击查看活动详情
11.2盒子阴影
CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。
语法:
box-shadow:h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影位置,允许负值 |
| v-shadow | 必需。垂直阴影位置,允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影(outset)改为内部阴影 |
默认为outset ,但不能主动设置为outset
11.3文字阴影
在css3中,我们可以使用text-shadow属性将阴影应用于文本。
语法:
text-shadow:h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影位置,允许负值 |
| v-shadow | 必需。垂直阴影位置,允许负值 |
| blur | 可选。模糊距离 |
| color | 可选。阴影颜色 |
12.浮动(float)
12.1 浮动语法
网页布局第一准则:
- 多级块级元素纵向排列找标准流
- 多个块级元素横向排列找浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 {float:属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动(默认值) |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
12.2 浮动特性
-
浮动元素会脱离标准流(脱标)
a. 脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)
b.浮动的盒子不再保留原先的位置
-
浮动的元素会一行内显示并且元素顶部对齐
a.注意∶浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮 动的盒子,多出的盒子会另起一行对齐。
-
浮动的元素会具有行内块元素的特性
a.如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
b.浮动的盒子中间是没有缝隙的,是紧挨着一起的
c.行内元素同理