CSS盒子模型
课程目标
1.常用样式
2.盒子模型
3.CSS3常见效果
盒子模型介绍
引用百度百科
层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）
常用样式
基础样式
| 样式名 |
描述 |
| text-align |
行元素水平方向居中 |
| text-decoration |
控制下划线 none没有 underline有 |
| line-hight |
行高 |
| font-size |
设置字体大小 |
| font-weight |
设置字体粗细的 |
| font-famliy |
设置字体样式 |
| letter-spacing |
设置中文字体之间的间距 |
| word-spacing |
设置英文单词之间的间距 |
行高：设置单行文字所占据的高度，实际位置是文字的大小+上下的空白间距
<style>
div{
/* height: 300px;
width: 500px;
background-color: green; */
height: 300px;
width: 500px;
border: 20px solid red;
background-color: green;
color: yellow;
line-height: 180px;
letter-spacing: 20px;
font-size: 15px;
font-weight: bold;
font-family: '楷体';
}
</style>
</head>
<body>
<div>
轻轻的我走了，正如你轻轻来了<br>
轻轻的我走了，正如你轻轻来了<br>
</div>
盒子模型
页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际占位，通过F12可以直观的查看到盒子模型
边框颜色
.box{
width: 251px;
height: 251px;
background-color: #D7D7D7;
border: solid;
border-color:red blue;/*上下 左右*/
border-color:red blue blueviolet;/*red上 blue左右 blueviolet下*/
border-color:red blue blueviolet green;/*上右下左*/
/*border-top-color: yellow;
border-left-color: orange;
border-bottom-color: green;
border-right-color: red;*/
}
</style>
</head>
<body>
<div class="box">同学们！！</div>
</body>
边框粗细
<style>
.box{
width: 251px;
height: 251px;
background-color: #D7D7D7;
border: solid;
border-color: orange;
/*border-width: 20px;*/
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;
}
</style>
边框样式
<style>
.box{
width: 251px;
height: 251px;
background-color: #D7D7D7;
border: solid;
border-color: orange;
/*border-width: 20px;*/
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;
border-top-style: dashed;/*边框样式为虚线*/
border-bottom-style: double;/*边框样式为双线*/
border-bottom-style: solid;/*边框样式为实线*/
}
</style>
边框的简写
<style>
.box{
width: 251px;
height: 251px;
background-color: #D7D7D7;
border:1px solid #3a6587
}
</style>
</head>
<body>
<div class="box">同学们！！</div>
</body>
外边设置
<style>
*{
margin: 0px;
}
.box{
width: 251px;
height: 251px;
background-color: #D7D7D7;
border:1px solid #3a6587;
margin-top: 30px;
margin-left:60px ;
/*margin: 0px auto;居中*/
