CSSの研究では、2ノート

ボックスモデル:(フォーカス）

• ボックスモデル（CSSボックスモデル）は、フレーム処理要素内容、パディング、ボーダー、および他の外枠線のスタイルの要素を指定します

絵の上にこれを忘れないでください！忘れないようにしてください！確かに！確かに！

外枠は要素及びパディングの外縁によって0に設定されているマージンをカバーするためにユーザエージェントスタイルシートによって提供されるより多くの元素; 0：パディング、境界及びパディングは任意の属性、デフォルト値でありますブラウザのスタイル

CSSでは、幅と高さは、幅とコンテンツ領域の高さを意味し、マージン、ボーダー、およびマージンの増加はコントロールのコンテンツ領域の大きさに影響を与えませんが、フレーム要素の全体的なサイズが大きくなります。

#box {
    width: 70px;
    padding: 5px;
    margin: 10px;
}

パディング：

• 境界線と要素のコンテンツ領域の間のマージン内の要素。

• パディングプロパティ：要素空白領域の元素の含有量との間の境界を画定します

  受信パディング長さ値、パーセント値が、負ではありません

片側の内の余白のプロパティ：

• パディングトップ：パディング
• パディング右：右内の余白
• パディング下：下マージン
• パディング左：左マージン

h1 {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}

もちろん、CSSはまた、内部に詰めて設計マージンをサポート

h1 {
    padding:10px 20px 10px 20px;<!-- 上右下左顺序 -->
}

ボーダー：

• 境界要素（ボーダー）要素内容とパディング一つ以上のラインであります

境界線と背景：

描かれたボーダー背景要素上記を！

ボーダースタイル：

• ボーダースタイルの宿泊施設： 10様々なスタイルの定義

  無し	国境を定義していません。
  隠されました	そして、「なし」と同じ。しかし、テーブルのテーブルで使用する場合を除き、国境紛争を解決するために隠されました。
  点在	点状の境界線の定義。これは、ほとんどのブラウザで実線で表示されます。
  破線	点線を定義します。これは、ほとんどのブラウザで実線で表示されます。
  固体	実線を定義します。
  ダブル	ワイヤーの定義。ボーダー幅の値の2倍に等しい幅。
  溝	3D溝が境界を定義しました。効果はボーダー色の値に依存します。
  リッジ	3D畝状の境界線を定義します。効果はボーダー色の値に依存します。
  インセット	解像度3Dインセットの境界線。効果はボーダー色の値に依存します。
  最初	定义 3D outset 边框。其效果取决于 border-color 的值。
  inherit	规定应该从父元素继承边框样式。

如果定义无边框，就需要设置样式为：none或者outset

• 定义单边边框样式：
  • border-top-style：上
  • border-right-style：右
  • border-bottem-style：下
  • border-left-style：左

边框宽度：

• border-width属性：定义边框的宽度
  • 指定长度之：px / em
  • 关键字：thin、medium（默认）、thick
• 定义单边宽度（方法雷同）

边框颜色：

• border-color属性：定义边框的颜色
• 定义单边颜色（方法雷同）

总结：

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

外边距：

• margin属性：设置外边距

值复制：

p {margin: 0.5em 1em 0.5em 1em;}
等价于：
p {margin: 0.5em 1em;}

如果缺少左外边距，则使用右外边距的值；以此类推

单边外边距：

• margin-top:
• margin-right:
• margin-bottom:
• margin-left:

外边距合并：

• 当两个垂直外边距相遇是，形成一个外边距

• 合并后的外边距的高度等于两个发生合并的外边的最大者

当一个元素包含另一个元素中时，它们的上/下外边距会发生合并：

CSS 定位：

• CSS定位，属于允许对元素进行定位

定位：

定位和浮动：

CSS为定位和浮动提供了一些属性，利用属性可以建立列式布局，将布局的一部分重叠。

一切皆为框

div , h1 , p等元素都属于块级元素。

• display属性：

定位机制：

CSS基本定位机制：普通流，浮动和绝对定位

除非专门单独定义，否则所有框都是默认在普通流中定位

块级框从上到下一个接一个排列，框之间的垂直距离是由框的垂直外边距计算出来的。

行内框在一行内的水平布置，使用水平内边距、边框、外边距来调整之间的间距，但是，垂直内边距、边框和外边距不影响行内框的高度，由一行形成的水平框：行框（Line Box），行框的高度总是容纳包含的所有行内框，但是可以通过设置行高（框的高度）

position属性：

• position属性：可以选择4种不同类型的定位
  • static：正常生成框体，块级元素框会是一个矩形框，作为文本流的一部分，行内元素会创建一个或多个行框
  • relative：元素框偏移某个距离，元素保存其定位前的形状
  • absolute：元素框从文档流完全删除，相对于其包含块定位
  • fixed：元素框表现类似将position设置为absolute，不过其包含块是视窗本身
• CSS 定位属性允许你对元素进行定位。

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

相对定位：relative

相对定位：对一个元素进行相对定位，通过设置垂直或水平位置，让元素相对于起点进行移动

#box {
    position: relative;
    left: 30px;
    top: 20px;
}

如上；将top设置为20px表示框从上往下（距离上）偏移20px，将left设置为30px表示框从左往右（距离左）便宜30px。

绝对定位：absolute

绝对定位：通过设置垂直或水平位置，让元素绝对定位（以视窗左上角做起点）

#box {
    position: absolute;
    left: 30px;
    top: 20px;
}

浮动定位：float

浮动的框可以向左/向右移动，知道外边接触到另一个框的边框停止

由于浮动框不在文档的普通流中，所以文档的普通流中的块表现的向浮动窗不存在一样。

浮动：

框1向右浮动，直到框1接触到它所在框的边缘时候才停止。

框1从右侧向左侧浮动，由于不占用文档空间，所以框1会覆盖框2

如果所有框都向左移动，那么框1接触到元素框的边框停止，另外两个框接触到前一个框的边框，停止浮动。

如果元素框大小无法接受三个浮动框的大小，就会向下移动……

float属性：

• float属性实现元素的浮动

行框和清理：

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框

因此，创建浮动框可以使文本围绕图像：

clear属性：

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	左右はフロートすることはできません。
無し	デフォルト値。浮動要素を許可すると、両側に表示されます。
受け継ぎます	クリア規定は親要素からプロパティ値を継承する必要があります。