关注前端开发
关注用户体验

几个经典的css技巧

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致)。

清除容器浮动

#main {
overflow:hidden;
}

期前也提到过这样的问题。

不让链接折行

a {
white-space:nowrap;
}

上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录)。

始终让 Firefox 显示滚动条

html {
overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用

body, html {
min-height:101%;
}

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用

body{
text-align: center;
}

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea {
overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。

设置打印分页

h2 {
page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus {
outline:none;
}

Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。

赞(0)
未经允许不得转载:大前端 » 几个经典的css技巧
分享到: 更多 (0)

评论 51

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #47

    What’s up, yeah this piece of writing is really fastidious
    and I have learned lot of things from it on the topic of blogging.
    thanks.

  2. #46

    You created some decent points there. I looked online for your issue and located most people go along with together with your web site.

    Elmo Bienfang2周前 (05-16)回复
  3. #45

    Ashton Kutcher and Demi Moore have already spoken out against the idea, saying that they’d rather not encourage anymore people to stalk celebrities. So, the first thing to do is to decide the purpose of your ad.

    Nonton Anime2周前 (05-10)回复
  4. #44

    Wow, marvelous blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your
    site is wonderful, let alone the content!

  5. #43

    This website was… how do I say it? Relevant!! Finally I’ve found something that helped me. Cheers!

  6. #42

    I really like looking through a post that can make people think. Also, thanks for allowing me to comment!

    Apex Legends Tiers1个月前 (04-27)回复
  7. #41

    Enjoyed the post.

    Droge huid1个月前 (04-21)回复
  8. #40

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Magnesium drijven1个月前 (04-19)回复
  9. #39

    Keep up the good work! Thanks.

    huidverzorging1个月前 (04-19)回复
  10. #38

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Pigmentatie1个月前 (04-19)回复
  11. #37

    Nice post! Thank you.

    Pigmentatie1个月前 (04-18)回复
  12. #36

    Thanks for this nice post. …

    Couperose1个月前 (04-18)回复
  13. #35

    Enjoyed the post.

    Anti aging1个月前 (04-18)回复
  14. #34

    Looks realy great! Thanks for the post.

    Huidverjonging1个月前 (04-18)回复
  15. #33

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Huidverjonging1个月前 (04-18)回复
  16. #32

    Enjoyed the post.

    Ontstekingen1个月前 (04-18)回复
  17. #31

    Nice post! Thank you.

    Eczeem1个月前 (04-18)回复
  18. #30

    Keep up the good work! Thanks.

    Huidinstituut1个月前 (04-17)回复
  19. #29

    Nice post! Thank you.

    Droge huid1个月前 (04-17)回复
  20. #28

    Keep up the good work! Thanks.

    schoonheidssalon1个月前 (04-16)回复
  21. #27

    Nice post! Thank you.

    huidverzorging1个月前 (04-16)回复
  22. #26

    Looks realy great! Thanks for the post.

    Puistjes1个月前 (04-16)回复
  23. #25

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Melasma1个月前 (04-16)回复
  24. #24

    Keep up the good work! Thanks.

    Eczeem1个月前 (04-15)回复
  25. #23

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Huidverbetering1个月前 (04-15)回复
  26. #22

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Gevoelige huid1个月前 (04-15)回复
  27. #21

    Nice post! Thank you.

    Zwangerschapsmasker1个月前 (04-15)回复
  28. #20

    This is a topic that’s close to my heart… Cheers!
    Exactly where are your contact details though?

  29. #19

    Enjoyed the post.

  30. #18

    Good write-up. I absolutely love this site. Keep writing!

    Apex Legends Octane2个月前 (04-10)回复
  31. #17

    Thanks for this nice post. …

    boekhoudkantoor breda2个月前 (04-09)回复
  32. #16

    View the following tips less than and find to know how to observe this situation whilst you project your home business today. Earn money from home

    Mozelle Aguado2个月前 (04-08)回复
  33. #15

    I absolutely love your site.. Very nice colors & theme. Did you make this site yourself? Please reply back as I’m attempting to create my own personal blog and would love to find out where you got this from or what the theme is called. Many thanks!

    Apex Legends Octane2个月前 (04-01)回复
  34. #14

    I used to be able to find good information from your articles.

    DMC52个月前 (03-31)回复
  35. #13

    Loving the info on this internet site, you have done outstanding job on the articles.

    Rivka Kincheloe2个月前 (03-28)回复
  36. #12

    I just like the valuable information you supply on your articles. I’ll bookmark your weblog and test again here frequently. I am fairly certain I’ll be informed plenty of new stuff proper right here! Good luck for the following!

    Chelsey Ronero2个月前 (03-28)回复
  37. #11

    An impressive share, I simply with all this onto a colleague who had previously been carrying out a little analysis during this. And then he in reality bought me breakfast since I came across it for him.. smile. So permit me to reword that: Thnx for the treat! But yeah Thnkx for spending any time to go over this, I feel strongly about this and enjoy reading read more about this topic. Whenever possible, as you grow expertise, would you mind updating your website with more details? It is extremely helpful for me. Massive thumb up for this short article!

    my singing monsters2个月前 (03-28)回复
  38. #10

    It’s best to participate in a contest for probably the greatest blogs on the web. I will recommend this web site!

    Joan Thro3个月前 (03-13)回复
  39. #9

    Considering someone which is aware of reports, nonetheless is not going to discover how they can travel jointly? Maybe you are just a friend or relative that doesn’t have the time that will relax and property and additionally lb . available words on the key board.

    Timothy Skewis3个月前 (03-11)回复
  40. #8

    Ever thought about what separates a great coach and mentor from the rest? And why great coaches get results while other get frustrated? “The biggest MISTAKE most people make about a coach is: They mistake a COACH for a BABY SITTER A BABY SITTER tells kids in a nice way that they need to do what they are told to do in a soft and caring voice as to not upset the child. A great baby sitter will smile when the child is throwing a tantrum. A COACH on the other hand is hired to get the best out of a person. They are not there to smile and tell a person what they want to hear. They are hired to get a result because they care about outcomes and getting the most out of a person. A great coach does not play stupid games with irresponsible people who think they want to get the best from themselves yet fail to show it in their actions. This is why great coaches Drop average players from their team all the time. When ADULTS hire a coach, it is not the coaches responsibility to do the work, run the laps or sweat. That’s what the player does. Coaches see how the player can best suit the game and find their unique talents and gifts, then put them in a position to win. If the player fails to turn up, then a good coach will drop the lazy, irresponsible player in turn for the player with a good attitude who is prepared to put in the work to succeed. Next time you are thinking about hiring a coach, just remember the best coaches drop lazy, irresponsible players all the time as they value their years of hard work, learning the art of what they coach and pride themselves on success. If you want to be a great player in the game of life or business; action, implementation and great communication is the key. “Make shit happen”. Great coaches love great clients or great players on their team.

    Eileen Holthus3个月前 (03-08)回复
  41. #7

    ABLEnding, Inc. has the ability to accommodate the funding for home purchases, refinancing, construction loans, home equity lines of credit, and commercial loans in Arizona. As a mortgage broker, Mark Ventrone works with lenders from all over the country – not just one – so you know you’ll always get the absolute lowest rates and fees and best product available for your particular situation. Getting a mortgage can be quite confusing, but Mark will PERSONALLY guide you through every step of the process providing excellent customer service, responding to most emails and calls. Looking for a mortgage brokers in Arizona, contact ABLEnding, Inc or call (602)362-6634 for more details.

    Claud Prigmore3个月前 (03-07)回复
  42. #6

    РharmaEurope.net sells real legit anabolic steroids. All their stuff is authentіc andd of very hіgh quality –
    here you cаn buy testosterone, anadrol, trenbоlone, human growth hormone, cytomel, T3, and moгe without prescription

  43. #5

    BᥙlkPһarma.net sells real legit anabolic sterߋids.

    All theiг stuff is authentіc and of very high quаlity

    here ʏou ⅽann buy testosterone, anadrol, trenbolone, human growth hormone, cytomel, T3,
    and more withοut prescription

    bionabol prices3个月前 (02-21)回复
  44. #4

    You will never win

    Lakewood CA dentist8年前 (2011-03-25)回复
  45. #3

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon

    how to get pregnant8年前 (2011-02-16)回复
  46. #2

    Excellent post. I was checking constantly this blog and I am impressed! Extremely helpful info particularly the last part 🙂 I care for such information a lot. I was seeking this certain info for a long time. Thank you and best of luck.

    Carlton Sheets8年前 (2011-01-11)回复
  47. #1

    Hi – very great site you have made. I enjoyed reading this posting. I did want to write a comment to tell you that the design of this site is very aesthetically sweet. I used to be a graphic designer, now I am a copy editor for a newspaper firm. I have always enjoyed functioning with computing machines and am attempting to learn code in my free time (which there is never enough of lol).

    wow schools review9年前 (2011-01-08)回复

themebetter 国内更好的WordPress主题服务商

立即前往