HTML02(定位,浮动)

• 标签

1. 独占一行的标签叫块级标签;
2. 可以在一行上展示的标签叫做内联标签;
3. 块级标签和内联标签可以切换, 通过控制标签的显示方式。
   1. display: inline;将元素设置为内联元素;
   2. display: block;将元素设置为块级元素;

• 设置容器

1. 垂直居中显示: line-height等于容器的高度.
2. 文本居中: text-align: center;
3. 设置内边距: padding: 20px;
4. 设置外边距: margin: 20px;
5. 设置边框: border 1px solid 颜色;
6. 设置圆边角: border-redius:10px;
7. 组件在流布局中居中: margin: 0 auto;
8. 鼠标靠近会变成小手: cursor: pointer;
9. 缓慢变化: transition: all 0.8s;
10.  z-index属性用于控制元素的堆叠顺序(z轴顺序),在上层显示:  style="z-index: 99
11. 伪类控制子组件:

    .boxd:hover .boxc{
        left:200px;
    }

     

• 浮动

1. 向左浮动: float:left  让div在同一行显示;
2. 向右浮动:float:right
3. 取消浮动:   <div style="clear:both;"></div>;

• 定位

1. 静态定位: 占空间 static是HTML元素的默认定位方式。这种定位方式不会受到top、bottom、left或right等属性影响。 position: static;
2. 相对定位: 占据原来的空间  参照物为该组件原来的位置;   position: realtive;
3. 绝对定位: 不占空间  参照物:第一个非static定位的父组件,如果找不到这样的父组那就是html  position:absolute;
4. 窗口定位: 不占空间  参照物:浏览器窗口  position:fixed;