转载

盒子模型基础属性

<!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>

转载于:https://www.cnblogs.com/kwkk978113/p/11330662.html

正文到此结束
本文目录