盒子模型知识

1》网页上的每一个标签都是一个盒子

2》content:内容(文字和图片)

height:元素高度

max-height:元素最大高度

min-元素最大宽度

min-元素最小宽度

元素宽度

3》padding:内边距(添加的辅料)

padding-top:上内边距

padding-right:右内边距

padding-left:左内边距

padding-bottom:下内边距

注意内边距填充:

案列1:padding:10px,5px,15px,20px(上,右,左,下)

案列2:padding:10px,5px,15px(上:10,右左:5,下:15)

案列3:padding:10px,5px(上下:10,右左:5)

案列4:padding:10px(上,右,左,下,边距都是10)

4》border:边框(盒子本身)

p{

border:5px solid red;(宽度、样式、颜色)

}

属性:border-width、border-style、border-color

设置边框圆角:border-radius

5》margin:外边距(盒子之间的空隙)

margin-top:上外边距

margin-right:右外边距

margin-left:左外边距

margin-bottom:下外边距

注意:

1》行内标签和行内-块级标签居中使用margin

2》块级标签居中使用text-algin

3》行内标签、块级标签和行内-块级标签都可以使用line-height

 

原文地址:https://www.cnblogs.com/yuhao309/p/5503155.html