当前位置:   article > 正文

文本属性 以及背景图设置 相对 绝对定位 042

怎么指定背景为相对定位的参照

文本属性 以及背景图设置 相对 绝对定位 042

文本属性 : 

  文本对齐 text-align    有 none | center | left | right | justify

  文本颜色  color   首行缩进   建议使用 em 即相对内容的大小 2em 即首行缩进2个文本内容字符

  文本修饰 text- decoration none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

  行高 line-height 

    针对单行文本垂直居中

    公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。

    针对多行文本垂直居中

    行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。

第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px

第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

  字体大小 font-size  粗细 font-weight  字体系列 font-family

background 背景  有 背景色 背景图片  是否平铺

repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
inherit规定应该从父元素继承 background-repeat 属性的设置。

  雪碧图技术(精灵图技术):

    

    CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

    CSS 雪碧图应用原理:
    只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?

    其实就是 截取 大图一部分显示,而这部分就是一个小图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bojie{
            width: 28px;
            height: 30px;
            background-color: black;
            border: 1px solid red;
            /*默认是横向平铺 纵向平铺*/
            background-image: url("https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png");
            background-repeat: no-repeat;
            /*如果想调整图片在盒子中的距离*/
            /*background-position: 50px 100px;*/
            background-position: 0 -50px;
        }
    </style>
</head>
<body>

    <div class="bojie"></div>

</body>
</html>
View Code

  使用雪碧图的好处:

    1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; 
    2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
    3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 
    4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

    不足:

      1)CSS雪碧的最大问题是内存使用
      2)拼图维护比较麻烦
      3)使CSS的编写变得困难
      4)CSS 雪碧调用的图片不能被打印

 

    我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,

  那么我们可以此属性来制作通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

    background-attach

    设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动

定位 有相对定位 绝对定位 和 固定定位 

  相对定位:相对于自己原来的位置定位

  现象和使用:

    1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。

    2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right

  特性:

    1.不脱标

    2.形影分离

    3.老家留坑(占着茅房不拉屎,恶心人)

  所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

  用途:

    1.微调元素位置

    2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。

  参考点:

    自己原来的位置做参考点。

  绝对定位:

    特性:

      1.脱标 2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。

    参考点(重点):

      一、单独一个绝对定位的盒子

        1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
        2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

      二、以父辈盒子作为参考点

        1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。

        2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点

        3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

   注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。

   还要注意,绝对定位的盒子无视父辈的padding

    作用:页面布局常见的“父相子绝”,一定要会!!!!

绝对定位 盒子居中 

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
        }
View Code

  父相子绝参考点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .yeye{
            width: 800px;
            height: 800px;
            background-color: yellow;
            position: relative;
        }
        .father{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color:red;
            /*position: relative;*/
            /*定位 与padding没有任何关系*/
            /*padding: 50px;*/
        }
        .child1{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 200px;
            left: 10px;
        }
        .child2{
            width: 200px;
            height: 200px;
            background: darkmagenta;
            position: absolute;
            right: 0;
            top: 50%;
        }

    </style>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="child1"></div>
            <div class="child2"></div>
        </div>
    </div>

</body>
</html>

 

posted @ 2018-11-18 12:43 你没有想象的那么重要 阅读( ...) 评论( ...) 编辑 收藏
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/74580
推荐阅读
相关标签
  

闽ICP备14008679号