web前端基础复习_day05_CSS

一. 盒子模型

1. 概述

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
  

2. 组成部分

① Margin(外边距) - 清除边框外的区域，外边距是透明的。

• 常用属性
  • margin-left: 左外边距
  • margin-right: 右外边距
  • margin-top: 上外边距
  • margin-bottom: 下外边距
• 简写属性;
  • margin: 20px;: 上下左右外边距都是20px;
  • margin: 10px 20px;: 上下的外边距是10px, 左右的外边距是20px;
  • margin: 10px 20px 30px 40px;: 从左到有分别是上右下左的外边距;

② Border(边框) - 围绕在内边距和内容外的边框。

• 常用属性
  • border-style 属性用来定义边框的样式. 常见取值有:
    • solid: 定义实线边框
    • dashed: 定义一个虚线边框
    • dotted: 定义一个点线边框
    • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
  • border-width 属性为边框指定宽度。常见取值有:
    • 可以指定长度值，比如 2px 或 0.1em;
    • 使用 3 个关键字之一， thick 、medium（默认值） 和 thin。
  • border-color 属性用于设置边框的颜色。常见取值有:
    • name - 指定颜色的名称，如 “red”
    • RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
    • Hex - 指定16进制值, 如 “#ff0000”
• 简写属性
  • border:5px solid red; 设置边框宽度为5px,样式为实线, 颜色为红色;

③ Padding(内边距) - 清除内容周围的区域，内边距是透明的。

• 常用属性: 同Margin

④ Content(内容) - 盒子的内容，显示文本和图像。

• 常用属性:
  • width: 属性为盒子指定宽度。
  • height: 属性为盒子指定高度。

二. 边框圆角和边框阴影

1. border-radius

① 概述

• 属性是一个简写属性，用于设置四个 border-*-radius 属性。
• 该属性允许您为元素添加圆角边框！

② 示例

border-radius:2em;

/**等价于：**/
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

2. box-shadow

① 概述

• 属性向框添加一个或多个阴影。

② 语法

• box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。
  • spread 可选。阴影的尺寸。
  • color 可选。阴影的颜色。请参阅 CSS 颜色值。
  • inset 可选。将外部阴影 (outset) 改为内部阴影。

③ 示例

box-shadow: 10px 10px 5px #888888;

三. 背景样式

background

1. background-color

• 设置元素的背景颜色。

• 可能的值:

  • color_name 规定颜色值为颜色名称的背景颜色（比如 red）。
  • hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
  • rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
  • transparent 默认。背景颜色为透明。
  • inherit 规定应该从父元素继承 background-color 属性的设置。

• 示例

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

2. background-image

• 把图像设置为背景。

• 可能的值:

  • url(‘URL’) 指向图像的路径。
  • none 默认值。不显示背景图像。
  • inherit 规定应该从父元素继承 background-image 属性的设置。

• 示例

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

3. background-repeat

• 设置背景图像是否及如何重复。

• 可能的值:

  • repeat 默认。背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
  • inherit 规定应该从父元素继承 background-repeat 属性的设置。

• 示例

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

4. background-position

• 设置背景图像的起始位置。

• 可能的值:

  • top[或者center/bottom] left[或者center/right] 。如果您仅规定了一个关键词，那么第二个值将是"center"。
  • x% y%: 第一个值是水平位置，第二个值是垂直位置。

• 示例

body
{ 
	background-image:url('bgimage.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
}

5. background-attachment

• 背景图像是否固定或者随着页面的其余部分滚动。

• 可能的值:

  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
  • fixed 当页面的其余部分滚动时，背景图像不会移动。
  • inherit 规定应该从父元素继承 background-attachment 属性的设置。

• 示例

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

6. background

• 简写属性，作用是将背景属性设置在一个声明中。
• 可以设置如下属性：
  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image
• 如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

四. 元素的定位和浮动

1. 定位

1. position 属性

① static

• 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

② relative

• 生成相对定位的元素，相对于其正常位置进行定位。
• 因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

③ absolute

• 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
• 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

④ fixed

• 生成绝对定位的元素，相对于浏览器窗口进行定位。
• 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

2. 相对定位

① 概述

• 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

② 示例

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

3. 绝对定位

① 概述

• 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

② 示例

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

③ 注意

• 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

④ 绝对定位的盒子居中

#box_relative {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 负的宽度的一半;
  margin-top: 负的高度的一半;
}

4. 固定定位

① 概述

• 元素的位置相对于浏览器窗口是固定位置。
• 即使窗口是滚动的它也不会移动：

② 示例

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

5. z-index

① 概述

• z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
• 元素可拥有负的 z-index 属性值。
• 仅能在定位元素上奏效（例如 position:absolute;）

② 可能的值

• auto 默认。堆叠顺序与父元素相等。
• number 设置元素的堆叠顺序。
• inherit 规定应该从父元素继承 z-index 属性的值。

③ 示例

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

2. 浮动

1. 概念

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

2. float

① 概述

• float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

② 可能的值

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
• inherit 规定应该从父元素继承 float 属性的值。

③ 示例

img
  {
  float:right;
  }

3. 清除浮动的影响

1. clear 属性

① 概述

• 规定元素的哪一侧不允许其他浮动元素。

② 可能的值:

• left 在左侧不允许浮动元素。
• right 在右侧不允许浮动元素。
• both 在左右两侧均不允许浮动元素。
• none 默认值。允许浮动元素出现在两侧。
• inherit 规定应该从父元素继承 clear 属性的值。

③ 示例

img
  {
  float:left;
  clear:both;
  }

2. overflow 属性

① 概述

• 属性规定当内容溢出元素框时发生的事情。

② 可能的值:

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

③ 示例

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }