2020年2月13号---CSS盒子模型学习笔记（三）

2020年2月13号—CSS盒子模型学习笔记（三）

1. 认识盒子模型

所有的HTML元素 都可以被认为是盒子 。CSS盒模型代表网站的设计和布局。 它由边距(margin) ，边框(border) ，填充(padding) 和实际内容组成 。
属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom) 和左侧(left)。（便于记忆可以联想时钟行走方向）

例如，带有填充(padding) 的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right) 的总和。

有边距(margin)，边框(border) 和填充(padding) 的盒。
总宽度是左右边距 ，左右边框 ，左右填充 以及内容的实际宽度 的总和。

在盒模型中设置背景颜色时，将覆盖内容区域 以及填充区域(padding)。

下面的例子与上一课有关填充(padding) ，边框(border) 和边距(margin) 的计算方式相同。

知识点普及： 遇到内容div想居中 与外部div中，可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果

2. border属性
   是元素的边框。
   border宽度
   border的属性 可以单独设置。 border-width属性 指定边框的宽度
   border 颜色
   可以使用颜色名称关键字，RGB或十六进制值定义元素的边框颜色。
   border的样式
   border-style属性的默认值是none，它没有定义边界。
   边框样式属性支持各种样式：虚线(dotted) ，虚线(dashed) ，双精度(double)等 。
   在CSS中，可以使用以下属性为不同的边指定不同的边框：border-top-style，border-right-style，border-bottom-style 和 border-left-style。

3. CSS宽度和高度
   将一个

   元素的总宽度和高度设置为100px：
   HTML代码：

<div>我的宽和高都是100px哦~</div>

CSS代码：

div {
   border: 5px solid green;    
   width: 90px;
   height: 90px;
}

div的总宽度和高度将是90px + 5px（border）+ 5px（border）= 100px;

4. 最小和最大尺寸
   要设置元素的最小和最大高度或者宽度，可以使用以下属性：
   min-width - 元素的最小宽度
   min-height - 元素的最小高度
   max-width - 元素的最大宽度
   max-height - 元素的最大高度
   HTML代码：

<p class ="first">本段的<strong>最小高度</strong>设置为100px。</p>
<p class ="second">本段的<strong>最大宽度</strong>设置为100像素。</p>

CSS代码：

p.first {
   border: 5px solid green;    
   min-height: 100px;       
}
p.second {
   border: 5px solid green;    
   max-width: 100px;       
}