Fork me on GitHub

CSS 3. 文本|字体|背景|定位

1、文本属性和字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:400px;
            height: 300px;
            /*background-color: red;*/
            border: 1px solid red;
            font-size: 20px;/*设置字体大小  px为像素   rem  em  %用在盒子不写宽度继承了父盒子，这三个主要用在移动端； 默认的字体大小是16px */
            font-weight: 700; /*字体粗细，默认normal;bold加粗；bolder更加粗；lighter很细；默认数值是400；*/
　　　　　　　font-style:oblique; /*推荐设置斜体的时候用oblique，italic，normal*/

            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            text-align: center; /*文本水平居中* justify两端对齐（只对英文有效）；默认是左对齐，right是右对齐； */
　　　　　　　text-shadow:0px 0px 1px #fff;  /*设置阴影效果*/

            text-decoration: none; /*默认是none没有下划线；underline下划线、underline blue； 主要用于清除a标签的默认样式（下划线）*/
            color: blue;  /*字体颜色*/
            cursor: pointer; /*光标，小手状态；*/
            /*line-height: 300px;行高，它的高度等于height的高度，垂直水平居中。*/
            /*1em = 20px*/
             /*设置首字缩进 单位：em为准*/
             text-indent: 2em;
        }
    </style>

</head>
<body>
    <div>
        转过肩膀，深情地向过去的人生第一幕说再见。接着，迅速转过头来向前看。
        你的第二幕就从今天开始，轮到你伸出手去接住人生的接力棒。
    </div>
</body>
</html>

单行文本垂直居中

行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本（就是只有一行的内容）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         
 8         div{
 9             width: 300px;    
10             height: 50px;
11             border:  1px solid red;
12             /*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本（就是只有一行的内容）*/
13             line-height: 50px;        /*垂直居中，是相当于line-height，而不是相对height的；*/
14             font-size: 18px;
15 
16         }
17     </style>
18 </head>
19 <body>
20 
21     <div>
22         内容国家
23     </div>
24     
25 </body>
26 </html>
View Code

多行文本垂直居中

行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本；
            line-height: 30px; 它一定要比font-size大。  一个行高30px，一共4个行高共120px，总的高度是200px，如果让整个行高垂直居中在当前盒子中，
　　　　　　（200-120）/2=40px，设置其padding-top，height相应减少-40px。
            font-size: 17px;  字体变大，行高就又变了。5行，要学会计算。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 175px;
            border: 2px solid red;
            padding-top: 25px; /*（200-150）/2=25px，设置其padding-top，height相应减少-25px。*/
            line-height: 30px;  /*5行，30*5=150，总高度200， */
            font-size: 17px;
        }
    </style>
</head>
<body>
    <div>
        但是，在面对这些问题时，我们并不是无能为力的。你们，并非没有能力去修补这一切。
        没有哪一代学生比你们更有力量，没有哪一代人比你们能更快地让改变发生。
    </div>
</body>
</html>

font-family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            width: 300px;
            height: 60px;

            /*font-size: 14px;*/
            /*line-height: 30px;*/
            /*font-family: '宋体';  !* 等价于 font:14px/30px 宋体*!*/
            font:14px/30px  "Arial","Hanzipen SC","微软雅黑";
        }
    </style>
</head>
<body>
    <p>我是个文本</p>
</body>
</html>

 

使用font-family注意几点：

        1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
        比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
        那么就会变成宋体
        页面中，中文我们只使用： 微软雅黑、宋体、黑体。 
        如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

        2.为了防止用户电脑里面，没有微软雅黑这个字体。
        就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
        没有安装微软雅黑字体，那么就是宋体：
         font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
        3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
         就自动的变为后面的中文字体： 
         font-family: "Times New Roman","微软雅黑","宋体";  意思就是说如果电脑上没有Times New Roman就会去找微软雅黑，再没有会去找宋体。

        4.所有的中文字体，都有英语别名，
        我们也要知道： 微软雅黑的英语别名：
         font-family: "Microsoft YaHei";
          宋体的英语别名： font-family: "SimSun";
         font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

        5.行高可以用百分比，表示字号的百分之多少。
         一般来说，都是大于100%的，因为行高一定要大于字号。 
         font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;     行高一定要大于字体大小。
         反过来，比如： font:16px/48px “宋体”;
         等价于 font:16px/300% “宋体”

2、背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>

    <style type="text/css">
        #img{
            width: 990px;
            height: 980px;
            
            /*设置背景颜色*/
            /*background-color: yellowgreen;*/

            /*设置背景图像 ； 连接url 默认水平垂直平铺*/
            /*background-image: url(./images/nvshen.jpg);*/

            /*background-repeat: no-repeat;*/

            /*background-position: -50px -20px;*/


            /*简写*/
            /*background: url(./images/banner.jpg) no-repeat 10px 20px;*/

            background: red;

            padding-top: 10px;
            border: 5px solid black;

        }

    </style>
</head>
<body>

    <div id="img"></div>
    
</body>
</html>

 

background-color（背景颜色）

颜色表示方法有哪些？
            一共有三种：单词、rgb表示法、十六进制表示法

            rgb:红色 绿色 蓝色 三原色
            光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
            用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
            如果此项的值，是255，那么就说明是纯色：
            
            黑色：
            background-color: rgb(0,0,0);
            光学显示器，每个元件都不发光，黑色的。

            白色：
            background-color: rgb(255,255,255);

            颜色可以叠加，比如黄色就是红色和绿色的叠加：
            background-color: rgb(255,255,0);

            再比如：
            background-color: rgb(111,222,123);
            就是红、绿、蓝三种颜色的不同比例叠加。


            
            16进制表示法
            红色：
                background-color: #ff0000;
                所有用#开头的值，都是16进制的。
                #ff0000：红色
                16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
                ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
                怎么换算的？我们介绍一下
                我们现在看一下10进制中的基本数字（一共10个）:
                0、1、2、3、4、5、6、7、8、9

                16进制中的基本数字（一共16个）:
                0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

                16进制对应表：
                十进制数    十六进制数
                0                0
                1                1
                2                2
                3                3
                ……
                10                a
                11                b
                12                c
                13                d
                14                e
                15                f

                16                10
                17                11
                18                12
                19                13
                ……
                43                2b
                ……
                255                ff

                十六进制中，13 这个数字表示什么？
                表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
                小练习：
                16进制中28等于10进制多少？
                答：2*16+8 = 40。

                16进制中的2b等于10进制多少？
                答：2*16+11 = 43。

                16进制中的af等于10进制多少？
                答：10 * 16 + 15 = 175

                16进制中的ff等于10进制多少？
                答：15*16 + 15 = 255

                所以，#ff0000就等于rgb(255,0,0)

                background-color: #123456;
                等价于：
                background-color: rgb(18,52,86);

                所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

                十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
                比如：
                background-color:#ff0000;
                等价于
                background-color:#f00;

                比如：
                background-color:#112233;
                等价于
                background-color:#123;

                只能上面的方法简化，比如
                background-color:#222333;
                无法简化！
                再比如
                background-color:#123123;
                无法简化！

                要记住：
                #000   黑
                #fff    白
                #f00   红
                #333   灰
                #222   深灰
                #ccc   浅灰

颜色： 

RGBA(R,G,B,A)

R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
A：
Alpha透明度。取值0~1之间。
RGBA记法。
  • 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
  • IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：

    示例代码：

    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);

补充：

有关颜色的RGB   http://bj.96weixin.com/rgb/   http://tool.oschina.net/commons?type=3    http://tool.chinaz.com/Tools/SelectColor.aspx

background-color（背景颜色） & background-image（背景图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*div{*/
            /*width: 200px;*/
            /*height: 200px;*/
            /*background-color: rgb(0,0,0);*/
        /*}*/

        div{
            width: 1500px;
            height: 1600px;
            background-image:url(./images/distance.png);
            /*background-repeat:no-repeat ;*/    /*不平铺；默认会平铺整个屏幕*/
            /*background-repeat: repeat-x;  x方向上平铺；竖直方向上不平铺；*/
            padding: 100px;  /*padding的区域也被平铺掉了。*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

repeat应用案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         ul{
12             list-style:none;
13         }
14         body{
15             background-image: url(./images/timg2.jpeg);
16         }  /*给body设置背景图；这样背景图上边就还有文字和其他东西了*/
17         .nav{
18             width:960px;
19             height: 40px;
20             margin: 100px auto;
21             background-color: purple;
22             border-radius: 5px;  /*设置圆角*/
23         }
24         .nav ul li{
25             float: left;
26             width: 160px;
27             height: 40px;
28             line-height: 40px;
29             text-align: center;
30         }
31         .nav ul li a{
32             display: block;
33             width: 160px;
34             height:40px;
35             color: white;
36             font-size: 20px;
37             text-decoration: none;
38             font-family: '华文宋体';
39         }
40                 /*a标签除外，不继承父元素的color*/
41         .nav ul li a:hover{
42             background-color: red;
43             font-size: 20px;
44         }
45     </style>
46 </head>
47 <body>
48     <div class="nav">
49         <ul>
50             <li>
51                 <a href="">网站导航</a>
52             </li>
53             <li>
54                 <a href="">网站导航</a>
55             </li>
56             <li>
57                 <a href="">网站导航</a>
58             </li>
59             <li>
60                 <a href="">网站导航</a>
61             </li>
62             <li>
63                 <a href="">网站导航</a>
64             </li>
65             <li>
66                 <a href="">网站导航</a>
67             </li>
68         </ul>
69     </div>
70 </body>
71 </html>
View Code

 

background-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        div{
            width: 1500px;
            height:1600px;
            background-image:url(./images/distance.png);
            background-repeat: no-repeat;
            background-position: 100px 100px;  /*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/
        }
    </style>

</head>
<body>
    <div>
        诗和远方
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        
        div{
            width: 1500px;
            height: 1600px;
            border:  1px solid red;
            background-image: url(./bojie.jpg);
            background-repeat: no-repeat;
            
            /*水平方向 left center right
               垂直方向 top center bottom
            */
            background-position:right bottom;
        }
    </style>
</head>
<body>
    <div>
        
    </div>
    
</body>
</html>
View Code

精灵图/雪碧图技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width: 48px;
            height:48px;
            background-image: url(../images/1.png);
            background-repeat: no-repeat;
            background-position: 0 -528px;  /*往上移动把那张图片给切出来了*/
        }
        .box2{
            width: 48px;
            height: 48px;
            background-image: url(../images/1.png);
            background-repeat: no-repeat;
            background-position: 0 -440px;
        }

    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
View Code

通天banner

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         ul{
12             list-style:none;
13         }
14         body{
15             /*background-image: url(./images/banner.jpg);*/
16             /*background-repeat: no-repeat;*/
17             /*水平居中通天banner图*/
18             /*background-position: center top; !*中心上方显示，大的图片超过了你的屏幕显示，可以使用这种方案*!*/
19             /*综合属性设置   center和top一定要挨着写*/
20             background: pink url(./images/banner.jpg) no-repeat center top;
21 
22         }  /*给body设置背景图；这样背景图上边就还有文字和其他东西了*/
23         .nav{
24             width:960px;
25             height: 40px;
26             margin: 100px auto;
27             background-color: purple;
28             border-radius: 5px;  /*设置圆角*/
29         }
30         .nav ul li{
31             float: left;
32             width: 160px;
33             height: 40px;
34             line-height: 40px;
35             text-align: center;
36         }
37         .nav ul li a{
38             display: block;
39             width: 160px;
40             height:40px;
41             color: white;
42             font-size: 20px;
43             text-decoration: none;
44             font-family: '华文宋体';
45         }
46                 /*a标签除外，不继承父元素的color*/
47         .nav ul li a:hover{
48             background-color: red;
49             font-size: 20px;
50         }
51     </style>
52 </head>
53 <body>
54     <div class="nav">
55         <ul>
56             <li>
57                 <a href="">网站导航</a>
58             </li>
59             <li>
60                 <a href="">网站导航</a>
61             </li>
62             <li>
63                 <a href="">网站导航</a>
64             </li>
65             <li>
66                 <a href="">网站导航</a>
67             </li>
68             <li>
69                 <a href="">网站导航</a>
70             </li>
71             <li>
72                 <a href="">网站导航</a>
73             </li>
74         </ul>
75     </div>
76 </body>
77 </html>
View Code

background-attach

background: url(./bojie.jpg) no-repeat 0 0  fixed; 可以把fixed放在这里边；依次是background-image，background-repeate，background-position，background-attach
/*固定 背景*/
/*background-attachment: fixed;*/  背景图片固定了，文字在滚动
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         div{
 8             width: 1200px;
 9             height: 2000px;
10             border: 1px solid red;
11             background: url(./bojie.jpg) no-repeat 0 0  fixed; 可以把fixed放在这里边
12             /*固定 背景*/
13             /*background-attachment: fixed;*/  背景图片固定了，文字在滚动
14             color: white;
15         }
16     </style>
17 </head>
18 <body>
19     <div>
20         <p>文字</p>
21         <p>文字</p>
22         <p>文字</p>
23         <p>文字</p>
24         <p>文字</p>
25         <p>文字</p>
26         <p>文字</p>
27         <p>文字</p>
28         <p>文字</p>
29         <p>文字</p>
30         <p>文字</p>
31         <p>文字</p>
32         <p>文字</p>
33         <p>文字</p>
34         <p>文字</p>
35         <p>文字</p>
36         <p>文字</p>
37         <p>文字</p>
38         <p>文字</p>
39         <p>文字</p>
40         <p>文字</p>
41         <p>文字</p>
42 
43     </div>
44 
45 </body>
46 </html>
View Code

 

 3、定位处理-定位：position

相对定位和绝对定位

    relative:相对定位
    相对于自身进行定位
    1.不设置偏移量的时候 对元素没有任何影响
    2.可以提升层级关系（加了position:relative;之后会提升层级关系） 

    absolute：绝对定位
    在没有父级元素定位时，以浏览器的左上角为基准；
    有父级的情况下，父级设置相对定位，子级设置绝对定位 是以父盒子进行定位
    “父相子绝”（父级相对定位，子级绝对定位）
    1.提升层级关系
    2.脱离文档流（就是飘起来了）

 

相对定位relative

div+css布局；浮动 ； 转块和转行的元素display；定位 

定位有三种： 1.相对定位 2.绝对定位 3.固定定位
        这三种定位，每种定位都暗藏玄机，所以我们要一一单讲

        position:relative;
        position:absolute;
        position:fixed;

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         .box1{
 8             width: 200px;
 9             height: 200px;
10             background-color: #2aabd2;
11             position: relative;  /*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
12             /*设置相对定位 我们就可以使用四个方向的属性  top left right bottom
13             /*相对定位：相对于自己原来本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置*/
14             top: 20px;
15             left: 30px;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="box1"></div>
21 </body>
22 </html>
View Code

相对定位的特性

相对定位三大特性： 1.不脱标（就是不脱离标准流）  
　　　　　　　　　 2.形影分离（和影子是分不开的，就是它和它原来的位置）  
　　　　　　　　  3.老家留坑(保留在当前位置上，就是它原来的位置别人挤不进去） :占着茅房不拉屎，恶心人 。
相对定位是相对自身进行定位；不设置偏移量的时候 
所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果（绝对定位才是做压盖效果）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         div{
12             width: 200px;
13             height: 200px;
14         }
15         .box1{
16             background-color: red;
17         }
18         .box2{
19             background-color: green;
20             position: relative;   /*相当于它原来的位置；绿色盒子没有脱离标准流*/
21             top: 20px;
22             left: 30px;
23         }
24         .box3{
25             background-color: blue;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="box1"></div>
31     <div class="box2"></div>
32     <div class="box3"></div>
33 </body>
34 </html>
View Code

相对定位的用途

因为相对定位有坑，占着茅房不拉屎，恶心人，所以我们一般不要使用相对定位来做压盖效果。它在页面中，效果作用极小，就两个作用：
1.微调元素位置
2.做绝对定位的参考（父相子绝） 讲绝对定位会讲
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>超链接美化</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         ul{
12             list-style: none;
13         }
14         .nav{
15             width: 960px;
16             /*height: 40px;*/
17             overflow: hidden;
18             margin: 100px auto ;
19             background-color: purple;
20             /*设置圆角*/
21             border-radius: 5px;
22         }
23         .nav ul li{
24             float: left;
25             width: 160px;
26             height: 40px;
27             line-height: 40px;
28             text-align: center;
29         }
30         .nav ul li.xiaoming{
31             position: relative;  /*不影响页面的布局,一般不在浮动的时候用相对定位。*/
32             /*top: 40px;*/
33             left: 30px;
34         }
35         .nav ul li a{
36             display: block;
37             width: 160px;
38             height: 40px;
39             color: white;
40             font-size: 20px;
41             text-decoration: none;
42             font-family:'华文宋体';
43         }
44         /*a标签除外，不继承父元素的color*/
45 
46 
47         .nav ul li a:hover{
48             background-color: red;
49             font-size: 22px;
50         }
51     </style>
52 </head>
53 <body>
54     
55     <div class="nav">
56         <ul>
57             <li>
58                 <a href="">网站导航</a>
59             </li>
60             <li class="xiaoming">
61                 <a href="">网站导航</a>
62             </li>
63             <li>
64                 <a href="">网站导航</a>
65             </li>
66             <li>
67                 <a href="">网站导航</a>
68             </li>
69             <li>
70                 <a href="">网站导航</a>
71             </li>
72             <li>
73                 <a href="">网站导航</a>
74             </li>
75         </ul>
76     </div>
77 </body>
78 </html>
View Code

微调元素位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         div{
12             margin: 100px;
13         }
14         .user{
15             font-size: 25px;
16         }
17         .btn{
18             position: relative;
19             top: 3px;
20             left: -5px;
21         }
22     </style>
23 </head>
24 <body>
25     <div>
26         <input type="text" name="username" class="user">
27         <input type="button" name="" value="点我" class="btn">
28     </div>
29 </body>
30 </html>
View Code

绝对定位

绝对的定位： 1.脱标（红色盒子脱离了标准流遮盖了绿色的盒子，绿色、蓝色的盒子挤上去了；） 
　　　　　　2.做遮盖效果，提升层级 
          3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         div{
12             width: 200px;
13             height: 200px;
14         }
15         .box1{
16             background-color: red;
17             position: absolute;
18         }    /*红色盒子脱离了标准流遮盖了绿色的盒子，绿色、蓝色的盒子挤上去了；*/
19         .box2{
20             background-color: green;
21         }
22         .box3{
23             background-color: blue;
24         }
25         span{
26             width: 100px;
27             height: 100px;
28             background-color: pink;
29             position: absolute;
30         }
31     </style>
32 
33 </head>
34 <body>
35     <div class="box1"></div>
36     <div class="box2"></div>
37     <div class="box3"></div>
38     <span>文字</span>
39 </body>
40 </html>
View Code

绝对定位的参考点

绝对定位参考点： 
            1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
            2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         body{
 8             width: 100%;
 9             height: 2000px;
10             border: 10px solid green;
11         }
12         
13         .box{
14             width: 200px;
15             height: 200px;
16             background-color: red;
17             /*绝对定位参考点： 
18             1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
19             2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
20             */
21             position: absolute;
22             top: 100px;
23             left: 18px;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="box">
29         
30     </div>
31 
32 
33     
34 </body>
35 </html>
View Code

绝对定位以盒子作为参考点

父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
        这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 5px solid red;
            margin: 100px;
            /*父盒子设置相对定位*/
            position: relative; /*父辈相*/
            padding: 50px;
        }
        .box2{
            width:300px;
            height:300px;
            background-color: green;
            /*position: relative;*/    /*父相*/
        }
        .box p{
            width: 100px;
            height:100px;
            background-color: pink;
            position: absolute;  /*子元素设置了绝对定位*/
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box2">
        <p></p>
    </div>
    </div>
</body>
</html>

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

        注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。
        相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，
        仅仅的是在当前父辈元素内调整位置信息。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .box{
12             width: 300px;
13             height: 300px;
14             border: 5px solid red;
15             margin: 100px;
16             /*父盒子设置相对定位*/
17             position: absolute;  /*父绝对*/
18             padding: 50px;
19         }
20         .box p {
21             width: 100px;
22             height: 100px;
23             background-color: pink;
24             /*子元素设置了绝对定位*/
25             position: absolute;    /*子绝对*/
26             top: 10px;
27             left: 20px;
28         }
29     </style>
30 
31 </head>
32 <body>
33     <div class="box">
34         <p></p>
35     </div>
36 </body>
37 </html>
View Code

 

 

绝对定位的盒子无视父辈的padding

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .father{
12             width: 300px;
13             height: 300px;
14             margin: 100px;
15             border: 10px solid red;
16             position: relative;
17             padding: 50px;   /*无视父的padding*/
18         }
19         .father p{
20             width: 100px;
21             height: 100px;
22             background-color: yellow;
23             position: absolute;   /*绝对对位的盒子，无视父的padding，是以父为参考点，而不是父的内容区域*/
24             top: 10px;
25             left: 40px;
26         }
27 
28     </style>
29 </head>
30 <body>
31     <div class="father">
32         <p></p>
33     </div>
34 </body>
35 </html>
View Code

绝对定位盒子居中

设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。
            当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         .box{
12             width:100%;
13             height: 96px;
14             background: #985f0d;
15 
16         }
17         .box .a{
18             width: 960px;
19             height: 96px;
20             background-color: #1b6d85;
21             /*margin:0 auto;*/
22             position: absolute;  /*设置了绝对定位，它就以页面为起点。不再居中了， 0 auto*/
23             left:50%;
24             margin-left:-480px;  /*往左走*/
25         }
26 
27     </style>
28 </head>
29 <body>
30     <div class="box">
31         <div class="a"></div>
32     </div>
33 </body>
34 </html>
View Code

父相子绝案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 277px;
            height: 284px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
        }
        .box img{
            width: 277px;
            height: 177px;

        }
        .box .dtc{
            width: 52px;
            height: 27px;
            background: url(../images/common.png) no-repeat -54px 0;
            position: absolute;
            top: -9px;
            left: 9px;
        }
        .box .zhegai{
            width: 277px;
            height: 38px;
            color: #fff;
            line-height: 38px;
            text-align: center;
            background-color: rgba(0,0,0,.7);
            position: absolute;
            top: 139px;
            left: 0;

        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/longxia.jpg" alt="">
        <span class="dtc"></span>
        <div class="zhegai">小龙虾</div>    
    </div>
    
</body>
</html>

 

固定定位

固定定位：固定当前的元素不会随着页面滚动而滚动，
            
特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动
                
参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点
                 如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            bottom: 30px;
            right: 40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
        <img src="../images/distance.png" alt="">
        <img src="../images/distance.png" alt="">
        <img src="../images/distance.png" alt="">
        <img src="../images/distance.png" alt="">
        <img src="../images/distance.png" alt="">
    </div>
</body>
</html>
View Code

 返回顶部案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         p{
12             width: 100px;
13             height:100px;
14             background-color: red;
15             position: fixed;
16             bottom: 30px;
17             right: 40px;
18             line-height: 100px;
19             font-size: 20px;
20             text-align: center;
21             color:pink;
22         }
23     </style>
24 </head>
25 <body>
26     <div>
27         <p>返回顶部</p>
28         <img src="bojie.jpg" alt="">
29         <img src="bojie.jpg" alt="">
30         <img src="bojie.jpg" alt="">
31         <img src="bojie.jpg" alt="">
32         <img src="bojie.jpg" alt="">
33         <img src="bojie.jpg" alt="">
34         <img src="bojie.jpg" alt="">
35     </div>
36 </body>
37     <script src="js/jquery-3.2.1.min.js"></script>
38     <script type="text/javascript">
39         $(function(){
40             $('p').click(function(){
41                 $('html').animate({
42                     "scrollTop":0
43                 },2000)
44             })
45         })
46     </script>
47 
48 </html>
View Code

固定导航栏案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         ul{
12             list-style:none;
13         }
14         body{
15             padding-top: 40px; /*给body设置导航栏的高度，来显示下方图片的整个内容*/
16         }
17         .wrap{
18             width:100%;
19             height:40px;
20             background-color: #1b6d85;
21             position:fixed; /*给父盒子设置固定定位，之后，一定一定要加top属性和left属性*/
22             top:0;
23             left:0;
24         }
25         .wrap .nav{
26             width:960px;
27             height: 40px;
28             margin: 0 auto;
29             background-color: purple;
30             border-radius: 5px;  /*设置圆角*/
31         }
32         .wrap .nav ul li{
33             float: left;
34             width: 160px;
35             height: 40px;
36             line-height: 40px;
37             text-align: center;
38         }
39         .wrap .nav ul li a{
40             display: block;
41             width: 160px;
42             height:40px;
43             color: white;
44             font: 20px/40px '华文宋体';       /*大小、行高;*/
45             /*font-size: 20px;*/
46             text-decoration: none;
47             /*font-family: '华文宋体';*/
48             background-color: purple;
49         }
50                 /*a标签除外，不继承父元素的color*/
51         .wrap .nav ul li a:hover{
52             background-color: red;
53             font-size: 20px;
54         }
55     </style>
56 </head>
57 <body>
58     <div class="wrap">
59         <div class="nav">
60             <ul>
61                 <li>
62                     <a href="">网站导航</a>
63                 </li>
64                 <li>
65                     <a href="">网站导航</a>
66                 </li>
67                 <li>
68                     <a href="">网站导航</a>
69                 </li>
70                 <li>
71                     <a href="">网站导航</a>
72                 </li>
73                 <li>
74                     <a href="">网站导航</a>
75                 </li>
76                 <li>
77                     <a href="">网站导航</a>
78                 </li>
79             </ul>
80         </div>
81     </div>
82 
83     <img src="./bojie.jpg" alt="">
84     <img src="./bojie.jpg" alt="">
85     <img src="./bojie.jpg" alt="">
86     <img src="./bojie.jpg" alt="">
87     <img src="./bojie.jpg" alt="">
88     <img src="./bojie.jpg" alt="">
89     <img src="./bojie.jpg" alt="">
90     <img src="./bojie.jpg" alt="">
91     <img src="./bojie.jpg" alt="">
92     <img src="./bojie.jpg" alt="">
93     <img src="./bojie.jpg" alt="">
94 
95 </body>
96 </html>
View Code

4、Z-index

z-index
      1.z-index 值表示谁压着谁，数值大的压盖住数值小的
      2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
      3.z-index值没有单位，就是一个正整数，默认的z-index值为0
      4.如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
      5.从父现象：父亲怂了，儿子再牛逼也没用
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding:0;
 9             margin:0;
10         }
11         .box1{
12             width: 200px;
13             height:200px;
14             background-color: red;
15             position: relative;
16             top: 30px;
17             left: 40px;
18             z-index:1;
19         }
20         .box2{
21             width: 200px;
22             height:200px;
23             background-color: yellow;
24             position: relative;
25             top:0;
26             left:0;
27             z-index: 2;
28 
29         }
30         .box3{
31             width:200px;
32             height:200px;
33             background-color: green;
34             float: left;
35             margin-left:20px;
36             margin-top: -30px;
37 
38         }
39     </style>
40 
41 </head>
42 <body>
43     <div class="box1"></div>
44     <div class="box2"></div>
45     <div class="box3"></div>
46 </body>
47 </html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:100px;
            height: 100px;
            position: absolute;
        }
        .box1{
            background-color: red;
            top: 50px;
            /*发现box2的层级比box1的层级高，给它设置个z-index*/
            z-index: 1;
        }
        .box2{
            background-color: green;
            /*border-radius:20px 0px 0px 0px;*/
            border-radius: 50% ;
            z-index: 20;
        }
        .box3{
            background-color: yellow;

        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

 

从父现象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0
10         }
11         .tianliang{
12             width: 200px;
13             height: 200px;
14             background-color: red;
15             position: relative;
16             z-index: 3;
17         
18         }
19         .tianliang .sendie{
20             width: 100px;
21             height: 100px;
22             background-color: pink;
23             position: absolute;
24             top: 240px;
25             left: 300px;
26             z-index: 333;
27             
28         }
29         .lzy{
30             width: 200px;
31             height: 200px;
32             background-color: yellow;
33             position: relative;
34             z-index: 4;
35         }
36         .lzy .brother{
37             width: 100px;
38             height: 100px;
39             background-color: green;
40             position: absolute;
41             top: 100px;
42             left: 320px;
43             z-index: 111;
44         
45         }
46     </style>
47 </head>
48 <body>
49     
50     <div class="tianliang">
51         <p class="sendie"></p>
52     </div>
53     <div class="lzy">
54         <p class="brother"></p>
55     </div>
56 </body>
57 </html>
View Code

 5、网页布局

 

posted @ 2018-06-07 16:05  kris12  阅读(720)  评论(0)  编辑  收藏  举报
levels of contents