css技巧
来源:互联网 发布:北师珠网络教学 编辑:程序博客网 时间:2024/06/03 19:37
Protips
- Use
:not()
to Apply/Unapply Borders on Navigation - Add
line-height
tobody
- Vertically-Center Anything
- Comma-Separated Lists
- Select Items Using Negative
nth-child
- Use SVG for Icons
- Use the "Lobotomized Owl" Selector
- Use
max-height
for Pure CSS Sliders - Inherit
box-sizing
- Equal Width Table Cells
- Get Rid of Margin Hacks With Flexbox
- Use Attribute Selectors with Empty Links
- Style "Default" Links
- Consistent Vertical Rhythm
- Intrinsic Ratio Boxes
Use :not()
to Apply/Unapply Borders on Navigation
Instead of putting on the border...
/* add border */.nav li { border-right: 1px solid #666;}
...and then taking it off the last element...
/* remove border */.nav li:last-child { border-right: none;}
...use the :not()
pseudo-class to only apply to the elements you want:
.nav li:not(:last-child) { border-right: 1px solid #666;}
Sure, you can use .nav li + li
or even .nav li:first-child ~ li
, but with :not()
the intent is very clear and the CSS selector defines the border the way a human would describe it.
Add line-height
to body
You don't need to add line-height
to each <p>
, <h*>
, et al. separately. Instead, add it to body
:
body { line-height: 1;}
This way textual elements can inherit from body
easily.
Vertically-Center Anything
No, it's not black magic, you really can center elements vertically:
html, body { height: 100%; margin: 0;}body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}
Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.
Note: Watch for some buggy behavior with flexbox in IE11.
Comma-Separated Lists
Make list items look like a real, comma-separated list:
ul > li:not(:last-child)::after { content: ",";}
Use the :not()
pseudo-class so no comma is added to the last item.
Note: This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
Select Items Using Negative nth-child
Use negative nth-child
in CSS to select items 1 through n.
li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}
Or, since you've already learned a little about using :not()
, try:
/* select items 1 through 3 and display them */li:not(:nth-child(-n+3)) { display: none;}
Well that was pretty easy.
Use SVG for Icons
There's no reason not to use SVG for icons:
.logo { background: url("logo.svg");}
SVG scales well for all resolution types and is supported in all browsers back to IE9. So ditch your .png, .jpg, or .gif-jif-whatev files.
Note: If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:
.no-svg .icon-only:after { content: attr(aria-label);}
Use the "Lobotomized Owl" Selector
It may have a strange name but using the universal selector (*
) with the adjacent sibling selector (+
) can provide a powerful CSS capability:
* + * { margin-top: 1.5em;}
In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em
.
For more on the "lobotomized owl" selector, read Heydon Pickering's post on A List Apart.
Use max-height
for Pure CSS Sliders
Implement CSS-only sliders using max-height
with overflow hidden:
.slider { max-height: 200px; overflow-y: hidden; width: 300px;}.slider:hover { max-height: 600px; overflow-y: scroll;}
The element expands to the max-height
value on hover and the slider displays as a result of the overflow.
Inherit box-sizing
Let box-sizing
be inherited from html
:
html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}
This makes it easier to change box-sizing
in plugins or other components that leverage other behavior.
Equal Width Table Cells
Tables can be a pain to work with so try using table-layout: fixed
to keep cells at equal width:
.calendar { table-layout: fixed;}
Pain-free table layouts.
Get Rid of Margin Hacks With Flexbox
When working with column gutters you can get rid of nth-
, first-
, and last-child
hacks by using flexbox's space-between
property:
.list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}
Now column gutters always appear evenly-spaced.
Use Attribute Selectors with Empty Links
Display links when the <a>
element has no text value but the href
attribute has a link:
a[href^="http"]:empty::before { content: attr(href);}
That's pretty convenient.
Style "Default" Links
Add a style for "default" links:
a[href]:not([class]) { color: #008000; text-decoration: underline;}
Now links that are inserted via a CMS, which don't usually have a class
attribute, will have a distinction without generically affecting the cascade.
Consistent Vertical Rhythm
Use a universal selector (*
) within an element to create a consistent vertical rhythm:
.intro > * { margin-bottom: 1.25rem;}
Consistent vertical rhythm provides a visual aesthetic that makes content far more readable.
Intrinsic Ratio Boxes
To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:
.container { height: 0; padding-bottom: 20%; position: relative;}.container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).
Support
Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
- CSS技巧
- CSS技巧
- css技巧
- css技巧
- CSS技巧
- css 技巧
- css技巧
- CSS技巧
- css技巧
- css技巧
- css技巧
- CSS技巧
- CSS技巧
- css技巧
- css技巧
- CSS技巧
- css技巧
- CSS技巧
- Bzoj2555 CTSC模拟赛 SubString
- vs在不同版本的opencv之间切换
- UVALIVE 7505 Hungry Game of Ants DP
- delphi:斑马打印机ZPL指令打印中文及二维码,补充说明
- XMLHttpRequest cannot load 跨域问题解决
- css技巧
- PropertiesLoaderUtils
- VS2010创建并使用DLL http://www.cnblogs.com/laogao/archive/2012/12/07/2806528.html
- JSP学习笔记二之JSP的语法和9大内置对象(上)
- Python学习资源
- 项目中第一次做图片上传和下载功能过程>>>
- 函数模板和类模板
- 002_Http之介绍
- Eclipse中同时打开多个Console