【前言】
CSS 的盒子模型有很多有趣的东西，我们一起来打开这个盒子看看吧！
- Margin(外边距)
- Padding(内边距)
- Border(边框线)
- Content(内容)
【小知识】
margin
- 外边距，两个块状标签之间的距离
- top、 left 、right 、bottom
<style>
div{widht:100px;
height:100px;
}
#outer{background:red;
width:100px;
height:100px
}
#inner{background:blue;
margin-top:50px
}
</style>
</head>
<body>
<div id="outer">易烊千玺</div>
<div id="inner">易烊千玺</div>
</body>
浏览器显示如下：
padding
- 内边距，主要用来设置里面内容举例边框线之间的距离
<style>
div{widht:100px;
height:100px;
float-left
}
#top{background:red;
margin-left:40px
}
#bottom{background:blue;
padding-left:10px;
padding-top:10px
}
</style>
</head>
<body>
<div id="top">易烊千玺</div>
<div id="bottom">易烊千玺</div>
</body>
浏览器显示如下：
扫描二维码关注公众号，回复：
8939975 查看本文章
注：设置盒子与边框线之间距离：margin：5px;padding:5px
border
- 边框线，对于每一条线来说，都有3个属性：样式、宽度、颜色
- top 、right、 left 、bottom
- border-top-style 、border-top-width、 border-top-color
<style>
div{widht:100px;
height:100px;
float:left
}
#top{border-top-style:solid;
border-top-style:10px;
border-top-style:red;
}
/*
border-top/right/left/bottom-style
border-top-style设置线的 样式:solid,dashed,double,groove
border-top-style设置线的粗细
border-top-color颜色
*/
/*若设置为四边都有的边框线可简写为：border：1px red solid*/
</style>
</head>
<body>
<div id="top">易烊千玺</div>
</body>浏览器显示如下：
重要：一般都能看到几乎大部分的网页都是内容居中对齐，两边空出一部分，
圆角边框
- boder-top-left-radius：30px； //左上角
boder-top-right-radius：30px； //右上角
boder-bottom-left-radius：30px； //右下角
boder-bottom-right-radius：30px； //左下角
- 如果这四个弧度的圆角相同，可以写成：
border-radius：30px
- 注：百分比大于50%后，形状就不会再变化了，圆角的半径不能超过宽/高的一半
浏览器显示如下：
半圆
- 下半圆直接将100和0互换位置
- 其他方向的圆四个位置互换即可
<style>
.one{width:50px;
height:50px;
background:red;
border-radius:100px 100px 0 0;
box-sizing:border-box
}
.two{width:50px;
height:50px;
background:red;
border-radius: 0 0 100px 100px;
box-sizing:border-box
}
.three{width:50px;
height:50px;
background:red;
border-radius:0 100px 100px 0;
box-sizing:border-box
}
.four{width:50px;
height:50px;
background:red;
border-radius: 100px 0 0 100px ;
box-sizing:border-box
}
</style>
浏览器显示如下：
扇形
<style>
.one{width:50px;
height:50px;
background:red;
border-radius:0 50px 0 0;
box-sizing:border-box
}
.two{width:50px;
height:50px;
background:red;
border-radius:50px 0 0 0;
box-sizing:border-box
}
.three{width:50px;
height:50px;
background:red;
border-radius:0 0 50px 0;
box-sizing:border-box
}
.four{width:50px;
height:50px;
background:red;
border-radius:0 0 0 50px;
box-sizing:border-box
}
</style>
浏览器显示如下：
盒子阴影：box-shadow:inset x-offset y-offset blur-radius color;
<style>
.one{widht:150px;
height:150px;
background:red;
box-shadow:5px 5px 5px yellow
}
</style>
</head>
<body>
<div class="one"></div><br>
</body>
浏览器显示如下：
加inset为内阴影
加div：hover{box-shadow：0 0 5px black;}可以使鼠标触及时显现阴影
display：把块状标签变成流状标签
<style>
.span{widht:150px;
height:150px;
background:red;
display:block
}
/*
display:block把内联标签变成块状标签
inline-block:把转换后的块状标签在一行内显示
none：不显示
*/
</style>
</head>
<body>
<span>前端</span><span>前端</span>
</body>
浏览器显示如下：
none：不显示,和visibility:hidden等同
背景半透明：background-color:rgba(0,0,0,0.0)
图片、文字间距：
1.margin：0 25px(数字自由改变)
2.<img sre="" style="margin-left:10px"> (数字自由改变)
