盒模型
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 聚焦*/