1811 css+布局

主体部分: 一般都是三部分组成

header footer main三者，一般只有前两者需要加高度和设置padding:0 10px，因为内部元素更少，利于计算；

header 作为头部，包括搜索框和logo以及导航

footer 地址邮编版权二维码这些信息

main 作为主容器，高度宽度都不用定义

• main-box 用来放大块元素，width设为设计图的宽度，margin:auto;

• 大块元素不需要设置左右padding，有需要设置margin来控制块与块的距离，里面的小块元素才需要加左右padding （padding: 0 npx;），这时候要注意一下 box-sizing 属性的

• 大块元素一般需要浮动起来，譬如开始的两个大块元素可以分别左右浮动，如果第三个大块元素不需要浮动，那就可以在第三个的前面加一个空的div（加上clearfix类名来清除浮动），这个原理可以在小块元素放置的时候借鉴；

小技巧

• 注意一下项目的结构：

——project
  ——imgs
    ——css
      ——fonts
      ——base.css
      ——style.css
      ——media.css
    ——js
    ——logo.png
    ......
  ——index.html
  ——list.html
  ——content.html
  ......

• 做响应式适配的时候，要注意给盒子和body留下一点间距，不然就会很难看（一般使用 padding 来控制）(这个就是考验对于盒模型的理解了，记住css3中 box-sizing 属性的使用方法)；

• 小尺寸屏幕下，有些元素需要暂时隐藏或者变小，这时候就要提供按钮来控制它们的展示，这些按钮在大屏幕下可以暂时 display:none；

• 标签优先级问题？

上面这些选择器都是指向h1的，但是谁的优先级高谁的低呢？用上面的算法可以得出结论：
div.box01 h1.title(1+10+1+10=22)
div.box01 .title(1+10+10=21)
.box01 h1.title(10+1+10=21)
.box01 .title (10+10=20)
div.box01 h1(1+10+1=12)
.box01 h1 (10+1=11)
div h1(1+1=2)

• ul和li的处理

1.li 一般都需要左浮动，所以要记得给ul加 clearfix 类名；

2.li 的line-height 属性，不单单可以设置为px rem em 还可以直接设置为倍数  

• 给div 加背景图，另外起一个类名来控制？（这样不知道好在哪里）

• 为什么要使用clearfix类名？

.clearfix:after{ visibility:hidden; display:block; font-size:0; content: " "; clear:both; height:0;}

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

• 小块元素加了padding之后，一定要注意里面更小的元素的宽度，不然就容易溢出

• ·学校召开2018-2019年度第一学期公共卫生检查活动会议 【2018-11-12】

<li>
 <span>【2018-11-12】</span>
 <a>学校召开2018-2019年度第一学期公共卫生检查活动会议</a>
</li>

<style>
 li{
   text-indent: 10px;
   background: url(../dot.png) left center no-repeat;
   height: 31px;
   line-height: 31px;
   overflow: hidden;        / *超出隐藏*/
   text-overflow: ellipsis;  / *超出长度就用省略号来代替超出的部分*/
   white-space: nowrap;     / *不允许换行*/
 }
 li span{
   float: right;  / *这个小技巧很有用*/
   margin:
 }    
</style>

• 横排图片块处理：

 1.一般而言，还是要用ul li 的结构来处理，ul 的高度可以不定死，但是可以加一个 min-height 属性来限制ul 被压缩，ul 还一定要有包裹元素，因为ul的宽度一般设置为100%以上，因为控制 li 更加方便(float:left; margin-right: npx;）

 2.li 不需要定死高度，只需要定width 就可以了，li 里面的内容可以撑起来，一般里面图片的描述文字使用p span h4之类的标签来包裹，可以直接使用 line-height 来控制

• :after和:before 伪类的使用

• 类名的命名：不要使用下划线和大写字母！！

• id 不要随意使用！！！除非真的是有必要！！！

• 盒子内的子元素如果加了浮动，脱离了文档流，那么就要给这个盒子清除浮动（如果引入了base.css,直接加类名 clearfix 就行了），否则子元素撑不起盒子的高度；

• 一般而言，链接要成一整块，譬如 li 标签做一个盒子，里面文字或者图片是链接，这时候就要考虑用 a 来直接包住整个 li ；

• 元素的边边一定要对齐，其一是美观，其二是更加容易控制位置；

• 颜色和字体样式要注意，第一个首页就是因为 ps 不熟练，导致字体和颜色出了很多的错误；

• 一行一行的元素，比如 p、span、ul中的li等等，这些标签的高度要用行高 line-height 来控制；

• 如果需要适配移动端，那么图片的使用就要注意了，避免使用backgroud:url()，要直接使用 img 标签来引入图片，并且要记得给在css样式表中写上 img{max-wdith:100%;},同时还要注意尽量不要给包裹img 标签的元素定死高度，否则做适配的时候就会很容易出现拉伸，这样图片就会失真啦；

• 尽量少使用margin-bottom，要善于利用padding 属性；