2018-12-27 绝对定位固定定位元素的层级背景电

作者: 一片落叶就是渺小 | 来源:发表于2019-01-02 12:08 被阅读0次

HTML 日常了解6
定位09-11
2018-12-27 绝对定位固定定位元素的层级背景电
2018-11-28
2019-04-17定位
Day06
CSS 定位，导航条，背景及表格
31、CSS定位position之fixed&sticky
5. CSS 定位
前端开发之绝对定位的疑问

绝对定位
绝对定位指使元素相当于html元素或离他最近的祖先元素进行的定位
当position设置为absolute时，开启绝对定位
特点：
绝对定位会使元素完全脱离文本流
绝对定位的块元素的宽度会被其内容撑开
绝对定位会使行内元素变成块元素

固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚蛋网页时，固定元素会在屏幕上保持不动
当position设置为fixed时开启固定定位

1、元素的层级:
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index

2、设置图片背景:
background-image: url()
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复

3、背景偏移和定位：
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量
第一个值是水平偏移量
如果指定的是一个正值，则图片会向右移动指定的像素
如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
如果指定的是一个正值，则图片会向下移动指定的像素
如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
4、背景定位：
当背景图片的background-attachment设置为fixed时，
背景图片的定位永远相对于浏览器的窗口
background-attachment: fixed;
5、雪碧图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮练习</title>
    <style type="text/css">
        .btn:link{
            /*将a转换为块元素*/
            display: block;
            /*设置宽高*/
            width: 93px;
            height: 29px;
            /*设置背景图片*/
            background-image: url(img/btn/btn2.png);
            /*设置背景图片不重复*/
            background-repeat: no-repeat;
        }
        .btn:hover{
            /*当是hover状态时，希望图片可以向左移动*/
            background-position: -93px 0px;
        }
        .btn:active{
            /*当是active状态时，希望图片再向左移动*/
            background-position: -186px 0px;
        }
    </style>
</head>
<body>
    <!-- 创建一个超链接 -->
    <a href="#" class="btn"></a>
</body>
</html>

6、背景属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简写背景属性</title>
    <style type="text/css">
        body{
            height: 5000px;
            /*设置一个背景颜色*/
            /*background-color: #bfa;*/
            /*设置一个背景图片*/
            /*background-image: url(img/3.png);*/
            /*设置背景不重复*/
            /*background-repeat: no-repeat;*/
            /*设置背景图片的位置*/
            /*background-position: center center;*/
            /*设置背景图片不随滚动条滚动*/ 
            /*background-attachment: fixed;*/

            background-color: #bfa;

            /*background
                - 通过该属性可以同时设置所有背景相关的样式
                - 没有顺序的要求，谁在前睡在后都行
                - 也没有数量的要求，不写的样式就使用默认值
            */
            background: #bfa url(img/3.png) center center no-repeat fixed;
        }
    </style>
</head>
<body>
    
</body>
</html>

7、表格：
在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几对tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
rowspan用来设置纵向的合并单元格
colspan横向的合并单元格
html表格
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件