html盒模型基础

Posted 2022-12-08 solaris-wwf

盒模型 

            概念：如果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,bodyheight:100%元素height:100%

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

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

 

浮动属性练习

　　css

/* ::-webkit-scrollbardisplay: none/* 取消overflow的默认下拉条 */ */
        .v1float: left;height: 30px;width: 30px;background-color: #333;
        .v2height: 130px;width: 130px;background-color: #999;
        .faoverflow: hidden;border:5px solid red; width: 1160px
        .b1width: 230px;background-color: brown;
        .b2width: 700px;background-color: burlywood;
        .b3width: 230px;background-color:#333;
        .b1,.b2,.b3height: 50px;float: left;
        .bottomheight: 100px;width: 100%;background-color: darkblue;

　　只对后面的元素产生影响，后面一个元素紧贴前面一个元素（使用px的时候），如果浏览窗口变小，则区块换行，clear:none默认/both/left/right,
            高度塌陷问题：父元素如果没有高度，无法被撑起
                方法一：父元素overflow:hidden
                方法二：在浮动元素下添加DIVclear:both;height:0;overflow:hidden（或font-size:0 IE不允许高度为0）
　　html

            <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

.navheight: 100px;background: #111
        .nav ullist-style: none;width: 980px;background: #777;margin: 0 auto;overflow: hidden;
        .nav ul lifloat: left;border-right: 1px #999 solid
        .nav ul li .lastborder-right: none
        .nav ul li adisplay:block;width: 139px;height: 100px;line-height: 100px;text-align: center;text-decoration: none
        .nav ul li a:hoverbackground: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

.imgmdheight: 500px;width: 500px;position: relative;
        .listposition: absolute;bottom: 10px;right: 5px;
        .list afloat: 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:hoverbackground: rgba(0,0,0,1);
        .imglistoverflow: 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

.cssimgwidth: 200px;height: 22px;overflow: hidden;list-style: none;
        .cssimg lifloat: left;
        .cssimg li adisplay: block;height: 22px;width: 50px;background: url(/img/1.jpg);text-align: center;text-decoration: none;line-height: 22px
        .p2 abackground: url(/img/1.jpg) -50px 0;
        .p3 abackground: url(/img/1.jpg) -100px 0;
        .p4 abackground: url(/img/1.jpg) -150px 0;
        .p2 a:hoverbackground: url(/img/1.jpg) -50px -22px;
        .p3 a:hoverbackground: url(/img/1.jpg) -100px -22px;
        .p4 a:hoverbackground: 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

.textulborder: 1px solid #333;
        .textul .p1width: 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>