html(第二篇)

 

 

浮动

浮动的影响范围

　　1.让块状元素显示在同一行
　　2.让行内元素识别宽高
　　3.让代码间的空白消失了
　　4.让行内快的元素对起
　　总结：float：left ：让浏览器兼容性更好，排版更轻松

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .red{width: 200px ;height: 220px;border: 10px slateblue double;
        float: left}
        .blue{width: 100px;height: 150px ;border: 10px seagreen dashed;
        float: left}
        b{float: left ;height: 200px;width: 150px;border: 10px springgreen solid;}


    </style>
</head>
<body>
    <b>内敛标签，不可以调宽高,加上float属性就可以加宽高</b>
    <div class="red">hello</div>
    <div class="blue"> python</div>

</body>
</html>

　

 

 <div>position</div>

 

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

 

常用的有

absolute绝对定位，相对于浏览器
relative 相对等位，参考自己进行移动
left,top,right,bottom的理解和绝对定位完全不同
float:left 写到相对定位上有效

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位</title>
 6     <style type="text/css">
 7         tbody{margin: 0px}
 8         .red {
 9             width: 100px;
10             height: 100px;
11             border: 10px springgreen solid;
12             position: absolute;/*绝对定位，脱离文档流，更具浏览器进行定位*/
13             top: 100px;
14         ;
15         }
16 
17         .blue {
18             width: 80px;
19             height: 80px;
20             border: 10px slateblue solid;
21             position: absolute;
22             top: 50px;
23 
24         }
25 
26 
27     </style>
28 </head>
29 <body>
30     <div class="red"></div>
31     <div class="blue" ></div>
32     <div class="box"></div>
33 
34 </body>
35 </html>
绝对定位
脱离原有的文档

absolute绝对定位，相对于浏览器，
left,top,right,bottom的理解和绝对定位完全不同
loat:left 写到相对定位上有效
       

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
        tbody{margin: 0px}
        .red {
            width: 100px;
            height: 100px;
            border: 10px springgreen solid;
            position: relative;
            top: 100px;
        ;
        }

        .blue {
            width: 80px;
            height: 80px;
            border: 10px slateblue solid;
            position: relative;
            top: 50px;

        }


    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue" ></div>
    <div class="box"></div>

</body>
</html>
相对定位

 

                                    

 

 

 z-index 折叠优先级调整

语法格式：z-index：数字：
   默认都是0距离越大离我们眼镜越近，z-index取值范围：主流浏览器大部分都在 -2147483648 到 2147483647
弹出式菜单都需要

 

display 显示模式

display:none:不显示标签，
display:block 显示为块级元素
display：inline 显示为内联元素
display:inline-blok显示在一行，又可以显示宽高;默认会有一个空白，
用float：left可以完美的解决这个问题

注：内联元素默认是无法调长宽的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        .red{width: 200px;
            height: 100px;
            border: 10px red solid;
        }
    </style>
</head>
<body>
    <div class="red">hello</div>
    <span class="red">python</span>
</body>
</html>

　　

 

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>显示模式</title>
 6     <style>
 7         .red{ width: 100px;
 8             height: 40px;
 9             display: inline-block;
10             line-height: 50px;
11             text-align: center;
12             float: left;
13 
14         }
15         b{
16         border: 10px slateblue solid;
17         width: 80px;
18         height: 30px;
19         text-align: center;
20         line-height: 30px ;
21         display: block}
22         .red:hover b{display: none}     /*当鼠标放在red让b隐藏起来*/
23     </style>
24 </head>
25 <body>
26     <div class="red">
27         淘宝
28         <b>鞋子</b>
29         <b>衣服</b>
30     </div>
31     <b></b>
32 
33 </body>
34 </html>
简单的导航

 

           

 

 


背景的分项应用---------------
<style type="text/css">
div{width: 300px; height: 300px;border: 5px salmon dashed;
/*dashed 虚线边*/
background-color: aqua;
background-image: url("20.jpg");padding: 10px}
/*background-image: url("20.jpg")添加背景图片，默认图片大小不够，会默认填充的*/
/*padding 向内填充*/

</style>

background-repeat: no-repeat} 设置背景不重复，不自动填充
background-repeat: repeat-x} 设置水平方向重复，就是横着重复
background-repeat: repeat-y} 就是竖着方向重复
background-position: center}背景定位
center：定位中间 left：左边 right：右边 top：上面 inherit：左上面 bottom：右下面
background-position:right top;}可以给他两个值；一个右边，和上边，结果就是右上角
然而呢！也可以自己定义位置，
background-position:20% bottom;}利用%比的形式调整图片的位置
有时候我们觉得百分比不够精准，我们可以更具，像素来定义位置
background-position:10px 20px}
我们还有一个需求就是让图片总是显示在浏览器的某一个位置，无乱怎么拉， 显示在这个位置
background-attachment: fixed; 是针对浏览器的当前窗口进行定位与元素无关
fixed固定，稳定，确定的的意思
background-attachment:soroll}默认是这个，so 但是没什么暖用

然而呢！也不用这么麻烦，有一个综合写法
background: crimson url("20.jpg") no-repeat center;}
背景颜色 图片路劲 是否不重复 居中
background: crimson url("20.jpg") no-repeat 20px 20px;} 定位位置的顺序是左，右，上，下。
左边20像素 上面20像素，只可以定义2个值

 

posted @ 2016-06-29 00:57  青春永不言弃  阅读(134)  评论(0)    收藏  举报