笔记一

1、logo用<a>标签包围 并给img设置:border:0(放置IE浏览器出现框)

2、搜索框内有图片,处理方式:

    父级div设置border,并调好位置

    子级input设置border 0 ;height 100%

    图标用<span>包围,设置位置

3、font-size测量方法,字的高度便是大小

4、nav栏中第一个栏与其他栏侧边不同时处理方法:

    先设置好着呢个·整个nav宽度,设置每个栏padding-left:npx;再设置整个nav栏的的margin,记得减去n,(以为padding会撑开)

5、子元素设置margin-top失效,给父元素设置overflow:hidden即可。

  注,尽量用margin-left调节左右位置,用line-height调节高度。(方便上下居中)

6、新闻中,新闻内容在左边,日期在右边问题的解决方法

    html中:<ul><li>我在写博客园</li><span>2016-7-16</span></ul>

    css中:li{float:left} span{float:right}

7、解决为元素加边框紧贴问题,利用padding撑开的特性,为子元素设置padding即可

8、设置图片居中,HTML放个div,在css中设置div的宽高和background:center; 

9、解决两个<li>标签并行问题:给父级元素添加overflow:hidden;

10、这里说一下,overflow:hidden;的直观表现,为网页审查的时候,看到的padding内容,可以用它消去,无论上下

    (上有margin-top,下有float)

11、子元素设置margin-top会连带把父元素拉下来(为父元素添加overflow:hidden解决),另外一个解决办法,一个div内含有div,内div距外div上边距离可用           position:relative;再调节位置即可。

12、为<li>前面加图片,用list-style:inside url();(注意,记得加上inside)

13、"图片+文字"这种格式,用<b></b><hn></hn>写法即可

14、float只是强制让元素在一行显示,不用在一行的不用加float。

15、用margin-top调节上下位置时,会连带父类下拉,这时候给父类加上overflow:hidden。

16、缩小浏览器时候图片消失,可在img父类元素加上position:relative;再给img元素加上position:absolute,如果浏览器缩小时,图片向右消失,可给img right:0  属性

17、margin:0 auto不能居中的原因:

  ①、给居中的元素一个高度,否则无效

  ②、该元素一定不能有浮动,否则无效

18、行内元素不能给line-height,因为它不能设置宽高,这时候可以给display:inlin-block属性

19、问题“登录 | 注册” 解决中间“|”距离问题,可用padding去撑开

20、text-align影响input的位置

21、涉及到调节文字的位置时,可用<p>不用<span>,因为span有时候不能用margin-top有时候,当然可以用 line-height调节

22、上下几排<li>对齐的时候,调节<li>到最长字段的距离即可

23、格式“图片+文字”,图片与文字对齐问题,用<ul><li><img><p></p></li></ul>,调节<img>和<p>时用padding去撑开而不要用margin去移动

24、插入多个同位置的图片的时候。记得给个大小,防止图片大小不一致,而错位

25、对于一边边框比ul长的处理方法,li不用line-height而用padding去撑开

26、text-indent:-npx;可解决文字加input,缩小浏览器后,文字移到input上方的问题

27、解决input输入位置不再框的起始位置,用padding去调节

28、写三角型:border-top:0 none;border-right:npx solid transparent;border-left:npx solid transparent;

29、为ul设置line-height会影响li设置height,so,为li设置line-height

30、行内块对margin:0 auto;不管用,(display:inline-block)

31、display会影响ul的list-style

32、调节nav栏中“图片+文字”,图片居中时,给图片加上display:block,float:left后才可以用margin-top调节

33、关于hover控制子元素问题,写子元素的时候,只单写子元素即可,不必一级一级写下来

34、li带背景图,用line-height比padding要好,line-height控制上下,padding控制左右

35、导入背景图片时,图片不完全显示,可用background-size调节到背景大小

36、父类div给text-align:center属性,img给margin:0 auto; 可以使图片居中

原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5676820.html