预科第十一天

今日内容概要

• 边框属性（重要）
• display（了解）
• 盒子模型（重要）
• 浮动属性（较难理解 应用很简单）
• 溢出属性
• 定位属性
• z-index属性
• 手动书写一个网页（重要）

今日内容详细

边框属性

• border-color
• border-style
• border-color

p{
border-width: 5px;
border-style: dotted;
border-color: blue;
}

 所有的属性名前缀都一样可以简写为

p{
border: 5px dotted blue;
}

border-radius

用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。

display属性

用于控制HTML元素的显示效果。

[display：none]：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

盒子模型

• margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
• padding：用于控制内容与边框之间的距离；   
• Border（边框）：围绕在内边距和内容外的边框。
• Concent（内容）：盒子的内容，显示文本和图像。

可以用类比的方法帮助记忆，盒子模型我们可以看成是快递盒

快递盒与快递盒之间的距离      外边距(margin)

快递盒的厚度                            边框(border)

快递盒与内部物体之间的距离   内边距(padding)

物体的大小                                内容(content)

当前缀一致时那么可以缩写为

margin：10px                 # 一个参数表示上下左右

margin：0px 40px             # 第一个控制上下 第二个控制左右

margin：20px 30px 40px       # 第一个控制上 第二个控制左右 第三个控制下

margin：10px 20px 30px 40px  # 上右下左（顺时针）

padding的规律跟margin一致

浮动属性

 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素

关于浮动的两个特点：

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

float #页面布局肯定会用到浮动

浮动带来的影响

 缺点：浮动会导致父标签元素“塌陷”

清除浮动的副作用（父标签塌陷问题）主要有三种方式：

• 固定高度：自己再写一个div撑着
• clear属性规定元素的哪一侧不允许其他浮动元素。
• 伪元素清除法

  .clearfix:after {
  content:''；
  display:block；
  clear:both；
  }

溢出属性

 

定位属性

非定位态(静态)
static：所有的标签默认都是非定位状态 无法使用定位改变位置
相对定位
position：relative：相对于标签原来的位置做定位
绝对定位
position：absolute：相对于已经定位过的父标签做定位
固定定位
position：fixed：相对于浏览器窗口做定位

是否脱离文档流

简单来说就是原来的位置是否可以被其他标签占用

脱离文档流

• 浮动
• 绝对定位
• 固定定位

不脱离文档流

• 相对定位