前端开发：盒子模型、块元素

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-top

padding-bottom

padding-left

padding-right

使用 box - sizing: border - box 属性也可以使内边距不再撑大盒子 . ( 和上面 border 类似 )

div {

    height : 200px ;

    width : 300px ;

    padding-top : 5px ;

    padding-left : 10px ;

   

padding : 5px ; 表示四个方向都是 5px

padding : 5px 10px ; 表示上下内边距 5px , 左右内边距为 10px

padding : 5px 10px 20px ; 表示上边距 5px , 左右内边距为 10px , 下内边距为 20px

padding : 5px 10px 20px 30px ; 表示 上 5px , 右 10px , 下 20px , 左 30px ( 顺时针 )

}

3.外边距 margin

控制盒子和盒子之间的距离 .

可以给四个方向都加上边距

margin-top

margin-bottom

margin-left

margin-right

 margin-bottom: 20px;

margin: 10px; // 四个方向都设置

margin: 10px 20px; // 上下为 10, 左右 20

margin: 10px 20px 30px; // 上 10, 左右 20, 下 30

margin: 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>