0. Catalogue
- Directory
- Introduction
- Body
- 1 use not to add a spacer to the navigation bar
- 2 Adding the Line-height property to the BODY element
- 3 arbitrary elements are centered vertically
- 4 comma-delimited list
- 5 using negative numbers in Nth-child
- 6 using the SVG icon
- 7 Text Display optimization
- 8 using Max-height in pure CSS sliders
- 9 Initializing Box-sizing
- 10 table cell Width
- 11 use Flexbox to get rid of various margin Hacks
- 12 using an attribute selector for an empty connection
- Statement
1. Introduction
Original: GitHub's a collection of useful CSS protips
Translator: Love the front-end music to share the Fedfun, free translation of the main improper place, welcome correction!
Translation: Improve your CSS development skills set, I hope to help you.
2. Text2.1 Use
:not()
Add an interval line to a navigation bar
We usually use the following code to add a spacer line to the navigation bar
/* add border */.navli{ border-right: 1px solid #666;}/* remove border */.navli:last-child{ border-right: none;}
Now, we can use :not()
selectors to simplify the operation, the code is simple and easy to read, good.
.navli:not(:last-child){ border-right: 1px solid #666;}
Or, let's add the left border.
.navli:first-childli{ border-left: 1px solid #666;}
2.2 Adding the Line-height property to the BODY element
We do not need to give each p, H1 element set line-height
, only need to set the BODY element, other text elements will automatically inherit the body's characteristics.
body{ line-height: 1;}
2.3 Arbitrary elements are centered vertically
It's not black magic, and it does allow any element to be centered vertically.
HTML,Body { height: %; margin: 0; }Body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
2.4 Comma-delimited list
Make the HTML list look like a comma-delimited list of realities
ulli:not(:last-child)::after{ content: ",";}
2.5 in
nth-child
Use negative numbers in
Use negative numbers in the CSS to nth-child
select 1~n Records.
li{ display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3){ display: block;}
2.6 Using the SVG icon
There is no reason not to use SVG icons, which can be scaled in most resolutions and browsers, or even compatible with IE9, so no more. png,. gif, and so on.
.logo{ background: url("logo.svg");}
2.7 Text display optimization
Some fonts can no longer be optimally displayed on all devices, so they need to be set.
html{ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
Note that optimizeLegibility
the use of attribute values is not supported at the same time Ie/edge text-rendering
.
2.8 using Max-height in pure CSS sliders
Use Max-height to implement hidden, displayed animations.
.slider UL {max-height : Span class= "Hljs-value" > 0 ; overlow : hidden ; .slider :hover ul {max-height : 1000 px ; transition : 3 s ease ;
See Benbow "Auto Value CSS3 Transition solution"
2.9 Initialization
box-sizing
Inherit attributes from HTML box-sizing
, so that later maintenance is more convenient.
html{ box-sizing: border-box;}*, *:before, *:after{ box-sizing: inherit;}
2.10 table cell width
.calendar{ table-layout: fixed;}
2.11 Use Flexbox to get rid of various margin Hacks
When implementing the sidebar, we no longer need a variety of nth-
, first-
and last-child
other set margin, can be used flexbox easy to achieve uniform distribution.
.list{ display: flex; justify-content: space-between;}.list.person{ flex-basis: 23%;}
2.12 using an attribute selector for an empty connection
For a that has an HREF attribute but empty content, the content is added automatically.
a[href^="http"]:empty::before{ content: attr(href);}
It's very convenient, isn't it.
3. Disclaimer
Love front-end music to share the FEDFUN,CSDN expert blog, Wang Haiqing hope to help you, limited to the author level limited, error inevitably, welcome to shoot Bricks!
Welcome any kind of reprint, please indicate loading, keep this paragraph text.
This text link http://blog.csdn.net/whqet/article/details/48997389
Independent blog Http://whqet.github.io
Sina Weibo Http://weibo.com/FedFun
A set of tips to improve your CSS development capabilities