box model_html/css_WEB-ITnose

It is necessary to learn a little bit about front-end. Let’s briefly summarize.

Every element on our web page, a button, a piece of text, an image, etc., the browser treats them as a "box" and calls such a box a box model (box model). model). Since it is a model, there must be moments to follow. If they are different, it cannot be called a model.

Use Chrome (of course FireFox will also work) right-click -> Inspect Elements to look at the elements on a certain web page, and you will get a picture like this, which is the epitome of the box model.

　　

The main elements that make up the box model are: the outer margin, the middle border, and the inner margin padding (I personally like to call it inner padding) (further inside) It is the width and height of the surrounding element entity). In the padding block, including the width and height of the solid elements, it is where the background runs horizontally. Generally, the background image and background color we add will fill an area in the padding, so the padding becomes larger and the background will expand accordingly. Of course The premise is that there is no precise control over parameters such as the position and tiling method of the background.

The CSS box includes margin, but according to the way people think about pictures, at least I think it is more common sense to make the border look like a box in life. I would rather convert the CSS box into a box in real life. Of course, this box can be resized at any time. border is the thickness of the box border. width and height specify the width and height of the object placed in the box. As for whether it is exactly equal to the width and height of the actual object. Decide by yourself. If it is smaller than the actual object, the padding stipulates the distance from the border of the box to the range of objects stacked in the box (width x height, blue area in the picture above). Set a padding value to prevent the content from being blurred. Put it in a box and keep a little distance from the border to make it look less crowded, so border and padding cannot be negative values. If you give a negative number, the browser will return it to zero. Margin specifies the distance between other labels and this label, that is, the margin between other boxes and this box, as if to declare sovereignty: The place with a radius of xx is my territory, don’t come over! Of course sometimes this is not the case because margin can be negative.

As can be seen from the picture, the CSS box model is boxy, so the margin, border, etc. that modify the box have four directions. For example, the margin style is usually added like this:

    margin: 5px;    margin: 5px 10px;    margin: 5px 10px 15px 20px;

The first is 5 pixels up, down, left and right, the second is 5 pixels up and down, 10 pixels left and right, and the third The most specific one is to set the margins in the order of top (margin-top), right (margin-right), bottom (margin-bottom), and left (margin-left). Turning clockwise, top comes first, so I can’t remember clearly. The second method is easy to decide whether it is 5 pixels up and down or 5 pixels left and right. Anyway, when turning clockwise, top starts first, so the front of the second writing method naturally refers to the top and bottom margins. Of course, it can also be set specifically for each specific direction.

If set to auto, the browser will automatically give the value. For example, you can do this when you want to center a certain paragraph (if you are stubborn, don’t consider -IE6, don’t want to touch this devil)

    .txt{　　　　　width:760px;         margin:0 auto;        }

The top and bottom margins are 0, and the left and right margins are auto, which is intended to let the browser calculate it by itself. The browser places the 760-pixel-wide element on top based on the current width of the parent element, assuming it is the body. And the calculation ensures that the difference between its left and right margins is always 0, so the element with the class name txt is centered on the web page.

Let’s talk about boxes first. The browser treats every element as a box, but not all boxes are the same. There are two main types: inline boxes and block boxes. ). They correspond to two types of tags: inline tags and block-level tags. There will be some spaces before and after block-level tags, such as div, h1, p, table, etc., and they will wrap directly before and after. If not processed, they will always occupy a separate line, while there will be no spaces before and after inline tags. If not processed, Just connect as much content as there is behind the tag, such as strong, em, a, input, etc.

In most cases, the browser handles the two boxes in the same way. You can add left and right margins, left and right borders, and left and right padding, and truly separate them from other elements by a certain distance. When the margin-top is 10 pixels, it is really 10 pixels away from the object above. But there is an exception, you can try the following code:

<!DOCTYPE html><html>    <head>        <title>inline test</title>        <style type="text/css">            .segment{                width:400px;                margin:0 auto;                padding:5px;                border:2px solid #509ddd;            }            .txt{                margin:10px;                padding:10px;                border:1px solid #e61f44;            }        </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 <strong class="txt">fire increased</strong> 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>

Select a few words in the middle of a text and modify it with the strong tag, give it a txt class, and center the entire text , the words surrounded by strong are given margin, padding, and border in the style respectively. Is there a certain spacing between the top, bottom, left, and right of these two words? Effect

　　

　　可以看出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给负值很像吧，感觉被戏弄了-_-#