狠狠撸

狠狠撸Share a Scribd company logo

盒模型&补尘辫;颁蝉蝉基本属性

?Download as PPT, PDF?
?
Wang shimu
Wang shimu
1 of 23
Downloaded 29 times
盒模型 & CSS 基本属性
学习 HTML 和 CSS ： 多看，多练，多想。 前端同学的分享文档、 PPT 网上的教程（ nettuts ） 白皮书（ W3school ，各种 cheat-sheet ） 国内外设计优秀的网站。
网页中的 html 结构是由一个个容器组成。 容器就是块级元素。 它们之间的关系：相邻、包含。
HTML FLOW (LTR) 网页中的同级块级元素呈现顺序是自上而下。 内联元素的呈现顺序是由左网右。 认准这两点布局原理，将会减少很多 hack 。代码清爽很多。
block element & inline element Block element: div, ul, p, h1, table… 行布局，独占一行。 Inline element: a, img, span, li, br… 和块级元素相对，依附块级元素存在， 紧接着被联元素显示，不换行。
BOX MODEL Border Padding Margin background
margin, padding, border Margin, padding, border 的顺序都是上右下左。 Margin 和 padding 取值可以为像素或字号值，也可以为百分比。 Border 有三个子属性，分别是 border-color, border-width, border-style 。
border-style Border-style 取值： none 没有边框 hidden 一样没有边框（防止表格里的边框冲突） dotted 点划线 dashed 短划线 solid 下划线 double 双下划线 groove 凹进去的槽状下划线 ridge 凸出来的垄状下划线 inset 3D 效果。看起来像嵌在页面上。 outset 3D 效果。看起来像浮雕在页面上。
Background 属性 Background: background-color 背景颜色 background-image 背景图片 background-repeat 背景平铺， repeat-x, repeat-y, repeat, no-repeat background-attachment 背景图片随元素滚动， scroll, fixed background-position 背景定位， (x, y), top, center, bottom, left, right { background: #FFF url(…) scroll repeat-x top left; }
容器的 CSS 属性 width & Height 可以取百分比和固定值 Position: Static 默认值。忽略 top, z-index 等属性。元素出现在正 常的流中。 Relative 相对于元素的正常位置进行定位。 Absolute 相对于 static 定位以外的第一个父级元素进行定位。 Fixed 相对于浏览器窗口绝对定位。
relative, absolute, fixed 0,0 Position: absolute; Left:40px; Top:40px; Position: relative; Left:120px; Top:60px;
relative+absolute 布局 position: relative; position: absolute; position: absolute;
relative+absolute 应用 子级容器 absolute 父级容器 relative
字体相关的 CSS 属性 font: font-style 正常，斜体 font-variant 正常，小型大写字母 font-weight 正常，加粗，变细；取值 100-900 font-size 字号大小 font-family 字体族
文本段落相关的 CSS 属性 text: letter-spacing 字母间距 line-height 行高（技巧：用于垂直居中） text-align 文本对齐（ left, right, center ） text-decoration 文本修饰（ blink, line-through, overline, underline, none ） text-indent 首行缩进 text-transform 文本变形（ capitaliste, lowercase, uppercase ） vertical-align 垂直方向对齐（ baseline, top, middle, bottom, sub, super ） word-spacing 单词间距
float & clear float: 使块级元素浮动。顺序是从左往右。打破默认的页面流。 float 可以取值 left, right, none 。 设置 float: left; 的元素会浮动到它父级容器或者另一个浮动元素的最左边外边距或者边框（如果没有边距）。
float & clear 没有设置定位和浮动的块级元素在页面流上会忽视它前面和后面浮动的元素。 IE 中，无定位无浮动元素会让出空间给前面的浮动元素。 父容器内部的子块级元素浮动之后，父级容器不自动计算高度。
float 杂志版式 图片 float: left; 文本段落
float 布局 float: left; float: right;
float & clear clear: 清除浮动。使 clear 之后的块级元素恢复默认的页面流布局。 clear 可以取值 left, right, both 。 clear 通常用于解决因浮动而产生的布局坏掉的问题。 <div class=“clear-fix”></div> .clear-fix{ clear:both; height:0; overflow:hidden; }
float 常见 BUG 在 ie6 中有浮动 margin 翻倍的 bug 。 _display:inline; /* hack for ie6 */ 父级容器塌陷，不自动计算高度。 解决办法： 1. 给父级容器设置相应的高度。 2. 在浮动的子容器后面清除浮动。 Better!
几乎所有 BUG 都有解决办法。 更高级的是预防 BUG 。
Have a try 分别用 positon 定位和 float 来实现

More Related Content

盒模型&补尘辫;颁蝉蝉基本属性

  • 1. 盒模型 & CSS 基本属性
  • 2. 学习 HTML 和 CSS ： 多看，多练，多想。 前端同学的分享文档、 PPT 网上的教程（ nettuts ） 白皮书（ W3school ，各种 cheat-sheet ） 国内外设计优秀的网站。
  • 3. 网页中的 html 结构是由一个个容器组成。 容器就是块级元素。 它们之间的关系：相邻、包含。
  • 4. HTML FLOW (LTR) 网页中的同级块级元素呈现顺序是自上而下。 内联元素的呈现顺序是由左网右。 认准这两点布局原理，将会减少很多 hack 。代码清爽很多。
  • 5. block element & inline element Block element: div, ul, p, h1, table… 行布局，独占一行。 Inline element: a, img, span, li, br… 和块级元素相对，依附块级元素存在， 紧接着被联元素显示，不换行。
  • 6. BOX MODEL Border Padding Margin background
  • 7. margin, padding, border Margin, padding, border 的顺序都是上右下左。 Margin 和 padding 取值可以为像素或字号值，也可以为百分比。 Border 有三个子属性，分别是 border-color, border-width, border-style 。
  • 8. border-style Border-style 取值： none 没有边框 hidden 一样没有边框（防止表格里的边框冲突） dotted 点划线 dashed 短划线 solid 下划线 double 双下划线 groove 凹进去的槽状下划线 ridge 凸出来的垄状下划线 inset 3D 效果。看起来像嵌在页面上。 outset 3D 效果。看起来像浮雕在页面上。
  • 9. Background 属性 Background: background-color 背景颜色 background-image 背景图片 background-repeat 背景平铺， repeat-x, repeat-y, repeat, no-repeat background-attachment 背景图片随元素滚动， scroll, fixed background-position 背景定位， (x, y), top, center, bottom, left, right { background: #FFF url(…) scroll repeat-x top left; }
  • 10. 容器的 CSS 属性 width & Height 可以取百分比和固定值 Position: Static 默认值。忽略 top, z-index 等属性。元素出现在正 常的流中。 Relative 相对于元素的正常位置进行定位。 Absolute 相对于 static 定位以外的第一个父级元素进行定位。 Fixed 相对于浏览器窗口绝对定位。
  • 11. relative, absolute, fixed 0,0 Position: absolute; Left:40px; Top:40px; Position: relative; Left:120px; Top:60px;
  • 12. relative+absolute 布局 position: relative; position: absolute; position: absolute;
  • 13. relative+absolute 应用 子级容器 absolute 父级容器 relative
  • 14. 字体相关的 CSS 属性 font: font-style 正常，斜体 font-variant 正常，小型大写字母 font-weight 正常，加粗，变细；取值 100-900 font-size 字号大小 font-family 字体族
  • 15. 文本段落相关的 CSS 属性 text: letter-spacing 字母间距 line-height 行高（技巧：用于垂直居中） text-align 文本对齐（ left, right, center ） text-decoration 文本修饰（ blink, line-through, overline, underline, none ） text-indent 首行缩进 text-transform 文本变形（ capitaliste, lowercase, uppercase ） vertical-align 垂直方向对齐（ baseline, top, middle, bottom, sub, super ） word-spacing 单词间距
  • 16. float & clear float: 使块级元素浮动。顺序是从左往右。打破默认的页面流。 float 可以取值 left, right, none 。 设置 float: left; 的元素会浮动到它父级容器或者另一个浮动元素的最左边外边距或者边框（如果没有边距）。
  • 17. float & clear 没有设置定位和浮动的块级元素在页面流上会忽视它前面和后面浮动的元素。 IE 中，无定位无浮动元素会让出空间给前面的浮动元素。 父容器内部的子块级元素浮动之后，父级容器不自动计算高度。
  • 18. float 杂志版式 图片 float: left; 文本段落
  • 19. float 布局 float: left; float: right;
  • 20. float & clear clear: 清除浮动。使 clear 之后的块级元素恢复默认的页面流布局。 clear 可以取值 left, right, both 。 clear 通常用于解决因浮动而产生的布局坏掉的问题。 <div class=“clear-fix”></div> .clear-fix{ clear:both; height:0; overflow:hidden; }
  • 21. float 常见 BUG 在 ie6 中有浮动 margin 翻倍的 bug 。 _display:inline; /* hack for ie6 */ 父级容器塌陷，不自动计算高度。 解决办法： 1. 给父级容器设置相应的高度。 2. 在浮动的子容器后面清除浮动。 Better!
  • 22. 几乎所有 BUG 都有解决办法。 更高级的是预防 BUG 。
  • 23. Have a try 分别用 positon 定位和 float 来实现

Editor's Notes

  • #9: Example margin-padding-border.html
  • #12: Example
  • #13: Example
  • #14: Example