html基础

1、固定定位不占位置，下面的标准流盒子会上去，解决方法，可以直接给margin-top值，让标准流盒子下来

2、a：nth-child（1）表示第一个a

3、c3盒子模型：box-sizing：border-box

4、定位的盒子margin居中，是没有用的，要手动设置，先走浏览器的一半，在走自身的一半，

transform:translateX(-50%)

5、浮动、定位之后，行内元素就不需要在转换，

6、当盒子有宽高的时候，设置padding会导致盒子宽高变化，当盒子没有宽度，而是继承父亲的高/宽，不会影响盒子

总结就是：如果一个盒子没有高/宽，或者继承父亲的高/宽，不会影响盒子

7、在c3/移动端，行高等于内容的高度，pc端，行高等于高

8、ul有内外边距，需要清除

9、二倍精灵图作法

先把精灵图等比例缩放一半，在量x，y值，图片写background-size:宽，高； 宽，高为缩放后背景的大小

固定定位的盒子必须给宽

10、去除底片空隙 img{vertical-middle :top | center}

11、当两个盒子叠在一起的时候，我们用定位

12、opacity透明度

13、css3动画，动画的基本使用：先定义动画，在使用动画

用keyframes定义动画

14、让一个盒子水平垂直居中：定位或margin或transform：translate（-50%，-50%）

15、当鼠标经过时，整个范围都是a，所以这个li的大小要给a

16、一个盒子上下两个图片时，可以在li里面放两个div就行，然后放图，不用设置宽高，如果图片大了或者小了，可以给这两个div设置大小

17、li里面可以放ul和li，两个文字并列时，用ul来写，给ul起一个类名，并且每个li都设置宽高，要在li里面放链接a，前提是上一个ul和li给了宽

18、侧导航栏，固定定位导航

：先走浏览器的50%，然后在margin-left走版心的一半，然后在走自身的一半

19、块级盒子居中用margin：auto

20、在没有宽高，又是行内元素时，可以用padding撑开盒子

21、字数不一样多，不方便给宽度，可以直接用padding撑开盒子

22、input、img属于行内元素，行内元素没有对齐，可以用vertical-align

23、form出现的时候最好起个name值，input最好也带上name值

24、子盒子可以比父盒子大，可以给ul宽度，但是要给ul的上一个父级overflow：hidden

25、a和i都是行内元素，需要转移为display：block；

26、两个块级元素给margin会造成外边距塌陷，可以用overflow：hidden来解决

27、li在ul居中显示分为三步

1）给ul的父盒子{text-align：center}

2）给ul{display：inline-block； overflow：auto}

3）给li{float：left}

因为text-align：center只适应于行内块元素，而ul li是块级元素，需要转换为display： inline-block，在给li浮动一下

28、当子盒子都浮动了之后，位置还是乱的话，需要给父盒子也进行浮动，因为父盒子不浮动的话，父盒子还是站着位置的，所以需要浮动

29、input和button是在一个盒子里面的，用浮动可以让他们排在一排，并且没有空隙

30、在做导航栏右浮动时，有的字会相反，这时可以先让父盒子(ul)右浮动，在让li左浮动就行

31、怎么鼠标经过时显示文字：

display：nono隐藏，在需要经过的类显示写display：block，这时鼠标经过时就可以显示了，但不一定是连接a，是经过谁写谁

32、当鼠标经过时，附近都可以点链接，那么这个盒子的大小给a了

33、浮动的盒子可以直接给大小，不需要转换，li里面可以包含任何东西，相同的代码可以定义一个公共的类，存放相同的代码

34、如果加了一个字体图标后，文字下来了这种问题，要调字体图标的行高

35、去掉button默认的边框用border：0  ； 去掉input的轮廓线用outline：none

36、设置距离时，可以用子绝父相定位

37、如果使ul中li元素横向排列且不换行：display：inline-block

如果ul设置了绝对定位，li的display不能设置为inline-block，需要设置为table-cell，同时li的间距需要用padding来设置

38、如果li的宽度不够，则可以给ul更多的宽度（或ul的父级）这样整个盒子宽度变量，

39、如果父盒子没有高度，子盒子有浮动了，此时会产生浮动的影响，所以要清楚浮动，谁没有高度就把清楚浮动写在谁身上

40、浮动可以去掉缝隙

41、vertical-align：midden让图片和文字居中

42、背景图片只能用position来定位，写两个值一般

43、a里面可以包含行内元素，例如span，strong

44、让文字居中，给li也可以，给a也可以

45、兄弟关系，嵌套关系会造成父边框塌陷，标准流会造成塌陷，解决：给子盒子浮动

46、子盒子是可以大于父盒子的，可以用overflow：hidden进行隐藏

47、布局流程

1）必须确定页面的版心

2）关注行模块，再看列模块，其实布局页面，都是由行组合的

3）制作html结构  写css样式

48、可以根据盒子的位置，来确定盒子margin-left或margin-right

49、父盒子里有一个子盒子浮动，另外的子盒子也要浮动

50、button里面要写文字，要不然就和前面的文本框对不齐

51、过渡transition

过渡是一个状态渐渐过渡到另一个状态，经常和：hover一起搭配使用

52、img水平居中的前提是：把img转换成块级元素，然后用margin：auto，因为img是行内元素

行内元素，行内元素只有左右生效，上下不生效

53、链接一般是li里面包含a，大段大段的文字可以用p，p里面不能放div

54、链接一般情况下需要单独指定样式，设置字体之间的距离：letter-spacing：5px

55、margin：水平垂直居中，父边距+定位

56、当两个盒子的边框贴在一起时，会变粗，可以用margin负值来解决

例如：margin-left：-1px；margin-top：-1px

57、突出显示某个盒子，可以用定位来解决（鼠标放上去突出显示某个盒子），绝对定位不占有位置，相对定位占位置

58、让倾斜的不倾斜用font-style：normal

59、表格table

cellspacing：单元格与单元格之间的距离

cellpadding：单元格与内容之间的距离

<th></th>表示一个表格的表头

表单input和form一起搭配使用，如果input里面没有写name，则后台就不能获取到数据

caption表格标题，和table一起使用

60、display显示

display：block块级元素

display：inline行内元素

display：inline-block行内块元素

61、背景图片：background-image：url();

62、背景位置：background-position：length||length

63、清除默认的内外边距

*{ margin:0; padding:0}

64、去掉li列表的样式： li{ list-style ：none}

65、链接伪类选择器

a:link 未访问的链接

a:visited已访问的链接

a:hover鼠标移动到链接上

a:active选定的链接

66、盒子的实际大小=内容的宽度、高度+内边距+边框

如果内边距一定要给的，我们只能改变内容宽、高度，减去多出来的内边距就好了

注意：如果一个盒子没有指定宽度，则padding不会撑开盒子

67、插入图片不能写字，重要图片展示用插入，

背景图片能写字，