CSS Mastery

按有用程度 按页码先后 最新笔记

• 

  第260页

  小白变棉花糖 (做一个有范儿的程序猿)

  Internet Explorer conditional comments <!-- [if IE] <link rel="stylesheet" type="text/css" href="/css/ie.css" /> --> <!-- [if IE 6] <link rel="stylesheet" type="text/css" href="/css/ie6.css" /> --> IE6以下的版本 <!-- [if lt IE 6] <link rel="stylesheet" type="text/css" href=&... (更多)

  Internet Explorer conditional comments

  <!-- [if IE]

  <link rel="stylesheet" type="text/css" href="/css/ie.css" />

  -->

  <!-- [if IE 6]

  <link rel="stylesheet" type="text/css" href="/css/ie6.css" />

  -->

  IE6以下的版本

  <!-- [if lt IE 6]

  <link rel="stylesheet" type="text/css" href="/css/ie5x.css" />

  -->

  非IE浏览器

  <!--[if !IE]>-->

  <link rel="stylesheet" type="text/css" href="/css/advanced.css" />

  <!--<![endif]-->

  <!--[if gte IE 6]><!-->

  <link rel="stylesheet" type="text/css" href="/css/modern.css" />

  <!--<![endif]--> (收起)

  2011-10-16 11:51:10   回应

  收藏

  推荐
• 

  第253页

  小白变棉花糖 (做一个有范儿的程序猿)

  Bug hunting basics 1 使用高级浏览器作为主力浏览器（Chrome，Firefox..），确保CSS在他们显示无异常再去IE浏览器查找兼容性问题 偶表示这点的效率问题，如果使用IE作为主力浏览器，再去高级浏览器修改兼容性Bug会不会更高效一点 2 try to avoid bugs in the first place 优先考虑非Hack的解决办法，毕竟达到一种效果有多种办法 3 Isolate the problem (更多)

  Bug hunting basics

  1 使用高级浏览器作为主力浏览器（Chrome，Firefox..），确保CSS在他们显示无异常再去IE浏览器查找兼容性问题

  偶表示这点的效率问题，如果使用IE作为主力浏览器，再去高级浏览器修改兼容性Bug会不会更高效一点

  2 try to avoid bugs in the first place 优先考虑非Hack的解决办法，毕竟达到一种效果有多种办法

  3 Isolate the problem (收起)

  2011-10-16 11:29:46   回应

  收藏

  推荐
• 

  第246页

  小白变棉花糖 (做一个有范儿的程序猿)

  Common CSS problems 1 简单的语法错误可以通过在线验证器规避 2 使用特殊的CSS语法定义需谨慎 3 Margin与padding的折叠导致期望值与实际值不符 (更多)

  Common CSS problems

  1 简单的语法错误可以通过在线验证器规避

  2 使用特殊的CSS语法定义需谨慎

  3 Margin与padding的折叠导致期望值与实际值不符 (收起)

  2011-10-16 11:17:29   回应

  收藏

  推荐

• 

  第1页

  lich0079

  #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... (更多)

  #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

  (收起)

  2011-04-14 18:32:23   回应

  收藏

  推荐
• 

  第10页

  小白变棉花糖 (做一个有范儿的程序猿)

  it makes sense to name your elements based on what they are rather than how they look 元素的命名遵循他们是什么而不是他们像什么 (更多)

  it makes sense to name your elements based on what they are rather than how they

  look

  元素的命名遵循他们是什么而不是他们像什么 (收起)

  2011-10-09 11:22:39   回应

  收藏

  推荐
• 

  第27页

  小白变棉花糖 (做一个有范儿的程序猿)

  Pseudo-classes /* makes all unvisited links blue */ a:link {color:blue;} /* makes all visited links green */ a:visited {color:green;} /* makes links red when hovered or activated. focus is added for keyboard support */ a:hover, a:focus, a:active {color:red;} /* makes table rows red when hovered over */ tr:hover {background-color: red;} /* makes input elements yellow when focus is appli... (更多)

  Pseudo-classes

  /* makes all unvisited links blue */

  a:link {color:blue;}

  /* makes all visited links green */

  a:visited {color:green;}

  /* makes links red when hovered or activated.

  focus is added for keyboard support */

  a:hover, a:focus, a:active {color:red;}

  /* makes table rows red when hovered over */

  tr:hover {background-color: red;}

  /* makes input elements yellow when focus is applied */

  input:focus {background-color:yellow;}

  Unsurprisingly, IE 6 only pays attention to the :active and :hover pseudo-classes when applied to an anchor link, and ignores :focus completely. IE7 supports :hover on arbitrary elements but ignores :active and :focus. (收起)

  2011-10-09 12:33:02   回应

  收藏

  推荐

• 

  第260页

  小白变棉花糖 (做一个有范儿的程序猿)

  Internet Explorer conditional comments <!-- [if IE] <link rel="stylesheet" type="text/css" href="/css/ie.css" /> --> <!-- [if IE 6] <link rel="stylesheet" type="text/css" href="/css/ie6.css" /> --> IE6以下的版本 <!-- [if lt IE 6] <link rel="stylesheet" type="text/css" href=&... (更多)

  Internet Explorer conditional comments

  <!-- [if IE]

  <link rel="stylesheet" type="text/css" href="/css/ie.css" />

  -->

  <!-- [if IE 6]

  <link rel="stylesheet" type="text/css" href="/css/ie6.css" />

  -->

  IE6以下的版本

  <!-- [if lt IE 6]

  <link rel="stylesheet" type="text/css" href="/css/ie5x.css" />

  -->

  非IE浏览器

  <!--[if !IE]>-->

  <link rel="stylesheet" type="text/css" href="/css/advanced.css" />

  <!--<![endif]-->

  <!--[if gte IE 6]><!-->

  <link rel="stylesheet" type="text/css" href="/css/modern.css" />

  <!--<![endif]--> (收起)

  2011-10-16 11:51:10   回应

  收藏

  推荐
• 

  第253页

  小白变棉花糖 (做一个有范儿的程序猿)

  Bug hunting basics 1 使用高级浏览器作为主力浏览器（Chrome，Firefox..），确保CSS在他们显示无异常再去IE浏览器查找兼容性问题 偶表示这点的效率问题，如果使用IE作为主力浏览器，再去高级浏览器修改兼容性Bug会不会更高效一点 2 try to avoid bugs in the first place 优先考虑非Hack的解决办法，毕竟达到一种效果有多种办法 3 Isolate the problem (更多)

  Bug hunting basics

  1 使用高级浏览器作为主力浏览器（Chrome，Firefox..），确保CSS在他们显示无异常再去IE浏览器查找兼容性问题

  偶表示这点的效率问题，如果使用IE作为主力浏览器，再去高级浏览器修改兼容性Bug会不会更高效一点

  2 try to avoid bugs in the first place 优先考虑非Hack的解决办法，毕竟达到一种效果有多种办法

  3 Isolate the problem (收起)

  2011-10-16 11:29:46   回应

  收藏

  推荐
• 

  第246页

  小白变棉花糖 (做一个有范儿的程序猿)

  Common CSS problems 1 简单的语法错误可以通过在线验证器规避 2 使用特殊的CSS语法定义需谨慎 3 Margin与padding的折叠导致期望值与实际值不符 (更多)

  Common CSS problems

  1 简单的语法错误可以通过在线验证器规避

  2 使用特殊的CSS语法定义需谨慎

  3 Margin与padding的折叠导致期望值与实际值不符 (收起)

  2011-10-16 11:17:29   回应

  收藏

  推荐