重要属性

写在后面:
上午始终在温习编译原理,还有两天考试了,明天又捡回了好多知识点,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三个属性。
大家学习完之后肯定要保持敲完代码,不要间接复制粘贴。