CSS基础第三次课

2018-06-15 本文已影响107人璐璐熙可

本节大纲

盒模型、内边距、外边距、边距合并
定位、相对定位、绝对定位
浮动、清除浮动、文档流概念

课程内容

盒模型

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

image

(1)Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
(2)Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
(3)Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
(4)Content - 盒子的内容，显示文本和图像

边距宽高
设置宽度和高度是指Content部分的宽度和高度

width:250px;
padding:10px;
border:5px solid gray;
margin:15px;

div总宽度为：250 ＋ 10×2 ＋ 5×2 + 15×2＝ 310
如果只有固定宽度250像素的空间，那么设置宽度为:250-padding×2-border×2-margin×2 = content

边距写法

padding: 10px 10px 10px 10px; /* 上边距 右边距 下边距 左边距 */
padding: 10px;                /* 等同于 10px 10px 10px 10px */
margin: 10px 5px;             /* 等同于 10px 5px 10px 5px */
margin: 0 auto;               /* 等同于 0 auto 0 auto */
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;

边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

image

因此，外边距设置最好一致（要上边距都上边距，要下边距都下边距）。
定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式

div{
    position: absolute; /* static, relative, fixed */
}

static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative
生成相对定位的元素，相对于其正常位置进行定位。如"left:20px" 会向元素的 LEFT 位置添加 20 像素.

image

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

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

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

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。

image

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

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

fixed

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

对于定位元素（非static），z-index用来控制层叠元素的显示优先级，值越大优先级越高

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

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

image

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

image

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

image

清除浮动
浮动元素引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
  使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题。
语法：
```
 clear : none | left | right | both
```
取值：
```
 none  :  默认值。允许两边都可以有浮动对象
 left   :  不允许左边有浮动对象
 right  :  不允许右边有浮动对象
 both  :  不允许有浮动对象
```

注意：清除浮动时，添加clear属性只能对自己有效。如

对于问题1，给父元素添加clearfix样式。

.clearfix:after{
    content: "";
    display: block;
    clear:both;
}

CSS基础第三次课

猜你喜欢

热点阅读