width: 200px;
height: 200px;
/*边框的宽度 实际开发中都是跟 px 单位*/
/*border-width: 5px;*/
/*实线的*/
/*border-style: solid;*/
/*虚线的 dashed 大师的 说话都很虚*/
/*border-style: dashed;*/
/*点线*/
/*border-style: dotted;*/
/*border-color: pink;*/
/*边框的综合性写法*/
/*边框粗细 边框 样式 边框颜色*/
border: 5px dotted pink;
div {
width: 200px;
height: 400px;
/*上边框写法*/
border-top: 2px solid red;
border-left: 1px solid green;
border-right: 1px solid blue;
border-bottom: 1px solid pink;
}
input {
/*border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed red;*/
/*四个边框都去掉 先写大的，后写小的*/
border: none;
border-bottom: 1px dashed red;
/*border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed red;*/
/*四个边框都去掉 先写大的，后写小的*/
border: none;
border-bottom: 1px dashed red;
/*左内边距*/
padding-left: 10px;
padding-top: 30px
/*padding 简写 复合写法*/
/*padding: 20px; 上下左右 都是 20 内边距*/
/*padding: 10px 20px; 上下10 左右 20 内边距*/
/*padding: 10px 20px 30px; 上 10 左右 20 下 30 内边距*/
/*padding: 10px 20px 30px 40px; 上10 右 20 下 30 左 40 顺时针*/
width: 180px;
height: 200px;
background-color: pink;
/*添加10px 内边距 左右 上下*/
padding: 10px;
/*盒子的实际大小 = 内容宽度 高度 + 内边距 + 边框*/
/* = 200 + 20 + 0
= 220 */
/*解决的方法：
内边距一定要给的， 我们只能改变 内容宽度 width 让他减去 多出来的内边距就可以了*/
/*200 - 20 = 180 */
/*width: 200px;*/
height: 30px;
background-color: purple;
padding-left: 30px;
/*特殊情况， 如果这个盒子啊，没有宽度 则padding 不会撑开盒子*/
/*外边距*/
/*margin-left: 100px;
margin-top: 50px;*/
margin: 100px 20px 0 10px;
width: 600px;
height: 400px;
background-color: pink;
/*让块级盒子居中对齐水平 1. 必须有宽度 2. 左右外边距设置为auto*/
/*1. margin-left: auto;
margin-right: auto;*/
/*2. margin: auto;*/
margin: 0 auto;
/*块级盒子水平居中*/
margin: 50px auto;
/*盒子里面的文字 行内元素 、行内块居中对齐水平居中*/
text-align: center;
/*嵌套关系 垂直外边距合并 解决方案 */
/*1. 可以为父元素定义上边框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以给父级指定一个 上 padding值*/
/*padding-top: 1px; */
/*3. 可以为父元素添加overflow:hidden。*/
