第十七天学习：CSS框模型
关键字：框模型
学习计划：
- CSS框模型简介
- border特性
- padding特性
- margin特性
- 面积
- height和width特性
- line-height特性
- max-height特性
- min-height特性
- max-width特性
- min-width特性
- overflow特性
学习记录：
- CSS框模型（box model）
- 规定了元素框处理元素内容、内边距、边框和外边距的方式
- 可以使用CSS分别控制每个框的顶部、底部、左边和右边边框以及页边空白和内边框；并且可以为框的每一边指定不同的宽度和颜色
![]()
- 元素框的最内部分是实际内容，直接包含的内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后面的任何元素。
- 背景应用于由内容和内边距、边框组成的区域。
- width和height指的是内容区域的宽度和高度，增加内边距、外边距和外边距不会影响到内容区域的尺寸，但是会增加元素框的总尺寸。
- 内边距、边框和外边距都是可选的，默认值是零，可以应用于一个元素的所有边，也可以应用于单独的边。
- 外边距可以是负值，而且在很多情况下都要使用负值的外边距。
- border特性
- border特性可用于指定代表元素的框的边框外观，可以改变表框的3种特性：
- border-color：指示边框的颜色
- border-style：指示边框应该是实线、虚线或双线，或者是其他的可能值之一
- border-width：指示边框的宽度
- border-color特性
- 用于改变框周围边框的颜色
- 值：
![]()
-
可以使用下面的特性单独改变边框底部、左侧、顶部、右侧的颜色
- bordr-bottom-color
- border-left-color
- border-top-color
- border-right-color
- border-style特性
- 可用于指定边框的样式 值：
- none（没有的）：没有边框（默认值）
- solid（固体的）：由单条实线组成
- dotted（点线）：由一系列的点组成
- dashed（虚线）：由一系列的短线组成
- double（双重的）：由两条实线组成
- groove（凹槽）：边框看上去如同雕刻进页面中
- ridge（山脊）：边框的外观与值groove相反
- inset（嵌入） ：边框使框看上去如同嵌入页面
- outset（外凸）：边框使框看上去如同位于画布之外
- hidden（隐藏）：与none相同，但是对于表元素存在边框冲突解决方法
- 可以使用下面的特性单独改变 框的边框底部、左侧、顶部和右侧的样式
- border-bottom-style
- border-left-style
- border-right-style
- border-top-style
- border-width特性
- 为元素的所有边框设置宽度，或者单独为各边边框设置宽度，只有当边框样式不是none时才起作用，边框宽度实际上会重置为0。不允许指定负长度值。
- border-width特性的值不能是百分比，而必须是一个长度或者下面的值之一：
- thin（薄的）
- medium（中等的）默认值
- thick（粗的）
- CSS规范中并没有指定thin、medium和thick值的具体宽度（以像素为单位）。
- 可以使用下面的特性单独改变边框底部、左侧、顶部、右侧的宽度
- border-bottom-width
- border-left-width
- border-top-width
- border-right-width
- 利用简写表达边框的特性：
- border特性允许在一个特性中同时指定线的颜色、样式和宽度，例如：
- p{border:4px solid red;}
- 如果使用了这种缩写，则值之间不能有任何内容（除了空格之外）。也可以使用下面的特性单独为框中每一边的线指定颜色、样式和宽度：
- border-bottom
- border-top
- border-left
- border-right
- border特性允许在一个特性中同时指定线的颜色、样式和宽度，例如：
- border特性可用于指定代表元素的框的边框外观，可以改变表框的3种特性：
- padding特性
- 定义元素边框与元素内容之间的空白区域
- padding特性的值可以是长度、百分比或者单词inherit，如果是inherit，则元素内边距与其父元素相同，如果使用百分比，则百分比相对于包含该元素的框。
- 可以使用下面的特性为框的每一边指定不同的内边距量：
- padding-bottom
- padding-let
- padding-top
- padding-right
- 在创建元素的内容和它的边框之间的空白时，padding属性非常有用（即使边框不可见，内边距也可以阻止两个相邻框的内容相互接触）
- margin特性
- margin特性是框之间的距离，它的值可以是长度、百分比或者inherit，这些值的意义与padding特性中的值相同
- 两个框的垂直页边空白接触时，将导致相互折叠，因此块之间的距离不是两个页边空白的总和，而是其中的较大者（如果两个页边空白相等，则可以是其中的任何一个页边空白）。
- 也可以使用下面的特性为框中每一边上的页边空白设置不同的值：
- margin-bottom
- margin-top
- margin-left
- margin-right
- 面积
- height特性和width特性
- 用于设置框的高度和宽度，它们能够采用的值包括长度、百分比或者关键字auto（自动）（默认值）
- line-height特性
- 是最重要的一个特性，它可用于增加文本行之间空间（行距）
- 它的值可以是数值、长度或者百分比，较好的方法是为这个特性指定与文本大小相同的度量单位
- max-width特性和min-width特性
- max-width和min-width特性分别用于指定框的最大和最小宽度
- 当希望创建能够伸缩的页面部分以适应用户的屏幕大小时，这两个特性非常有用。
- max-width特性能够防止框太宽以至于不方便阅读（文本行太长，在屏幕上阅读它们较困难）；min-width特性将有助于防止框太窄以至于不可阅读
- 这两个特性的值可以是数值、长度或百分比，不允许负值。
- max-height特性和min-height特性
- max-height和min-height特性分别用于指定框的最大和最小高度
- 这两个特性的值可以是数值、长度或百分比，不允许负值。
- overflow属性
- 规定当内容溢出元素框时发生的事情
- 可能的值 描述
- visible：默认值，内容不会被修剪，会呈现在元素框之外
- hidden：内容会被修剪，并且奇遇内容是不可见的
- scrol：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
- suto ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
- height特性和width特性
扩展阅读：
- 值复制
- CSS定义了一些规则，允许为外边距指定少于4个值。规则如下：
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上下外边距的值。
- 下图提供了更直观的方法了解这一点：
![]()
- CSS定义了一些规则，允许为外边距指定少于4个值。规则如下：
问题的记录与解决：
- border-style特性中hidden的用法？
- padding值如果是百分比，代表着什么？
- line-height和height的区别？
- 如果我们定义test{line-height：1cm}，那么这个元素的实际高度将取决于其中内容的多少，假如文字部分在浏览器里面显示一行，那么这个test的实际高度是1cm，如果文字显示为两行，那么这个test的实际高度就是2cm，而且文字的行高是1cm
- 如果我们定义test{height：2cm}，那么这个元素的实际高度一般并不会因为内容的多少而发生改变，如果文字显示为一行，那么这个test的高度仍然是2cm，如果显示为两行，但是文字的行高不够1cm，这个test的高度也不会因为内容的高度小于height而发生改变。不够如果文字内容的高度大于2cm，一般来说这个test的高度还是会相应增加的。
浙公网安备 33010602011771号