Css.Mastery.Advanced.Web.Standards.Solutions.2nd.Edition 笔记

#intro {font-weight: bold;}  id 选择器
 .date-posted {color: #ccc;}  class 选择器
#main-content h2 {font-size: 1.8em;}  main-content 和 h2之间可以不是直接的父子关系
a:link {color:blue;}   a:visited {color:green;}   a:hover, a:focus, a:active {color:red;}  tr:hover {background-color: red;}  input:focus {background-color:yellow;}
a:visited:hover {color:olive;}
*{ padding: 0; margin: 0;}    all
#nav>li { background: url(folder.png) no-repeat left top; padding-left: 20px;}   书上说只影响直接子元素  实测不是(FF3.6 safari5.0.4)
h2 + p { font-size: 1.4em; font-weight: bold; color: #770;}   h2后面紧跟着的第一个p 被影响到了  之间不能有其他元素
a[rel="nofollow"] {padding-right: 20px;color:red;}            a[rel] {font-size: 20px;}     属性选择器   有这个属性  或 属性等于某个值  
div#main-content div.news-story h2.first {color: red;}
p, div, h1, h2, h3, ul, ol, dl, li {color: black;}     ,表示一个定义元素


<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 <!--
@import url("/css/advanced.css");
-->
</style>
Breaking your CSS into multiple style sheets used to be a common approach and was the method I recommended in the first edition of this book. However, recent browser benchmarking has shown that importing style sheets can be slower than linking to them.
意思是说import会慢一些
There are two other speed related problems when using multiple CSS files. First off, multiple files will result in more packets being sent from the server, and it’s the number, rather than the contents, of these packets that affects download time. Furthermore, browsers are only able to download a limited number of concurrent files from the same domain at any one time. For older browsers, this limit used to be a paltry two files, although modern browsers have upped this to eight. So in an older browser, if you have three style sheets, you would have to wait for the first two files to download before it starts downloading the third. Because of these reasons, a single, well-structured CSS file can help improve download speeds considerably.
css分不到多个文件 会导致浏览器下载文件的速度  因为浏览器在一个domain并发下载文件的数量是一定的 一般是2个



box model

从外到内  margin    border  padding  content
#myBox { margin: 10px; padding: 5px; width: 70px;}  width 的长度指的是content的  盒子的长度是width+padding*2+margin*2 = 100  ie5是90

2个元素相接时   相交处的margin取最大值
一个元素包含另一个元素时    相交处的margin取最大值     magrin 如其名一样 就是用来融合空间的


vertical padding, borders, and margins will have no effect on the height of an inline box. Similarly, setting an explicit height or width on an inline box will have no effect either. The horizontal box formed by a line is called a line box, and a line box will always be tall enough for all the line boxes it contains. There is another caveat, though—setting the line height can increase the height of this box. Because of these reasons, the only way you can alter the dimensions of an inline box is by changing the line height or horizontal borders, padding, or margins.
inline box 的padding, borders, and margins 是不起效果的  ，  line biox 的高度取决与他包含的所有元素  唯一能影响inline box行高的就是  line-height

#myBox { position: relative; left: 20px; top: 20px;}
With relative positioning, the element continues to occupy the original space, whether or not it is offset. As such, offsetting the element can cause it to overlap other boxes.
relative元素继续占着他原来地方的空间  但显示在其他的地方

An absolutely positioned element is positioned in relation to its nearest positioned ancestor. If the element has no positioned ancestors, it will be positioned in relation to the initial containing block. Depending on the user agent, this will either be the canvas or the HTML element.
As with relatively positioned boxes, an absolutely positioned box can be offset from the top, bottom, left, or right of its containing block. This gives you a great deal of flexibility. You can literally position an element anywhere on the page.
absolutely positioned 元素的位置起点是他最近的positioned!的祖先的位置的起点 但这个祖先要是positioned!!  如果没有 就是html页面的起点作为他的起点
absolute 元素是超脱了文件流的

The main problem people have with positioning is remembering which type of
positioning is which. Relative positioning is “relative” to the element’s initial
position in the flow of the document, whereas absolute positioning is “relative”
to nearest positioned ancestor or, if one doesn’t exist, the initial container block.
relative 的起点是他自身在box流里面的起点，  absolute的起点是他最近的positioned的祖先节点的起点

        <div style="position:relative;">
            <div>first born</div>
            <div style="position:relative;top:50px;">second</div>
            <div style="position:absolute;top:50px;">third</div>
        </div>
试着去掉上面第一个div的position然后对比看下third的位置就明白  “absolute的起点是他最近的positioned的祖先节点的起点”的意思了,   在第一个div之前要有其他的box才看得出区别， 换句话 第一个div的起点!=html的起点

The higher the z-index, the higher up the box appears in the stack.

Absolutely positioning a box in relation to a relatively positioned ancestor works
well in most modern browsers. However, there is a bug in IE 5.5 and IE 6 on
Windows. If you try to set the position of the absolutely positioned box relative
to the right or bottom of the relatively positioned box, you need to make sure
the relatively positioned box has some dimensions set. If not, IE will incorrectly
position the box in relation to the canvas instead. You can read more about this
bug and possible fixes in Chapter 9. The simple solution is to set the width and
height of your relative box to avoid this problem
ie6 absolute 有bug

A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box or another floated box. Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow of the document behave as if the floated box wasn’t there.
float box在普通文件流里不占空间  他会接触到他容器的边缘  或 另一个float元素 ， 就好像有普通的文件流  在一个容器内部还可以有一个float流

If the containing block is too narrow for all of the floated elements to fit horizontally, the remaining floats will drop down until there is sufficient space (see Figure 3-15). If the floated elements have different heights, it is possible for floats to get “stuck” on other floats when they drop down.
如果float box的容器太窄了 float会从上到下依次排列到容易的边缘     但有可能被之前的卡住 而不能到容器的最边缘

虽然float元素是跳出了普通的文件流的而不占空间的， 但假如之后的元素是line box的话， 是会给float留空间的  环绕图片的文字 就是列子

clear: left  right both  相当于给元素添加margin以便不和float元素在同一行 这样看来float其实还是占了文件流空间

h1 { padding-left: 30px; background-image: url(/img/bullet.gif); background-repeat: no-repeat; background-position: left center;}  给一个文字前添加图片  padding-left 让文字所在的内容右移，给图片让出空间  图片则放在left center

a{ display: block; width: 6.6em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; background-color: #8cca12;color: #fff;}    
 Creating links that look like buttons   by using line- height instead, the text will always sit in the middle of the box

CSS sprites

a.tooltip {
position: relative;
}
a.tooltip span { display: none;
}
a.tooltip:hover span { display: block; position: absolute; top: 1em;
left: 2em;
} 
pure css tooltip


ol.pagination { margin: 0; padding: 0; list-style-type: none;
}
ol.pagination li { float: left; margin-right: 0.6em;
}
Creating a simple horizontal nav bar