1.边框border(三种形式):
border-width 定义边框粗细
border-style 边框的样式
border-color 边框颜色
简写:border:1px solied red;
solid表示实线
dashed表示虚线
sotted表示点线
2.内边框padding
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
简写可以一到四个值
一个值代表上下左右 例如:padding:5px
两个值代表上下和左右 例如:padding:2px 5px;
三个值代表上、左右、下 例如:padding:2px 5px 4px
四个值代表上、右、下、左 例如:1px 2px 3px 4px
注意:一旦改变了内边框padding值的大小,盒子的大小也会跟着改变,所以我们会用到后边学的margin
3.外边距margin
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
如果想让盒子在页面保持居中状态,我们可以使用以下方式
margin:0 auto; (块元素居中的方法)
行内块元素可用之前学到的text-align : center ;
4.清除内外边距:网页元素很多都带有默认的内外边距,而且不同的浏览器的值不一样,所以当我们写代码时首先把边框值初始化
* {
margin : 0 ;
padding : 0 ;
}
5.我们在练习制作网站时可能会用到别人的盒子的边距颜色等,这时候我们需要下载ps来测量边距及颜色