CSS的盒模型属性总结

来源：互联网发布：网络玄幻小说合集chm 编辑：程序博客网时间：2024/06/06 16:13

padding、padding-top、padding-right、padding-bottom、padding-left——设置盒子内边距的尺寸；

margin、margin-top、margin-right、margin-bottom、margin-left——设置盒子外边距的尺寸；

width、height——设置元素的尺寸;

box-sizing——设置尺寸应用到盒子的哪一部分；

max-width、min-width、max-height、min-height——为元素大小设置范围；

overflow、overflow-x、overflow-y——设置元素溢出内容的方式；

visibility——设置元素的可见性；

display——设置元素盒子的类型；

display:block——设置元素盒子的类型，使元素在垂直方向上区别于周围元素；

display:inline——设置元素盒子的类型，使元素显示为段落中的一个字；

display:inline-block——设置盒子的类型，使元素对外具有行内元素的属性，对内具有块元素的属性；

display:run-in——设置盒子的类型，使元素的显示方式依赖其周围的元素；

display:none——隐藏元素及其内容；

float——将元素移动到其包含块的左边界或右边界，或者另一个浮动元素的边界；

clear——设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素；

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>上海远地资产管理有限公司</title>    <meta name="author" content="jason"/>    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>    <style type="text/css">      /**padding       p{            border: 10px solid black;            background-color: lightgray;            background-clip: content-box;            padding: 0.5em 0.8em 0.3em 0.6em;        }        */      /**padding       p{            border: 10px solid black;            background-color: lightgray;            border-radius: 1em 4em 1em 4em;            padding: 5px 25px 5px 40px;        }       /**margin        img{            border: 4px solid black;            background: lightgray;            padding: 4px;            margin: 4px 20px;        }        */       /**width/height/box-sizing        div{            width: 75%;            height: 100px;            border: thin solid black;        }        img{            background: lightgray;            border: 4px solid black;            margin: 2px;            height: 50%;        }        #first{            box-sizing: border-box;            width: 50%;        }        #second{            box-sizing: content-box;        }        */        /**min-width/max-width        img{            background: lightgray;            border: 4px solid black;            margin: 2px;            box-sizing: border-box;            min-width: 100px;            width: 50%;            max-width: 200px;        }        */        /**overflow        p{            width: 200px;            height: 100px;            border:medium double black;        }        #p1{            overflow: hidden;        }        #p2{            overflow: scroll;        }        */      /**visibility        tr>th{            text-align: left;            background: gray;            color: white;        }        tr>th:only-of-type{            text-align: right;            background: lightgray;            color: gray;        }        */      /**display:block        p{            border: medium solid black;        }        span{            display: block;            border: medium double black;            margin: 2px;        }        */      /**display:inline      p{         display: inline;      }      span{          display: inline-block;          border: medium double black;          margin: 2em;          width: 10em;          height: 2em;      }      */        p.toggle{            float: left;            border: medium double black;            width: 40%;            margin: 2px;            padding: 2px;        }        p.cleared{            clear: left;        }    </style></head><body><p id="p1">    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。    远地将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。</p><p id="p2">    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。    <span>远地将通过自身的专业优势和有效的信息交流平台，</span>为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。</p><img src="images/xw_cenn.png"><img src="images/xw_sohu.png"><div>    <img id="first" src="images/xw_sohu.png">    <img id="second" src="images/xw_sohu.png"></div><table>    <tr>        <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>    </tr>    <tr id="firstChoice">        <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>    </tr>    <tr>        <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>    </tr></table><p class="toggle">    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。    远地将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。</p><p class="toggle cleared">    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。    远地将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。</p><p class="cleared">    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。    远地将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。</p><p>    <button>Left</button>    <button>Right</button>    <button>None</button></p><script>    var buttons=document.getElementsByTagName("button");    for(var i=0;i<buttons.length;i++){        buttons[i].onclick=function(e){            var elements=document.getElementsByClassName("toggle");            for(var j=0;j<elements.length;j++){                elements[j].style.cssFloat= e.target.innerHTML;            }        }    }</script><!--<p>    <button>Visible</button>    <button>Collapse</button>    <button>Hidden</button></p>--><!--visibility<script>    var buttons=document.getElementsByTagName("button");    for(var i=0;i<buttons.length;i++){        buttons[i].onclick=function(e){            document.getElementById("firstChoice").style.visibility= e.target.innerHTML;        }    }</script>--></body></html>

0 0