ホームページ > 記事 > ウェブフロントエンド > ボックスmodel_html/css_WEB-ITnose
ボックスmodel_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:491147ブラウズ
フロントエンドについて少し学ぶ必要がありますので、簡単にまとめてみましょう。
ウェブページ上のあらゆる要素、ボタン、テキスト、画像など、ブラウザはそれらを「ボックス」として扱い、そのようなボックスをボックスモデルと呼びます。モデルである以上、従うべき瞬間があるはずです。それが異なる場合、それはモデルとは言えません。
Chromeの右クリックボタン（もちろんFireFoxでもOK）→Inspect Elementsを使って、あるWebページ上の要素を見ると、このような画像が得られますが、これがボックスモデルの典型です。
ボックスモデルを構成する主な要素は、外側のマージン、中央のボーダー、内側のマージンのパディング（個人的には内側のパディングと呼びたい）です（さらに内側には周囲の要素の幅と高さがあります）実在物） ）。パディング ブロックでは、ソリッド要素の幅と高さを含め、背景が水平方向に伸びる場所になります。通常、追加する背景画像と背景色がパディング内の領域を埋めるため、パディングが大きくなり、背景が大きくなります。もちろん、背景の位置やタイリング方法などのパラメータを正確に制御できないことが前提となります。
CSS ボックスには余白が含まれていますが、人々の写真に対する考え方によれば、少なくとも境界線の内側を見てボックスにする方が生活の中で常識的だと思います。もちろん、CSS ボックスを実際のボックスに変換したいのですが、このボックスの境界線の幅と高さは、ボックス内に配置されたオブジェクトの幅と高さをいつでも変更できます。実際のオブジェクトの幅と高さと正確に一致するかどうかについては、実際のオブジェクトより小さい場合、パディングはボックスの境界線からオブジェクトを重ねた範囲までの距離を規定します。ボックス（上図の幅×高さ、青い部分） 内容がぼやけないようにパディング値を設定し、境界線から少し離れて表示されるので、境界線とパディングを行います。負の値を指定すると、ブラウザはその値を 0 に返します。 Margin は、他のラベルとこのラベルの間の距離、つまり他のボックスとこのボックスの間の余白を指定します。まるで主権を宣言するかのように、「半径 xx の場所は私の領土です、来るな!」と宣言します。もちろん、マージンがマイナスになる可能性があるため、これが当てはまらない場合もあります。
写真からもわかるように、CSSボックスモデルは箱状なので、ボックスを修正するマージンや境界線などは4つの方向があります。たとえば、マージン スタイルは通常次のように追加されます:
margin: 5px; margin: 5px 10px; margin: 5px 10px 15px 20px;
1 つ目は上下左右 5 ピクセル、2 つ目は上下 5 ピクセル、左右 10 ピクセル、3 つ目は最も具体的には、（マージン - 上のマージンを設定するには）、右（マージン - 右）、下（マージン - 下）、左（マージン - 左）の順に、上を前にして時計回りに回します。 2 番目は上下 5 ピクセルか左右 5 ピクセルか覚えておいてください。とにかく右回りに回すと上が先に始まるので、2 番目の書き方は当然上下の余白を指します。もちろん、特定の方向ごとに個別に設定することもできます。
auto に設定すると、ブラウザが自動的に値を与えます。たとえば、特定の段落を中央に配置したい場合は、これを行うことができます（頑固な場合は考慮しないでください - IE6 以降は触れたくないです）。この悪魔）
.txt{ width:760px; margin:0 auto; } 上下のマージンは 0、左右 マージンはブラウザに自動で計算させるためのもので、ブラウザは 760 ピクセル幅の要素をその上に配置します。現在の親要素の幅を本体であると仮定し、その左右の余白の差が常に 0 になるように計算します。そのため、クラス名 txt の要素は Web ページの中央に配置されます。
まずボックスについて話しましょう。ブラウザはすべての要素をボックスとして扱いますが、すべてのボックスが同じというわけではありません。インライン ボックスとブロック ボックスです。これらは、インライン タグとブロック レベル タグの 2 種類のタグに対応します。 div、h1、p、table などのブロックレベルのタグの前後にはスペースがあり、処理されない場合は常に別の行を占めます。インラインタグの前後にスペースはありません。処理されない場合は、strong、em、a、input などのコンテンツをタグの後ろにあるだけ接続します。
ほとんどの場合、ブラウザは 2 つのボックスを同じ方法で処理し、左右のマージン、左右の境界線、左右のパディングを追加して、特定の距離だけ他の要素から分離することができます。上は 10 ピクセルで、上のオブジェクトから実際には 10 ピクセル離れています。ただし、次のコードを試すことができます。
rrree
テキストの途中でいくつかの単語を選択し、強力なタグでそれらを変更し、クラス txt を指定します。テキスト全体が中央に配置され、単語が囲まれます。 by Strong はスタイルで指定されています。マージン、パディング、ボーダー、これら 2 つの単語の上下左右の間に一定のスペースはありますか?効果
可以看出fire increased的左右确实增加了margin和padding，因为红色边框左右都有一些空白，margin和padding是以border为边界，上下的border边框则直接与上下的文本重合了，padding给了却没有产生间距，这就是因为span是行内标签（inline），对待行内标签，上下边距给了也是白给，不会产生效果，这是行内标签的特性（我还曾傻傻的使劲增大margin=_=），当然这个地方可以用line-height来增大行间距。
而块级标签就不同，浏览器把它当成一个整体，一个块，所以它的前后有换行，它的margin、padding无论哪个方向都起作用，都会产生距离。天生就是行内标签怎么办，难道注定一生上下受欺压？当然不是，css有个属性display，展示方式，比如当它为none时可以将元素整体隐藏起来，它还有另外的值，如block、inline、inline-block...如果给上边的txt类添加display:block;属性值，它会单独占一行，也许给它加个背景更醒目，效果
还有一种inline-block，字面意思是行内块，不妨将上面的txt类选择器中的display值改为inline-block看看
改为inline-block属性值后，它的前后没有换行，但是在这一行内它的margin、padding都产生了效果，所以它是介于inline和block之间的一种，既能维持在一行之内，前后不换行，还能在这一行内被当做是一个块，看上去就像是这一行跟其他的行的行间距相比变大了，因为他的间距，行内其他的单词也跟上下隔开了。
这就是三种主要的display状态，对于平常简单的应用够了，当然它还有其他值，都去看不整死个人-_-
元素背景，很有意思，上面说过，background是跟着padding的大小走的，如果你没有精确控制背景的位置，比如简单设置一个background-color
<html> <head> <title>background</title> <style type="text/css"> * { margin:0; padding:0; border:0; } #d1 { width:100px; height:100px; padding: 10px; background-color:red; } </style> </head> <body> <div id="d1"></div> </body></html>
用Chrome的审查元素查看（或者Firefox的查看元素），padding为10px，双击它逐渐增大或减小，就可以看到，background-color是跟着padding走的，padding变大颜色块跟着变大，padding值不能为负，强制给padding一个负数的话，是不合法的，border也是如此。
background的简写是类似这样的
background:url(images/bg.png) no-repeat 1px 1px #deddd6;
挂一个背景图片，图片路径在url参数的括号里，不重复显示，位置在距左内边距（padding）1像素，距上内边距1像素，如果这个图片不存在，则使用最后一个十六进制颜色填充。这里对背景图片做了精确控制，距上边1px，左边1px，这个值可以是百分比，如0%距顶部0像素，50%则是把图片的中间放在元素上，奇妙的是这里的距离值可以给负数，所以可以使得背景图片只在元素中显示一部分，甚至将图片移出元素，可以试试。这点很重要，比如在有的网站的导航时，进入网站是一个图标，鼠标滑过（hover）时换成另一个图标，就可以这样弄
<html> <head> <title>background</title> <style type="text/css"> * { margin:0; padding:0; border:0; } .link{ width:32px; height:34px; display:block; padding-left: 28px; text-decoration: none; background:url(./CSS2e_MM/09/nav_bar/images/nav.png) no-repeat 0% 0%;/*中间时以背景图中心点为准*/ } a.link:hover{ background:url(./CSS2e_MM/09/nav_bar/images/nav.png) no-repeat 0% 50%; } </style> </head> <body> <a class="link" href="#">link</a> </body></html> 进入页面是这样，鼠标滑过时是这样，真正的背景图（nav.png）其实是这样。
核心就在于，鼠标滑过链接时（a.link:hover选择器），比如这里，将背景图的位置，距离顶部设置成50%，即将图片的中间，css会保证背景图片的中心点位于元素的中间（这里背景图片的高度是大于当前a标签的高度的），因此只是可视位置移了一下而已，就可达到一个动态效果，图片整体还是一张，这就是因为背景图片的可视范围是padding所指定的区域，出了这个范围我们就看不到了，其实很多网站都用到了。背景处在它所在的标签下方，会遭到元素内容的覆盖。
元素的宽高，不设置时，默认为自适应元素的所占的实际宽高值，比如直接p标签贴上一段文本，但是网页上经常分块放置，每一块都是宽高是计算好的，特别是有时真实图片可能太大，用img标签装载一张图，设置一个小的width和height，网页上显示的就是一张缩小后的图片，当然也能放大。所以我们看到的图片大小可能不是真实的图片尺寸。关于宽高的一个常见的现象，就是溢出，比如
<!DOCTYPE html><html> <head> <title>inline test</title> <style type="text/css"> .segment{ width:200px; height:100px; margin:0 auto; padding:5px; border:2px solid #509ddd; } </style> </head> <body> <p class="segment"> The human species' use of technology began with the conversion of natural resources into simple tools. The prehistorical discovery of the ability to control fire increased the available sources of food and the invention of the wheel helped humans in travelling in and controlling their environment. Recent technological developments, including the printing press, the telephone, and the Internet, have lessened physical barriers to communication and allowed humans to interact freely on a global scale. </p> </body></html> 效果：
对于这种溢出，因为宽高可能设置太小，可以使用overflow属性，它有几个常用值：hidden（隐藏）、scroll（滚动条）、auto（自动，超过宽高范围自动出现滚动条），比如scroll
也可以设置hidden，将超过范围的内容隐藏掉，这就完全看情况了。
对于边框，它是分隔margin和padding的一道墙，也可以说背景是以它为界的。border的设置跟其他的类似。border属性值的设置有个特点就是，如果没有设置边框线的风格，边框线便不会出现，风格没有默认值，所以可以是border:1px solid;，黑色为默认边框颜色，但不能是border:1px #f00;，border:1px;就更不行了。当然你也可以单独设置样式border-style、宽度border-width、颜色border-corlor，更具体的是针对某一边的设置，如border-top-style，设置顶边框的样式等等。
对于margin，也是个有意思的东西，有意思的地方在于，它可以是负值。一般的，我们会设置一个正的margin值来进行“主权宣誓”，让别的元素离它远点，比如下边
<!DOCTYPE html><html> <head> <title>margin test</title> <style type="text/css"> .spanA{ margin:5px; padding:5px; background-color:#accedd; } .spanB{ margin:5px; padding:5px; background-color:#66cdaa; } </style> </head> <body> <span class="spanA">Hello</span> <span class="spanB">World</span> </body></html> 效果：
如果让World所在的区域的margin为负值会怎样？修改spanB选择器里边的margin值
.spanB{ margin:-35px; padding:5px; background-color:#66cdaa; } 效果：
第二个单词与第一个重叠，甚至覆盖了它，所以对于第二个元素来说，形象点就是，“即便你骄傲的拒绝，我也要穿越人海找到你”（电视剧中经常发生），第一个元素是本能的拒绝的，因为它的margin为正，已经告知别的元素请离我5像素的距离，但第二个元素的margin为负，压根不听。如果再变化一下，比如像两个选择器的属性值调整成下面的
.spanA{ margin:5px; margin-left:40px; background-color:#accedd; } .spanB{ margin:-95px; background-color:#66cdaa; } 效果：
第一个和第二个元素的位置完全对调过来了，但是原来html代码没有变，实际上World是在Hello的前面。所以很有可能我们看到的一些网站，比如左边一个侧边栏，中间一块主要内容，右边可能还有一个侧边栏，看起来展示是这样的顺序，实际摆放的html源码却不是这样，可能主要内容那一块是在最前面。这么做当然有优化的考虑，有的网页内容太多，搜索引擎一次收录的内容是有限的，可能到网页中某个部分就停止了，搜索引擎读取的就是html源码，除了一般的meta标签设置keywords、description提高网站识别度，主要内容也可能更能体现出这个网站的内容相关性，所以将主要内容这一块源码放在靠前的位置更能起到优化（seo）的作用，这是非常有意义的，当然了，也挺折腾=_=
既然margin为负，可以将元素提到其他元素前面，那继续给它大一点的负值呢，元素很可能就偏离出视区了，给隐藏掉了，就像背景图片的精确定位一样，也可以隐藏。比如给spanB的margin给一个-200px，就会发现World不见了，它就是偏到浏览器“外边”去了，让它暂时“消失不见”，但是它仍在代码中，这点就很有意思，比如下边这个
现在有三个按钮：综合、公告、活动，每个栏目下边新闻条目几乎沾满这个宽度，是固定的，点击公告时，当前新闻列表往左一拉，公告列表从右往左出现在视区中，原来的综合列表新闻向左一拉消失不见了，css中有个left属性，表示元素距离父元素左边距的值，也可以给负值，负值也会让本元素偏离视区，想象一下，原本综合、公告、活动三项对应下面的新闻列表已经存在于网页之上，只是我们看不到而已，现在点击下公告（js更改left属性），就将left的值设为这一个块的宽度值，只不过是负数，那么原来的综合列表向左一拉就“消失”了，出现在眼前的是公告下的列表，但实际上，它们早已存在，这就是一个负值有趣的应用了，跟margin给负值很像吧，感觉被戏弄了-_-#