CSS的盒模型属性总结

最新推荐文章于 2024-04-28 16:04:57 发布

bboyjoe

最新推荐文章于 2024-04-28 16:04:57 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签：前端网页设计 htm5 css

本文链接：https://blog.csdn.net/bboyjoe/article/details/46861315

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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].οnclick=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].οnclick=function(e){
            document.getElementById("firstChoice").style.visibility= e.target.innerHTML;
        }
    }
</script>
-->
</body>
</html>

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的盒模型属性总结

padding、padding-top、padding-right、padding-bottom、padding-left——设置盒子内边距的尺寸；margin、margin-top、margin-right、margin-bottom、margin-left——设置盒子外边距的尺寸；width、height——设置元素的尺寸;box-sizing——设置尺寸应用到盒子的哪一部分；
复制链接

扫一扫