1.border边框
*{box-sizing:border-box; } //使所有边框不再撑大盒子模型
粗细 : border-width样式 : border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框颜色 : border-color
div {width : 200px ;height : 200px ;border : 2px solid green ; 简写没有顺序规定//边框宽2px 实线 绿色border-radius : 100px ; 变成圆角矩形；/* 或者用 50% 表示宽度的一半 */border-radius : 50% ;}
也可以如此控制他的四个角；
border-top-left-radius : 2em ;border-top-right-radius : 2em ;border-bottom-right-radius : 2em ;border-bottom-left-radius : 2em ;也可以按顺时针书写从左上角开始；border-radius : 10px 20px 30px 40px ;
更多的细节请看菜鸟教程；因为太多了；无法演示
2.内边距 padding
padding 设置内容和边框之间的距离.
默认内容是顶着边框来放置的 . 用 padding 来控制这个距离可以给四个方向都加上边距padding-toppadding-bottompadding-leftpadding-right使用 box - sizing: border - box 属性也可以使内边距不再撑大盒子 . ( 和上面 border 类似 )
div {height : 200px ;width : 300px ;padding-top : 5px ;padding-left : 10px ;padding : 5px ; 表示四个方向都是 5pxpadding : 5px 10px ; 表示上下内边距 5px , 左右内边距为 10pxpadding : 5px 10px 20px ; 表示上边距 5px , 左右内边距为 10px , 下内边距为 20pxpadding : 5px 10px 20px 30px ; 表示 上 5px , 右 10px , 下 20px , 左 30px ( 顺时针 )}
3.外边距 margin
控制盒子和盒子之间的距离 .可以给四个方向都加上边距margin-topmargin-bottommargin-leftmargin-right
margin-bottom: 20px;
margin: 10px; // 四个方向都设置margin: 10px 20px; // 上下为 10, 左右 20margin: 10px 20px 30px; // 上 10, 左右 20, 下 30margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
块级元素水平居中
指定宽度 ( 如果不指定宽度 , 默认和父元素一致 )把水平 margin 设为 auto三种写法：使块级元素居中；使div块剧中；margin-left : auto ; margin-right : auto ;margin : auto ;margin : 0 auto ;这个水平居中的方式和 text-align 不一样 .margin: auto 是给块级元素用得到 .text-align: center 是让行内元素或者行内块元素居中的 .另外 , 对于垂直居中 , 不能使用 " 上下 margin 为 auto " 的方式
4.块元素
使用 display 属性可以修改元素的显示模式.可以把 div 等变成行内元素 , 也可以把 a , span 等变成块级元素display: block 改成块级元素 [ 常用]display: inline 改成行内元素 [ 很少用]display: inline- block 改成行内块元素
举例：将超链接元素变成每一行，只显示一个超链接；
<style>
a{
display:block;
}
</style>
