页面布局

页面布局

一.总结

1.盒子模型

 

2.块级元素:默认情况下自动占一行不管多少文字

          Eg:  div p  ul   li ol   dl  dt  dd

    行内元素(内联元素):在同一行内多少字占多少空间

          Eg:  span strong  em  i b  a

    行内块级 : display :inline-block ;

    块级 : display : block ;

3.标准流(块级元素)→浮动流(行块) : 块级元素同时加float(使用float可以清空同一行图片与图片之间的空隙)

4.块级元素居中 : margin : 0 auto;

    行内元素居中(设置父元素) :  text-align : center;

5.页面宽度max=1210px

6. Css站点

       Comment.css 公用样式: * margin  padding  float  fontsize等

       Index.css

7  清除超链接的下划线 : a { text-decoration :none }

    清除浮动 : clear : both/left/right ;

    清除列表前的点 : list-style : none;

8.font : 12px ; Arial , “宋体” = font-size : 12px ; font-family : Arial , “宋体”

9.  ! important  可以改变优先级

10. html注释 : <!—注释内容-->

       Css注释:/*注释内容*/

       webstorm注释快捷键:  ctrl + shift +/

11.border-radius :10 px  边框设置为圆角 (50%时为圆)

12.<a></a> 内元素属性需要单独定义 不继承父元素属性 如:字体大小

13.插入图片格式:

      . png

      . jpg  图片压缩损失小,色彩丰富可选此格式

      . gif   图片压缩损失大

14  cursor : pointer; 鼠标悬浮变手状

      Outline: none; 文本框获取焦点时去蓝色边框

15. © : &copy;

16.定位:

     Position :relative ;  相对位置 (属性定位,以他的原来位置相对发生偏移,占空间)

     Position :absolute ;  绝对位置(属性定位, 以他的父元素发生偏移,与文档流无关, 不占据空间)

     Position :fixed ; 固定定位 (属性定位,相对于浏览器窗口定位)

     Position :static ; 默认位置

   注: ①③使用absolute要定义父元素为relative,定义绝对定位的水平垂直位置即可( left right top bottom)与0px比较,向左,向上移动为负像素

         ②绝对定位与浮动不可同时使用,否则浮动不起作用

         ③一个子元素对应一个父元素否则子元素重叠

         ④使用雪碧图,抠图时距离目标图左边和上边的距离用负像素表示

17. Z-index : -1; 上下层叠位置,将该图层放在最后 (无单位)

18. 行高子元素继承父元素

19. ctrl+D 快捷复制粘贴

20  .nav  ul   空格间隔是后代关系

      .nav>ul  尖括号间隔是父子关系

21.vertical-align : top/bottom/middle  垂直对齐方式

22.标题的下拉菜单默认时隐藏方式 :

         Display  : none   不占位置

         Visibility :hidden 占位置 隐藏内容

 

二.例子