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:;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>