html盒模型基础

盒模型 

             概念：若是CSS对HTML文档元素生成了该元素在HTML文档布局中占据空间的矩形元素框（element box），称盒子

            经过一系列定义盒子的相关属性（内容content，填充padding，边框border，边界margin），控制各个盒子乃至HTML文档来呈现的效果与布局结构

             border:   5px solid/dash虚线/dotted点划线/double双线 #444; 值加在原有元素的高宽上

             padding:值加在原有元素的高宽上的，若是要保持元素不变，须要调整高宽

                {20px上下 20px左右}

             marigin：

                {0 auto}元素水平居中，相邻兄弟元素垂直方向会相互融合，取大值。子级有margin-top的时候，子级会传递到父级，解决，父级  overflow:hidden 

元素类型

            根据css显示分类，XHTML元素被分为三种类型

                 块状元素：block element,显示成矩形区域，经常使用div dl dt dd ol ul fieldset h1-h6 p form hr iframe colgroup col table tr td

                    通常做为容器容纳内联元素和其余块状元素，通常称盒子

                 内联元素：inline element(或行内元素) 经常使用 span i a em strong b

                    没有本身的形状，不能定义宽高，由内容决定宽高，最小内容单元呈现矩形，可定义padding border margin background 但有时候不起做用

                 可变元素：须要上下文肯定该元素是块元素仍是内联元素

                    applet - java applet

                    button， del，iframe -inline frame，ins-插入的文本，map-图片区块，object-object对象，script-客户端脚本

             元素类型的转换

                 display:定义布局时元素生成的显示框类型

                     none：

                     block:当元素使用了float之后，至关于加上了  display:block ，（块状元素默认）

                     inline:代码换行被解释成一个空格，不支持宽高（内联元素默认）

                     inline-block：（表单控件button，图片img默认值）行内块元素，内容以块状显示，行内其余元素显示同一行（中间有空隙，各浏览器定义空隙大小不一样，通常用float），支持宽高，其余和inline差很少

                     list-item：能够变成列表块状元素，列表默认值

       

             元素的定位设置

                 position

                     static:默认值，忽略top,bottom,left,right,z-index,的声明

                     absolute:绝对定位，相对于static之外的第一个父元素进行定位

                     relative:相对定位，正常位置进行定位,z-index默认比absolute高

                     fixed:绝对定位元素，相对于窗口进行定位

                         z-index:auto听从父对象/number，只做用于absolute和relative

宽度自适应

            但愿元素能根据窗口或者子元素进行变化，可让窗口适应不一样设备、窗口、分辨率下运行

             min-height:IE6不支持，

                兼容性hack1：  min-height:200px;_height:200px; 

                兼容性hack2：  min-height:200px;height:auto!important;height:200px; 

             min-width:IE6不支持,

             max-width:IE6不支持，

             max-height:IE6不支持，

高度自适应

            方法：  html,body{height:100%} 元素则添加  {height:100%} 

             height:auto; 根据内容自动改变高度，默认

             height:100%; 根据父块高度决定。

 

浮动属性练习

　　 css

/* ::-webkit-scrollbar{display: none}/* 取消overflow的默认下拉条 */ */
        .v1{float: left;height: 30px;width: 30px;background-color: #333;}
        .v2{height: 130px;width: 130px;background-color: #999;}
        .fa{overflow: hidden;border:5px solid red; width: 1160px}
        .b1{width: 230px;background-color: brown;}
        .b2{width: 700px;background-color: burlywood;}
        .b3{width: 230px;background-color:#333;}
        .b1,.b2,.b3{height: 50px;float: left;}
        .bottom{height: 100px;width: 100%;background-color: darkblue;}

 

　　只对后面的元素产生影响，后面一个元素紧贴前面一个元素（使用px的时候），若是浏览窗口变小，则区块换行，  clear:none默认/both/left/right； 

　　 高度塌陷问题：父元素若是没有高度，没法被撑起

　　　　 方法一：父元素   overflow:hidden 

　　　　 方法二：在浮动元素下添加   DIV{clear:both;height:0;overflow:hidden  （或  font-size:0  IE不容许高度为0）}

            <div class="v1"></div>
            <div class="v2">
                文字环绕文字环绕文字环绕文字环绕，v2区域在v1区域下面，背景色能够看到
            </div>
            <div class="fa">
                <div class="b1"></div><div class="b2"></div><div class="b3"></div>
            </div>
            <div class="bottom"></div>
            <!-- 只设置高度的时候，图片等比例缩放，若是同时设置了宽度和高度，只要考虑图片比例变形的结果-->
            <img src="img/top.jpg" width="100%" title="图片划上去图片出现的提示" alt="图片加载失败后出现的字">
            <img src="" width="100%" >

练习导航条

　　 css

.nav{height: 100px;background: #111}
        .nav ul{list-style: none;width: 980px;background: #777;margin: 0 auto;overflow: hidden;}
        .nav ul li{float: left;border-right: 1px #999 solid}
        .nav ul li .last{border-right: none}
        .nav ul li a{display:block;width: 139px;height: 100px;line-height: 100px;text-align: center;text-decoration: none}
        .nav ul li a:hover{background:orangered}

　　html

<div class="nav">
            <ul>
                <li><a href="#">集团信息</a></li>
                <li><a href="#">集团信息</a></li>
                <li><a href="#">集团信息</a></li>
                <li><a href="#">集团信息</a></li>
                <li><a href="#">集团信息</a></li>
                <li><a href="#">集团信息</a></li>
                <li class="last"><a>集团信息</a></li>
            </ul>
        </div>

练习锚点

　　定位锚点

             锚点连接：  <div id="p1">位置1</div><a href="#p1">跳转到位置1</a> 

　　 css

.imgmd{height: 500px;width: 500px;position: relative;}
        .list{position: absolute;bottom: 10px;right: 5px;}
        .list a{float: left;height: 30px;width: 30px;background: rgba(0,0,0,.7);margin-right: 5px;text-decoration: none;text-align: center;line-height: 30px;color: #fff}
        .list a:hover{background: rgba(0,0,0,1);}
        .imglist{overflow: hidden;height: 500px;width: 500px;}

　　html

　　　　<div class="imgmd">
            <div class="list">
                <a href="#img1">1</a>
                <a href="#img2">2</a>
                <a href="#img3">3</a>
                <a href="#img4">4</a>
            </div>
            <div class="imglist">
                <img src="../img/1.jpg" id="img1" />
                <img src="../img/2.jpg" id="img2" />
                <img src="../img/3.jpg" id="img3" />
                <img src="../img/4.jpg" id="img4" />
            </div>
        </div>

 

练习css图片拼合

　　 图片整合

            css sprites或者精灵图，CSS图像拼合或CSS贴图定位

            减小http iis的请求数，对于淘宝这种大型网站是必须的

　　 css

.cssimg{width: 200px;height: 22px;overflow: hidden;list-style: none;}
        .cssimg li{float: left;}
        .cssimg li a{display: block;height: 22px;width: 50px;background: url(/img/1.jpg);text-align: center;text-decoration: none;line-height: 22px}
        .p2 a{background: url(/img/1.jpg) -50px 0;}
        .p3 a{background: url(/img/1.jpg) -100px 0;}
        .p4 a{background: url(/img/1.jpg) -150px 0;}
        .p2 a:hover{background: url(/img/1.jpg) -50px -22px;}
        .p3 a:hover{background: url(/img/1.jpg) -100px -22px;}
        .p4 a:hover{background: url(/img/1.jpg) -150px -22px;}

　　html

        <ul class="cssimg">
            <li class="p1"><a href="#">新闻</a></li>
            <li class="p2"><a href="#">新闻</a></li>
            <li class="p3"><a href="#">新闻</a></li>
            <li class="p4"><a href="#">新闻</a></li>
        </ul>    

 

text-overflow练习

　　 文本溢出

             overflow:

                 visible：默认，内容不会被修剪，会出如今元素框以外。

                 hidden:内容会被修剪，其他内容不可见

                 scroll：内容会被修剪，但出现下拉框

                 auto：若是内容被修剪，则出现下拉框

                 inheirit：从父级继承overflow值

 

             white-space:设置如何处理元素内空白

                 normal:默认，空白会被浏览器忽略

                 pre:被浏览器保留

                 nowrap：文本不会换行，文本会在同一行继续，直到遇到<br />（经常使用）

                 pre-wrap:保留空白符序列，会正常换行

                 pre-line:合并空白符序列，可是保留换行符

                 inherit:继承父元素的white-space

 

             text-overflow:文本溢出包含元素时发生

                 clip:不显示省略号，简单裁切

                 ellipsis:溢出时，显示省略号

                    要显示省略号须要的条件：要设定width,而且  over-flow:hidden ,还要有  white-space:nowrap 

css

.textul{border: 1px solid #333;}
        .textul .p1{width: 100px;text-overflow: ellipsis;white-space: nowrap;border: 1px solid #222;overflow: hidden;}

html

        <ul class="textul">
            <li class="p1"><a href="#">新闻sfdfsffsdfsfsdf</a></li>
            <li class="p2"><a href="#">新闻</a></li>
            <li class="p3"><a href="#">新闻</a></li>
            <li class="p4"><a href="#">新闻</a></li>
        </ul>