web前端 (07)CSS 03+盒模型+定位

目录
盒模型 (框模型) *****
内边距 padding ***
外边距 margin ***
列表样式 *
鼠标形状 ***
定位 *****
    默认定位(static定位) *****
    如何修改 默认定位情况 元素分类: *****
    相对定位 *****
    绝对定位 *****
    固定定位 *****

盒模型 (框模型) *****

盒模型指的是, 元素在网页中占用空间大小的模型:
占用空间的宽度: 元素自身宽度+左右内边距宽度+左右边框宽度+左右外边距宽度 !
占用空间的高度: 元素自身高度+上下内边距高度+上下边框高度+上下外边距高度 !

内边距 padding ***

指的是元素的内容 与 元素边框的距离

格式1.
通过一个样式, 指定四个方向相同的内边距
padding:长度;

格式2.
通过一个样式, 指定上下 和左右的内边距 !
padding:上下内边距长度 左右内边距长度;

格式3.
通过一个样式, 分别指定上右下左的内边距
padding:上 右 下 左;

格式4.
单独通过一个样式,设置左右上下内边距;
左内边距: padding-left:长度;
右内边距: padding-right:长度;
上内边距: padding-top:长度;
下内边距: padding-bottom:长度;

外边距 margin ***

指的是元素的边框 距离其他元素 或者 父元素边界的距离 , 可以是负数 !

外边距的使用中存在三个特殊的操作:
- 可以设置外边距为负数 , 会层叠显示
- 块元素之间 , 上下相邻外边距 , 外边距较大者生效 !
- 可以通过设置左右外边距为 auto , 来实现元素的横向居中 !

格式1.
通过一个样式, 指定四个方向相同的外边距
margin:长度;

格式2.
通过一个样式, 指定上下 和左右的外边距 !
margin:上下外边距长度 左右外边距长度;

格式3.
通过一个样式, 分别指定上右下左的外边距
margin:上 右 下 左;

格式4.
单独通过一个样式,设置左右上下外边距;
左外边距: margin-left:长度;
右外边距: margin-right:长度;
上外边距: margin-top:长度;
下外边距: margin-bottom:长度;

文字样式 *

• 字体大小 ***
  font-size:长度;

• 文本横向排列
  text-align:left/center/right;

• 文本垂直排列 (测试时未产生效果)
  - vertical-align:
  值:
  - top : 把文字的顶端与当前行中最高元素的顶端对齐 !
  - text-top : 把文字的顶端与父元素的内容顶部对齐 !
  - bottom : 把文字的底部与当前行中最低的元素对齐
  - text-bottom : 把文字的底部与父元素的内容底部对齐!
  - middle : 垂直居中!

• 字体设置(通常是给BODY设置)
  font-family:“字体名”;

• 文字斜体
  font-style:oblique;

• 文字加粗
  font-weight:bold;

• 文字修饰线
  text-decoration:
  - underline : 下划线
  - overline : 上划线
  - line-through: 删除线

• 文本行高 ***

  • line-height:长度;
    //设置的是文本的行高度, 跟文字大小无关,
    //可以通过设置文本行高与元素等高 来实现垂直居中 !

• 文本首行缩进
  text-indent:2em; //通常值为2em, 可以调整为其他的长度!

表格边框问题 双线问题 了解

正常情况下, 我们需要给table和td/th添加边框 , 才可以实现表格边框, 但是依然有双线问题 .

解决:
border-collapse: collapse;

列表样式 *

通过list-style-type样式, 修改列表的前置序号和前置图标样式.

(此样式, 可以应用到 ul/ol/li 标签)

取值:
无序列表取值:
- none : 隐藏图标,不显示;
- disc : 实心圆 默认;
- circle : 空心圆
- square : 方块

有序列表取值:
    -   none    :   隐藏图标,不显示;
    -   lower-romen:        小写罗马数字
    -   ...

鼠标形状 ***

cursor:
取值:
- default : 默认;
- pointer : 手指 ***
- text : 焦点形状(工字形)
- wait : 等待
- help : 帮助
- progress: 进度

定位 *****

指的是: 一个元素 在网页中显示的位置

默认定位(static定位) *****

默认定位中三种元素分类:

1.  块元素 block
    独占一行, 可调整宽度与高度, 多个块元素之间上下排列.

2.  行内块元素 inline-block
    与其他行内元素或行内块元素 共享一行空间, 从左至右排列, 排满一行自动换行 , 可调整宽高.

3.  行内元素 inline
    与其他行内元素或行内块元素 共享一行空间, 从左至右排列, 排满一行自动换行 , 不可调整宽高.

如何修改 默认定位情况 元素分类: *****

display样式:
    -   none    :   隐藏, 不显示此元素 !
    -   inline-block        调整为行内块元素 
    -   block   块元素
    -   inline  行内元素

浮动 定位 *

被添加了浮动的元素, 不会再按照默认定位的方式 去显示元素,
我们可以通过浮动定位, 调整元素漂浮显示在 父元素的左或右部 !
格式:
float : left/right;

清除浮动影响:
控制某元素的 左/右/两边 不允许出现浮动元素:
clear:left/right/both;

相对定位/绝对定位/固定定位 确定元素位置的方式:

这三种定位, 都是通过如下四个样式来调整位置的:

left    :   长度;
top     :   长度;
right   :   长度;
bottom  :   长度;

在相对定位中 , 上述的四个样式 ,表示:
距离原位置 的某方向的偏移 !

在绝对定位中, 上述四个样式, 表示:
距离body 或最近的 绝对定位/固定定位 的祖先元素 的 某方向边界的距离 !

固定定位:
表示距离对应方向, 浏览器边界的距离 !

相对定位 *****

指的是相对于自身原位置, 进行x与y的偏移操作 !
格式:
position:relative;

特点:
- 元素偏移后, 采用覆盖的方式显示 !
- 元素偏移后, 依然占用原有的网页空间!

绝对定位 *****

指的是相对于body的边界 (或绝对定位和固定定位的祖先元素),设置距离
格式:
position:absolute;

特点:
不占用任何的网页空间
采用覆盖显示, 无法超出当前屏幕范围 !

固定定位 *****

指的是相对于浏览器的边框 ,设置距离 !
格式:
position:fixed;

特点:
不占用任何的网页空间
采用覆盖显示, 随着内容的滑动, 依然漂浮在固定的位置上 !

修改元素在定位中的 元素堆叠顺序 *

默认时, 编写靠后者 显示靠前 !

设置堆叠优先级:

    z-index:数值;
    默认值为0 , 值越大表示距离用户越近, 可以设置为负数 !