CSS实际案例，布局结构

目前自己的问题：

1所有东西都想用div，比如头部几个导航，不是用几个div而是用ui,li 。搜索框不是div套两个div，而是div套input，buttom。且h，p，ul，ol等这种块级元素，都可以直接设置height,width当盒子用。全用div他的语义就不好了。【靠经验】

2看见盒子老想去设置宽高，很多时候子盒子都不用设置宽，因为设置父盒子宽就行了。高度也可以考虑直接用padding撑大，正好还居中。

3padding不够熟悉。【padding会不会把盒子挤大，主要看父盒子有没有位置给他撑大】

这个涉及到传统盒子模型【box-sizing : content-box;】与【C3的盒子模型box-sizing: border-box;】。content-box也就是默认的盒子在父盒子有空余位置的时候设置padding与border都会被撑大。而border-box;设置多大就是多大。

什么时候会外边距塌陷？

我本来想让子盒子距离父盒子向下移50px，结果整体往下移动了。解决：给父盒子加overflow: hidden;

怎么清除浮动？

比较好的方法：通过伪元素在父盒子最后加一个元素，声明displat: block变成盒子，再给盒子加clear: both，再把盒子隐藏【伪元素声明displat: block变成盒子时，我直接叫他伪元素盒子】

原来的做法是最后面加一个多余的空盒子，如果页面上有很多需要清楚浮动的地方就需要加很多个盒子，伪元素就很好解决这个问题

<image> 与 background-image 区别？？？

1--img是html标签，占位，background-image是CSS样式，不占位
2--在网页加载过程中，img作为网页结构内容的一部分，会在加载结构的过程中加载，而background-image作为css样式的一部分，会在结构加载完成后开始加载。(如果你引入了一个很大的图片，在这个图片下载完成之前，img后面的内容都不会显示，而如果用css引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。)
3--背景图片在加载失败或路径找不到时，不会显示图片标记,img标签在加载失败或找不到路径时，显示一个撕裂的小图标标记

写CSS步骤？

1初始化，所有标签去掉默认的默认边距，li 去掉小黑点等等

background与background-image区别？

就像magin与magin-top的区别，magin包括了magin-top。background同理。background-image只能设置图片，background可以设置背景颜色，图片等等。background: url(../山.jpg) 40% / 10em gray round fixed border-box;;

1这四个盒子都是标准流，所以从上到下排列

top（和浏览器一样宽不需要指定宽度）

a{padding:0 20px} 指的是给a内的文字padding，也就是会把a撑大【如果没有指定width与height就不会撑开盒子】

1给 .box设置高宽，图片宽度设为100%

2 .review设置高度，这样最下面的文字不会因为中间的字多而被挤下去，因为下方还有足够距离，所以上下距离不能用padding，不然盒子会撑大

3 .review设置padding: 0 30px,因为.review宽度没设置就是100%，没位置给他撑大所以不会撑大。【别人这么说也对：因为.review没有设置宽度，盒子不会撑大】

总结：h，p，ul，ol等都是块级元素，都可以直接设置height,width当盒子用

box父盒子设置完宽度以后，子盒子肯定没必要设置宽度了，这是padding就能很好的控制文字左右。

下面代码没写清楚， .last是加在最后一个li上的类

第一步确定版心+网页背景颜色+清楚边距：以后哪个盒子需要这个宽度以及居中，直接在盒子的class中加个类名就行

第一眼：宽度百分百的就不需要写宽度。在中间的就给版心的样式

导航栏

给最外面的盒子加 w 这个类

nva中的a 链接最经典写法: 变块级；然后才可以加高度，行高上下使文字居中；因为字数不确定不能加宽，所以加左右padding正好又可以左右居中

.nav ul li a {
　　display: block;
　　height: 42px;
　　padding: 0 10px;
　　line-height: 42px;
}

搜索框并不是div里面套两个div，这样写语义不好，直接div套input和button，语义更好。背景图片用background: url(...);

1最外面的div不需要给宽度，默认100%

1看图他这里的a 也不是整个li的范围

2 li 没设置宽度，所以给li设置padding就没变大（经常这样，自己这个块级元素没设置宽度，可是上一级或者上上级设置了宽度，就默认一样大，这时给自己设置padding就可以把里面内容挤到中间，但是自己大小没变！！非常好用）

.bd ul li {
　　padding: 14px 0;
　　border-bottom: 1px solid #ccc;
}

对于下图的li来说父盒子有足够的高度，当他加上下padding时可以给 li 撑开，正好也起到了上下居中效果。 a 链接添加 display: block;变块级元素再去写样式变成按钮