爱站程序员基地<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>.box {width: 200px;height: 200px;/*padding:10px 一个值相当于四个方向的值相同单独一个边距padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;多个边距,按照方向进行展开padding:10px 20px; 两个值，相当于上下/左右padding:10px 20px 30px; 第一个上，第二个右，第三个下，第四个默认和第二个相同padding：10px 20px 30px 40px;*/padding: 10px 20px 30px 40px;/*按照三要素 border：边框border-width 边框宽度solid：实线 边框样式 border-styleborder-color 边框颜色按照方向border-left:10px solid blue;border-left:10px solid blue;border-left:10px solid blue;border-left:10px solid blue;border-width:20px;border-style:solid(实线）/dashed（虚线）/dotted/double;border-color:red green blue pink;*/border: 10px solid brown;background-color: rgb(110, 219, 107);}input {/*去掉边框*/border: none;}.box2 {/*使用方法同border*/width: 200px;height: 200px;background-color: pink;margin-top: 20px;/*文字水平居中*/text-align: center;/*文字垂直居中，设置行高跟高度一样*/line-height: 200px;/*整个盒子水平居中,设置auto会自动平分*/margin-left: auto;margin-right: auto;}</style></head><body><!--绝大多数标签都可以看成一个盒子，有宽高，或者放内容盒子模型 width/height/padding/border/marginwidth 宽度，指的是内容宽度 不是盒子真是宽height 高度，指的是内容的高度 不是盒子真是高padding 内边距，指的是内容到边框的距离border 边框margin 外边距 元素与元素之间的距离margin:0 auto; 可以让有宽度的块级元素水平居中--><div class=\"box\">233</div><input type=\"text\"><div class=\"box2\">皮卡丘</div></body></html>
CSS-盒子模型 三
未经允许不得转载：爱站程序员基地 » CSS-盒子模型 三
