盒子模型基础属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <!--    边框（border）  外边距（margin）  内边距（padding） 内容区（content）-->
    <style>

    #box10{
        width: 100px;
        height: 200px;
        background-color: blueviolet;
        /*border:dashed  10px red ;*/
        border:solid   10px red ;
        /*border:dashed  10px red ;*/
        /*border:dotted  10px red ;*/

        /*盒子模型内容*/
        /*overflow: hidden;!* 内容被剪切，其余内容不可见*!*/
        /*overflow: visible;!*内容不被裁剪，会呈现在元素框以外*!*/
        /*overflow: scroll;!*内容被剪切，流动条显示其余内容*!*/
        /*overflow: auto;!* 如果内容被剪裁则浏览器以流动条显示其他内容*!*/
        /*overflow-x:scroll;*/
        /*overflow-y:scroll;*/
        /*text-overflow: clip;!*修改文本*!*/
        /*text-overflow: ellipsis;!*显示省略号来代表文本*!*/
        /*text-overflow:string;*/
    }
/* 元素的边框*/
/* border         简写属性，用于把针对四个边的属性设置在一个声明。
border-style      用于设置元素所有边框的样式，或者单独地个边设置样式
 border-width     简写属性用于元素的所有边框的宽度，或者单独地为各边边框设置宽度
border-color      简写属性设置元素的所有部分 可见部分的颜色，或 四边分别设置颜色
border-bottom     简写属性，用于把下边框的所有属性设置到一个声明中
border-left       简写属性，用于把左边框的所有属性设置到一个声明中。
border-right      简写属性，用于把右边框的所有属性设置到一个声明中
border-top        简写属性，用于把上边框的所有属性设置到一个声明中
边框border:
线型（solid/dashed/dotted/double）   粗细（数值+单位） 颜色;
右边框border-right:
线形（solid/dashed/dotted/double）   粗细（数值+单位）  颜色;
左边框 border-left:
线形（solid/dashed/dotted/double）   粗细（数值+单位）  颜色;
上边框 border-top:
线形（solid/dashed/dotted/double）   粗细（数值+单位）  颜色;
下边框 border-bottom:
线形（solid/dashed/dotted/double）   粗细（数值+单位）  颜色;
solid:实线，dashed:虚线，dotted:点状线，double:双线

border-top-style/border-top-width/border-top-color--->border-top

border-right-style/border-right-width/border-right-color--->border-right

border-bottom-style/border-bottom-width/border-bottom-color--->border-bottom

border-left-style/border-left-width/border-left-color--->border-left

border-style/border-width/border-color----border


padding的使用方法
padding：填充，元素边框与元素内容之间的区域，称之为内边距。
用法：
用来调整内容在容器中的位置关系
用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上。
padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。

属性值四种方式：
  四个值：上   右   下   左 {padding:10px   20px   30px    40px;}
  三个值：上    左右    下 {padding:10px   20px   30px ;}
  二个值：上下    左右 {padding:10px   20px  ;}
  一个值：四个方向 {padding:2px;}

说明：
可单独设置一方向填充
如：上方向padding-top:10px;    右方向pahdding-right:10px;
下方向padding-bottom:10px;     左方向padding-left:10px;

margin 的使用方法
margin：盒子与盒子之间的距离
属性：
margin
margin-top：上边界
margin-right：右边界
margin-bottom：下边界
margin-left：左边界

属性值四种方式：
  四个值：上   右   下   左 {margin:10px   20px   30px    40px;}
  三个值：上    左右    下 {magin:10px   20px   30px ;}
  二个值：上下    左右 {margin:10px   20px  ;}
  一个值：四个方向 {margin:2px;}

说明：
       {margin: 0 auto; } 在浏览器中横向居中
可单独设置一方向边界，如：上边界margin-top:10px;    右边界margin-right:10px;
下边界margin-bottom:10px;     左边界margin-left:10px;


盒子尺寸的计算
计算公式：
宽 =左右margin+左右border+左右padding+内容width
高 =上下margin+上下border+上下padding+内容height

例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px
宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

注意：
设置padding和margin会撑大盒子，如何解决？
根据外边距，内边距，边框大小重新计算盒子中内容的宽度和高度


*/
</style>
</head>
<body>
<div id="box10">
  3.1415926265358979323846264338327950288419716939969513456456456456456456456798797897</div>
</body>
</html>
盒子模型基础属性

猜你喜欢
