CSS盒子
1.盒模型
腾讯课堂官网为例
- 内容区域（content）width height
- padding 内边距
- border 边框
- margin 外边距
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>box</title>
<style type="text/css">
.box-outer {
border: 3px solid #286090;
width: 270px;
}
.box-inner {
border: 5px solid #f00;
padding: 10px;
width: 200px;
height: 200px;
background: #efefef;
margin: 20px;
}
span {
background: #ccc;
border-radius: 5px;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box-outer">
<div class="box-inner">
<span>span1</span>
"和"
<span>span2</span>
</div>
</div>
</body>
2.盒模型相关属性详解
margin
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
.box-1{
margin:10px;
}
.box-1{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
分开写的好处，可与分别编辑上下左右边距
上右下左
①上②左右③下和①上下②左右
border
- border-width
- border-style
- border-color
.box-1 {
border-color: #f00 #ccc #ccc；/* top、left和right、bottom */
border-width：2px 1px；/* top和bottom、left和right*/
border-style: solid; /* all */
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒模型相关属性</title>
<style>
body {
font-size: 14px;
}
section {
margin: 60px;
}
pre {
border: 1px solid rgba(0, 0, 0, 0.5);
width: 300px;
margin: 10px;
color: #286090;
}
.one {
padding: 20px;
}
.two {
padding: 20px 40px;
}
.three {
padding: 20px 40px 60px;
}
.four {
padding: 20px 40px 60px 80px;
}
.merge {
border: 2px solid #286090;
}
.split {
border-width: 2px;
border-color: #286090;
border-style: solid;
}
</style>
</head>
<body>
<section>
<h2>padding</h2>
<pre class="one">
.one {
padding: 20px;
}
</pre>
<pre class="two">
.two {
padding: 20px 40px;
}
</pre>
<pre class="three">
.three {
padding: 20px 40px 60px;
}
</pre>
<pre class="four">
.four {
padding: 20px 40px 60px 80px;
}
</pre>
</section>
<section>
<h2>border</h2>
<pre class="merge">
.merge {
border: 2px solid #286090;
}
</pre>
<pre class="split">
.split {
border-width: 2px;
border-color: #286090;
border-style: solid;
}
</pre>
</section>
</body>
</html>
3.元素的显示隐藏
- display
- visibility
- overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的显示隐藏</title>
<style type="text/css">
h2 {
margin: 0;
}
.box {
height: 100px;
position: relative;
z-index: 2;
background: #87cbd7;
margin: 10px;
display: block;
}
.box1 {
/*display: none;*/
}
.box2 {
/*visibility: hidden;*/
}
.demo {
width: 450px;
height: 100px;
background: #f1c9cc;
color: #333;
}
.box3 {
/*overflow: auto;*/
}
.box3 .demo {
height: 300px;
}
</style>
</head>
<body>
<div class="box box1">
<div class="demo">
<h2>display</h2>
<ul>
<li>所有的后代元素都隐藏</li>
<li>好像这个元素不存在一样</li>
</ul>
</div>
</div>
<div class="box box2">
<div class="demo">
<h2>visibility</h2>
<ul>
<li>元素的大小不变，可理解为透明</li>
<li>子元素设为 visibility: visible，则该子元素依然可见</li>
</ul>
</div>
</div>
<div class="box box3">
<div class="demo">
<h2>overflow</h2>
<ul>
<li>规定了当内容元素溢出父容器时的展现形式</li>
<li>裁剪内容，使用滚动条来显示或直接显示超出部分</li>
</ul>
</div>
</div>
</body>
</html>
4.背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景色（background-color）</title>
<style type="text/css">
.box {
height: 400px;
background-color: #e8e8e8;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="http://www.w3school.com.cn/cssref/pr_background-color.asp" target="_blank">background-color</a>：背景颜色</li>
<li><a href="http://www.w3school.com.cn/cssref/pr_background-image.asp" target="_blank">background-image</a>：背景图片</li>
<li><a href="http://www.w3school.com.cn/cssref/pr_background-repeat.asp" target="_blank">background-repeat</a>：背景图片平铺方式</li>
<li><a href="http://www.w3school.com.cn/cssref/pr_background-position.asp" target="_blank">background-position</a>：背景图片定位</li>
<li><a href="http://www.w3school.com.cn/cssref/pr_background-size.asp" target="_blank">background-size</a>：背景图片大小</li>
<li><a href="http://www.w3school.com.cn/cssref/pr_background.asp" target="_blank">background</a>：背景简写</li>
</ul>
</div>
</body>
</html>
简写：
5.雪碧图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雪碧图的应用</title>
<style type="text/css">
.sprite {
display:inline-block;
width: 96px;
height: 96px;
background: url("http://coding.imweb.io/img/p2/sprite-base.png") no-repeat; /* 设置背景 */
}
.happy {
background-position: 0 0; /* 设置图标位置 */
}
.cry {
background-position: -192px -96px; /* 设置图标位置 */
}
.cute {
background-position: -480px,-96px;
}
</style>
</head>
<body>
<h1>雪碧图的应用</h1>
<h2>开心表情</h2>
<div class="sprite happy"></div>
<h2>哭泣表情</h2>
<div class="sprite cry"></div>
<h2>调皮的表情</h2>
<div class="sprite cute"></div>
<div></div>
</body>
</html>
