大一寒假学习笔记02

**

css学习笔记

**
切图的方法：
1、右击图层、转换为png,图层合并时，使用快捷键shift+alt可点击要合并的图层，选择菜单栏上的图层，再选择合并图层等；
2、选择左侧的菜单栏中的裁剪工具，长按选择切片工具，框出图层后，点击文件、导出、导出为web…、存储等；
3、使用cutterman 插件，需要自行下载，使用时在窗口找到扩展功能就能找到。

学成在线首页案例练习
遇到的问题：
1、在标签div中写标签a或其它文字后会使盒子下滑，如图：

未找出原因，但设置浮动后就没有出现这种情况。
2、ul里面第一个里标签设置外边框margin-top不起作用,如图：

3、图片与P标签之间存在外边距，且无法消除，如图：

知识总结
1、css属性书写顺序（重点）
（1）布局定位属性： display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）
（2）自身属性： width/height/margin/padding/border/background
（3）文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break-word
（4）其它属性（css3）： content/cursor/border-radious/box-shadow/text-shadow/background:linear-gradient…
2、超链接标签a一般嵌套在ul>li标签里面，比较整齐的文字等可以用li标签；
3、不加浮动时，行内块元素之间会存在外边距，浮动时在合适的时候可以设置右浮动，并且，浮动的盒子不会有外边距合并的情况；
4、text-align：center 属性可以使文字对齐；
5、导航栏一般不设宽度，将来可以继续添加其它文字，因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度；
6、按钮button默认有个边框需要我们手动去掉，border: 0/none;
7、rgba(0,0,0,0.3)；最后的0.3是使颜色变透明；
8、font-weight:700; 可以使文字变粗,400可以使文字不加粗；
9、指定外边距时最外边的盒子被挤下来时，可以给父级元素指定具体宽度解决问题；
10、当图片大于盒子的长或宽时，可以设图片宽或高为100%；
11、dl 自定义列表，只能包含dt dd标签 ，可多个dt dd标签 ，块居元素；
11、外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。行内框、浮动框或绝对定位之间的外边距不会合并。注意，当使用margin不行时，可以选择使用padding。