CSS 初阶语法(七)

78 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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 浮动特性

  1. 浮动元素会脱离标准流(脱标)

    a. 脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)

    b.浮动的盒子不再保留原先的位置

  2. 浮动的元素会一行内显示并且元素顶部对齐

    a.注意∶浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮 动的盒子,多出的盒子会另起一行对齐。

  3. 浮动的元素会具有行内块元素的特性

    a.如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定

    b.浮动的盒子中间是没有缝隙的,是紧挨着一起的

    c.行内元素同理