欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

几个概念带你了解Css的模型构建

 

“盒子”模型,每一个HTML元素可以看成一个“盒子”。一个“盒子”具有:宽度、边框、内填充、外边距

1.宽度(width)和高度(height):是指内容的宽度和高度,不含边框、外边距、内填充。

2.内填充(padding):是指内容到边框线间的距离,含四个方向:上、右、下、左

3.外边距(margin):是指边框线以外的距离。

计算一个“盒子”的总空度

假设:总宽度为100px,边框为1px,内填充为10px,求内容的宽度

Width = 100px – 1px*2 -10px*2 = 78px

假设:总宽度为100px,内容的宽50px,求左右内填充分别是多少?

Padding-left = (100px – 50px )/2 = 25px

CSS内填充padding

Padding-left:左边线到内容间的距离

Padding-right:右边线到内容间的距离

Padding-top:顶边线到内容间的距离

Padding-bottom:底边线到内容间的距离

Padding:同时设置四个边的内填充距离

padding:10px; //表示:上下左右四个内填充都是10px

padding:5px 10px; //表示:上下为5px,左右为10px

padding:5px 10px 15px; //表示:上为5px,左右为10px,下为15px

padding:5px 10px 15px 20px; //表示:上右下左分别设置不同的内填充,顺序不可乱

CSS外边距margin

Margin-left:左边线以外的距离

Margin-right:右边线以外的距离

Margin-top:顶边线以外的距离

Margin-bottom:底边线以外的距离

Margin:10px; //表示:四个外边距都是10px

Margin:10px 15px; //表示:上下外边为10px,左右外边距为15px

Margin:5px 10px 15px //表示:上外边距为5px,左右外边距为10px,下外边距为15px

Margin:5px 10px 15px 20px; //分别设置四外外边距,顺序为“上右下左”

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r33851.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-07-12 01:13 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。