02盒模型

盒模型

1.border

color:red;字体颜色

border:5px solid red;宽度 类型 颜色

border-style:solid;边框类型：

solid 实线 dotted 点线 dashed虚线double 双线 groove 沟槽 inset outset

border-top 上边框

border-right 右边框

border-bottom 下边框

border-left 左边框

border-top-width 上边框宽

border-top-style 上边框类型

border-top-color  上边框颜色

color值：

英文单词：red,yellow,green,black....

十六进制：#(0-9,a-f)

rgb(0~255,0~255,0~255);

r:red  g:green b:blue;

rgba(0~255,0~255,0~255,0~1)

r:red  g:green b:blue; a: alpha

2.margin

margin:百分比相对于父元素盒子的宽度来计算的

3.外边距合并：

1）当两个盒子嵌套，它的垂直外边距相遇的时候，它的外边距会显示较大的哪个值；

解决方法：边框；内边距；

2）当两个盒子相邻，它的垂直外边距相遇的时候，它的外边距会显示较大的哪个值；

记住：定位元素和浮动元素没有外边距合并

外边距合并指的是，当两个（垂直外边距）相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

4.盒子的大小

盒子的大小=内容（content）+内边距（padding）+边框（border）

5.input标签

      input{

outline:none;

}

input:focus{

outline:3px solid pink;

}

/*:focus 聚焦*/