重要属性
写在前面:
上午一直在复习编译原理,还有两天考试了,今天又捡回了好多知识点,LR(1)的展望符的求法、好几个易错的判断题等,下午还要接着看属性文法,和第一章的概念,概念理解就容易记住了,Continuing pursue。
盒子模型(Box Model)是将CSS设置样式的区域抽象为一个个盒子,一个套着一个,这些盒子就是一个个矩形区域,通过改变这些区域的样式,从而达到想要的效果。
属性 | 说明 |
---|---|
Margin(外边距) | 清除边框外的区域,外边距是透明的。 |
Border(边框) | 围绕在内边距和内容外的边框。 |
Padding(内边距) | 清除内容周围的区域,内边距是透明的。 |
Content(内容) | 盒子的内容,显示文本和图像。 |
使用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型演示</title>
<style>
div {
background-color:cadetblue;
width: 200px;
border: 10px solid lightblue;
padding: 25px;
margin: 50px;
}
</style>
</head>
<body>
<p>CSS盒模型本质上是几个封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div>这里是盒子内的实际内容。可以计算出这个盒子的总大小是:200+2*10+2*25+2*50=370</div>
</body>
</html>
实现效果:
说明:
1、Content区域是必备的,其他三个都是可选的,它有三个属性:width、height、overflow。当内容的区域装不下的时候设置overflow属性来指定溢出部分处理的方式。
2、Margin、Padding都有-top, -bottom, -left, -right四个方向的属性,可以分别设置距离,都可以使用像border一样的简写方式。
3、border就是和我之前的博客写的border是一样的,有-width, -style, -color三个属性。
大家学习完之后一定要坚持敲完代码,不要直接复制粘贴。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。