7.cssボックスmodel_html/css_WEB-ITnose

いわゆるボックスモデルは、実際には要素をボックスとして扱い、要素内のテキストがボックスのコンテンツです。

要素の特殊効果に応じて、ボックスモデルの特殊効果も異なります。

1. ブロックレベルの要素（ブロック）

いわゆるブロックレベルの要素です。要素のサイズを設定でき、他の要素を分離する機能を持つもの (

、

など)

2. いわゆるインライン要素は要素のサイズを設定できません。コンテンツに適応することしかできず、他の要素を分離することはできません。たとえば、、、その他のテキスト要素。

3. インラインブロック要素 (インラインブロック)

いわゆるインラインブロック要素は要素のサイズを設定できますが、他の要素を分離することはできません。たとえば、。

4. 隠し要素

隠し属性が設定された要素。

これらの分離を理解した後、対応する属性を学習できます。実際、これらの属性はボックス上の操作と見なすことができます。

1.要素のサイズ

要素のサイズの設定は、端的に言えばボックスのサイズの設定です。上記の分類の説明によれば、次の属性が使用できます。

Attributewidthheightmin -widthmin-heightmax-widthmax-height

値	説明	CSSバージョン
auto、length値またはパーセンテージ	要素の幅を設定	1
auto、length値またはパーセンテージ	を設定します要素の高さ	1
auto、長さの値またはパーセンテージ	要素の最小幅を設定	2
auto、length 値またはパーセンテージ	要素の最小の高さを設定します	2
auto、長さの値またはパーセント	要素の最大幅を設定します	2
auto、length value またはパーセント	要素の最大の高さを設定します	2

div {    width: 200px;    height: 200px;} 

説明: 要素の固定サイズを設定します。

div {    min-width: 100px;    min-height: 100px;    max-width: 300px;    max-height: 300px;} 

説明: このグループは主に、要素のサイズが動的に増加または減少し、それによって最大値と最小値が制限される可能性があるという問題を扱います。

div {     width: auto;     height: auto; } 

説明: auto はデフォルト値 ()、auto では幅が 100% の値、auto では高さが適応されます。

<div id="a">    <div id="b">scolia</div></div> 

#a {    background: silver;     width: 200px;     height: 200px; } #b {     background: gray;     width: 80%;     height: 80%; }

説明: パーセントは、親要素の長さを基準にして測定されます。

注: 要素のサイズが、よく知られた長さと幅ではなく、幅と高さで表されるのはなぜですか? Web ページは画面上に表示され、最初はモバイル デバイスがなかったときはすべてモニターだったからです。デスクトップに置くと、平らな面に立っているように見えます。そこで高さと幅で表すようになりました。

2.要素のパディング

CSS ボックス モデルでは、要素の内側の端にパディングと呼ばれるパディングのサイズを設定できます。

属性padding-toppadding-bottompadding-leftpadding-rightパディング

 

　　可以分开设置：　

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

 

　　也是可以用简写形式：

div {     padding: 10px 10px 10px 10px; }

 

　　四个值的时候代表按顺序设置上、右、下、左，也就是按逆时针方向。

 

div {     padding: 10px 50px 200px; }

 

　　三个值代表按顺序设置上、左右、下，即左右合并。

 

div {     padding: 10px 20px; }

 

　　两个值代表按顺序设置上下、左右。

 

div {     padding: 10px; }

 

　　一个值，代表上下左右都设置为这个值。

　　注意：内边距的设置其实就是向盒子里面填充东西，会使盒子变大。如果同时设置了背景颜色，内边距越大，背景颜色的面积越大。

　　　　　另外内边距比较特别的是，对于内联元素也有作用，但是一般也用不到这个特性，了解一下就好。

三．元素外边距

　　CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们称为外边距。其实也就是盒子搬开，增加其间隔。和内边距不同，外边距不会改变盒子的大小。

　　有下面属性可供选择：

値	説明	CSSバージョン
長さの値またはパーセンテージ	上部パディングの設定	1
長さの値またはパーセンテージ	下のパディングを設定します	1
長さの値またはパーセンテージ	左のパディングを設定します	1
長さの値またはパーセンテージ	右パディング設定	1
1 ~ 4 の長さの値またはパーセンテージ	短縮属性	1

属性	值	说明	CSS 版本
margin-top	长度值或百分比	设置顶部内边距	1
margin-bottom	长度值或百分比	设置底部内边距	1
margin-left	长度值或百分比	设置左边内边距	1
margin-right	长度值或百分比	设置右边内边距	1
margin	1 ~ 4 长度值或百分比	简写属性	1

　　注意：其使用特性和外边距一样，这里就不再重复说明。

 

 

四．处理溢出

　　当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。其实就是我们规定了盒子的大小以后，要装的东西太多，而盒子又装不下时，东西就会满出来。而满出来的行为是怎么样的，我们可以进行设置。

溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。

属性	值	说明	CSS 版本
overflow-x	溢出值	设置水平方向的溢出	3
overflow-y	溢出值	设置垂直方向的溢出	3
overflow	溢出值	简写属性	2

溢出处理主要有四种处理值：

值	说明
auto	浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条
hidden	如果有溢出的内容，直接剪掉
scroll	不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同
visible	默认值，不管是否溢出，都显示内容

 

div {     overflow-x: auto; }

 

　　总结：可以看出溢出处理的逻辑是，先确定从溢出的方向，再确定对溢出的部分怎么处理。

 

五.元素的可见性

　　我们在按特性对元素分类的时候，还剩下一个隐藏元素没有解释清楚，所谓的设置了隐藏属性的元素中的隐藏属性就是我们接下来要说的。

属性	值	说明	css版本
visibility	visible	默认值，元素在页面上可见	2
	hidden	元素不可见，但会占据空间	2
	collapse	元素不可见，隐藏表格的行与列，如果不是表格，则和hidden一样	2

div {     visibility: hidden; }

 

 　　解释：设置元素隐藏，但占位，也就是该元素的分组效果依然会存在。

table tr:first-child {     visibility: collapse; };

 

 　　解释：隐藏表格的行或列，但不占位，支持度一般。

六.元素类型转换

　　我们按元素的特性对其进行了分类，但其实可以使其转换，从而实现别的元素的特性。

属性	值	说明	CSS 版本
display	block	盒子为块级元素	1
	inline	盒子为行内元素	1
	inline-block	盒子为行内-块元素	2
	none	盒子不可见，不占位	1

 

span {    background: silver;     width: 200px;     height: 200px;     display: block; }

 

 　　解释：将行内元素转成块级元素，原来无效的属性也可以使用了，其他就不再演示了。

 

 七.元素的浮动

　　我们一直在二维空间中设置元素的盒模型，但其实可以将元素向上浮动一层，注意是一层。

属性	值	说明	CSS 版本
float	left	浮动元素靠左	1
	right	浮动元素靠右	1
	none	禁用浮动	1

　　那么，上浮一层是什么意思？

　　这就需要一定的空间思维能力的，如果我们将同一层的元素都当成是一张张的小卡片，一般情况下，他们都放在地面上，都在同一层，按着一定的顺序排列。这时，上浮一层，就相当于与你将卡片拿起来，然后在用一块玻璃将地方的卡片压住，在将拿去来的卡片放在玻璃上。但浮动还不仅仅做了这个动作，当你把一种卡片拿走以后，卡片原来占有的位置就会被剩下的卡片挤掉。如果此时你将卡片放在玻璃上的话，必然会遮挡住下面那层的卡片，为了解决遮挡的问题，又有下面的属性可用。

属性	值	说明	CSS 版本
clear	none	允许两边均可浮动	1
	left	左边界不得浮动	1
	right	右边界不得浮动	1
	both	两边都不得浮动	1

 

#c {     clear: both; }

 

 　　解释：方法其实是一种非常强硬的方法，既然浮动会造成遮挡的话，那就不允许浮动就好了。

　　　　　 但是还有一种比较取巧的方法，那就对被遮挡的元素进行外边距的设置，既然惹不起，那总躲得起吧。

 

 

 总结：

　　下面总有了盒模型内容有哪些：

　　1.设置元素尺寸

　　2.内边距

　　3.外边距

　　4.尺寸固定后的溢出处理

　　6.隐藏元素

　　7.类型转换

　　8.元素浮动