HTML前端开发之路——盒子

时间 2019-12-05

标签 html 前端开发之路盒子栏目 HTML 繁體版

原文原文链接

盒子，顾名思义是具备包裹性的，有边框有内容。
css

display属性简介html
div元素是block元素，呈现形式为充满“整行”，当两个同级div元素显示出来，则呈现的是上下关系；而span元素则是内敛元素，当两个同级span元素呈现出来，显示的是左右同行关系；而在css中的display属性能够对上述关系进行调节，display经常使用有三种属性值，block，inline，inline-block，spa
值为block时，显示效果则如同同级div元素同样，为inline时，则处于同行，可是block元素能够对宽高进行设置，而inline元素则不能设置，所以，当又想某个内容呈现是inline形式，又想对其设置宽和高时，则能够采用display，将值设为inline-block；code
一样，若是想对表格进行相似的操做，能够采用display属性值中的inline-tablehtm
除此以外display还有list-item值，设置该值能够将内容以列表的形式呈现出来继承
overflow属性简介it
当盒子内的内容超出盒子大小的时候，能够才用overflow属性进行设置；table
overflow属性有hidden，inherit，scroll，visible，auto等值，hidden表示将超出部分的内容hidden不可见，而visible相反，显示全部内容；inherit则是继承父类的意思；scroll表示全部内容都对放在盒子内部，超出部分能够经过滑轮滚动查看；auto表示若是没有超过部分则正常显示，若在横向超出则增长横向滚动条，纵向的话增长纵向滚动条meta

box-sizing属性简介scroll

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            /*border-box表示整个盒子大小是固定的  例以下面的例子 总体盒子大小
            为100*100  内容部分是80*80*/
 box-sizing: border-box;
            width: 100px;
            height: 100px;
            padding: 10px;
            background-color: #6b6916;
        }
        #div2{
            /*content-box表示盒子内部内容部分是指定大小  可是整个盒子大小还要
            根据内容的padding属性来定  就例以下面的例子 总体盒子大小为120*120*
 内容部分为100*100*/
 background-color: #ffaa00;
            width: 100px;
            height: 100px;
            padding: 10px;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>