WEB前端网页设计 HTML CSS 网页设计参数 - 【盒子模型】

 

目录

盒子模型border

样式style的取值：

padding

margin

盒子模型：“内容”-内边距-边框-外边距

---

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width	宽度
height	高度
border	边框
padding	内边距
margin	外边距

盒子模型border

表示盒子的边框

分为四个方向：

•     上top、右right、下bottom、左left
•     border-top、border-right、border-bottom、border-left

每个边框包含三种样式：

•     border-top-color、border-top-width、border-top-style
•     border-right-color、border-right-width、border-right-style
•     border-bottom-color、border-bottom-width、border-bottom-style
•     border-left-color、border-left-width、border-left-style

样式style的取值：

solid	实线
dashed	虚线
dotted	点线
double	双线
inset	内嵌的3D线
outset	外嵌的3D线

简写，三种方式：

按方向简写：	border-top、border-right、border-bottom、border-left
书写顺序：	border-顺序：width style color
按样式简写：	border-color、border-width、border-style
书写顺序：	border-样式：top right bottom left

    必须按顺时针方向书写，同时可以缩写：

        border-width:2px;--------->四个边框的宽度均为2px

        border-width:1px 2px;

        border-width:1px 2px 4px;

    规则：如果省略，则认为上下一样，左右一样

    终级简写：

    如果四个边框样式完全相同，border:width style color;

padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

margin

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

居中对齐：

/* 元素的水平居中 */

/* 1.块级元素的水平居中 */

    margin:0 auto;

    /* 提示：块级元素必须指定宽度 */

    /* 2.文本的水平居中 */

    text-align:center;

    /* 3.垂直居中，将height和line-height设置为相同 */

    height:100px;

    line-height:100px;

盒子模型：“内容”-内边距-边框-外边距

每个盒子都有三个参数；以px为单位

容器标签	<div></div>
边框 实心边框	border border：solid
内边距	padding
外边距	margin
边框类型(虚线、实线)	border-style	实线：border-style：solid；
边框盒子长度(厚度)	border-width	例如：border-width：10px  20px； #表示上下盒子厚度 一个值--->全部，两个值-->上下，三个值--->右，按上右下左的顺序； border-width：10px；#若只有一个值 则表示 上下左右都是10px
边框盒子颜色	border-color
浮动   类似对齐 (多个浮动在一起则水平排列)	float：	左浮动-> float：left ；         右浮动->float：right；
清除浮动	clear： both	例：clear：left   #表示清除此网页的左浮动 清除所有浮动
将文字设置为正中间	height、 line-height	设置文字的左右居中--->text-align:center; 设置行高：line-height：100px；