CSS Box Model & Outlines & Dimension

最新推荐文章于 2021-01-28 13:57:21 发布

_一克拉的梦想_

最新推荐文章于 2021-01-28 13:57:21 发布

阅读量685

点赞数

分类专栏：复习笔记 CSS 文章标签： Outline Dimension Box Model

本文链接：https://blog.youkuaiyun.com/u013960094/article/details/24526047

版权

复习笔记同时被 2 个专栏收录

33 篇文章

订阅专栏

CSS

22 篇文章

订阅专栏

Box Model

In CSS, the term "box model" is used when talking about design and layout.

所有HTML元素都可以被视为是“盒子”。当谈论设计和布局时会使用到“盒模型”这个术语。

The CSS box model consists of: margins, borders, padding, and the actual content.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area.

注意，通过CSS设定元素的宽和高，只是设定了内容区域的宽、高。

To calculate the full size of an element, you must also add the padding, borders and margins.

计算一个元素的完整尺寸，必须把内边距，边框宽度和外边距加上。

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Let's do the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

Outlines

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

CSS轮廓是围绕着元素而画的线（在元素边框之外），使得元素突出显示。

The outline is not a part of an element‘s dimensions; the element's total width and height is not affected by the width of the outline.

轮廓不是元素面积的一部分，所以元素完整的宽和高不受轮廓的宽、高所影响。

使用性质 outline 来一次设定轮廓的样式。须遵循的顺序是:

outline-color
outline-style
outline-width

If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

默认值是：

outline: invert none medium;

invert: performs a color inversion. This ensures that the outline is visible, regardless of color background

Outline Color 使用 outline-color 性质时，必须声明 outline-style 性质，取值同其他元素颜色。
Outline Style 取值同border里的相关性质。
Outline Width 使用 outline-width 性质时，必须声明 outline-style 性质，取值同border里的相关性质

Dimension

CSS尺寸是用于控制一个元素 content 区域的宽和度。

Height & Width

可取的值：

auto: 此为默认值，浏览器来计算
length : in px, cm, etc
% : in percent of the containing block 以内容模块的百分比显示

Min-height、Max-height、Min-width、Max-width

min-*取值：

length 默认值为 0，in px, cm, etc.
%

max-*取值：

none 此为默认值
length: in px, cm, etc.
%: in percent of the containing block

Note:The max-height properties override 重写 height.

The value of the min-height property overrides both max-height and height

Note: The max-width properties override 重写 width.

The value of the min-width property overrides both max-width and width

Tips: 对于 <p> 元素设置 max-height 并不会影响文字排版，而设置 max-width 时，超出最大宽度的文字将被自动换行。

但是如果给它上背景色，设定的max-height可以看出确实改变了块元素的高度。

参考w3school上面max-height和max-width的例子。