/*background颜色会渲染padding区域*/
/*padding-top: 25px;
padding-left: 25px;
padding-bottom: 25px;
padding-right: 25px;
*/
/*上述代码简写方法 4个值 顺时针
上 右 下 左 */
padding: 10px 20px 30px 40px;
/*如果只有3个值,代表 上 左右 下
2个值表示 上下,左右
1个值表示 上下左右
*/
/*
设置一个边框需要3个值
边框宽度 px
边框类型
solid 实线
dotted 小正方点
dashed 虚线
边框颜色
可以不写,默认为与当前文字的默认颜色相同
*/
/*border: 10px dashed black;
上述写法相当于下面*/
/*border-top: 10px dashed black;
border-right: 10px dashed black;
border-left: 10px dashed black;
border-bottom: 10px dashed black;
color:red;*/
/*border-top:1px dashed black; 相当于*/
border-top-color: black;
border-top-style: dashed;
border-top-width: 1px;
/*同理,下左右都可以按照上述拆分的方式去写*/
/*当元素需要与别的元素之间有距离时,可以考虑使用margin,margin的区域是透明的,背景色不会渲染到该区域.*/
/* margin-top:50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50px; */
margin: 60px 200px 100px 100px;
/*代码从上向下走,所以下面的10px会覆盖上面的4个值,也就是实际输出的值为10*/
margin: 10px;
/*overflow:hidden 把超出/溢出的内容给隐藏*/
盒模型:把每个html元素看做一个盒子
1.盒模型结构
2.盒模型如何影响元素之间的位置关系
-->
<!-- 盒模型结构
1.content(内容)
展示文字和图片
2.padding(内边距)
内容与边框之间的距离
3.border(边框)
元素的边框
4.margin(外边距)
元素与元素之间的距离(父子元素,兄弟元素).
-->
<!--
盒模型有两种形式:
1.普通盒模型
盒子的宽度=
width +padding -left +padding -right + border-left + border-right + margin-left + margin-right.
盒子的高度
height+padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom.
2.怪异盒模型
-->
<!-- content:内容,平时给元素添加的文字或者图片
1.如果是块元素且没有设置宽高,content的宽默认为父级的宽,高为内容的高.
2.若是块元素并且设置了宽高,那content的宽高为设置好的宽高.
3.如果是行元素,content的宽高就是元素内容的宽高.
<!-- margin的坑点
1.相邻兄弟元素在垂直方向上的margin会出现融合情况.
会取margin值最大的那个元素.
使用display:inline-block样式
2.当父级与子级元素都设置了margin时,子级的margin值会传递给父级.
解决方案:
1.给父级加边框.
2.给父级加overflow样式. (建议使用该方法.)
3.使用display:inline-block样式-->