Section spacing is an important factor in the design of web pages to improve the reading experience. However, web page layout is not as simple as Word. Can you use CSS to efficiently set the paragraph spacing?
Text layout problems in web design
As a web designer, we must reserve a margin for every subtitle and paragraph in the article (margin is usually used in CSS), but the elements contained in a paragraph (HTML tags) it is not static, which means you must set a clear style for all these elements to avoid unnecessary code.
On the premise of gradual transition to W3C standards, there are currently two ways to set the paragraph Spacing:
Pass Class)
Specify a Class value for the first element of a paragraph and assign it to margin-top: 0.
HTML:
Copy to ClipboardReference: [www.bkjia.com] <div id = "articles">
<H1 class = "first"> Heading <P> Welcome to Bolo's blog... </p>
</Div>
CSS:
Copy to ClipboardReference: [www.bkjia.com]. first {margin-top: 0 ;}
The disadvantage of this method is that a new Class is introduced, which means it will reduce our efficiency. You may need to modify the previous article, which is not conducive to the increase or decrease of the article content.
Use CSS pseudo-classes
CSS pseudo classes have been gradually supported by some advanced browsers.
HTML:
Copy to ClipboardReference: [www.bkjia.com] <div id = "articles">
<H1> Heading <P> Welcome to Bolo's blog... </p>
</Div>
CSS:
Copy to ClipboardReference: [www.bkjia.com] # articles>: first-child {margin-top: 0 ;}
Use the CSS pseudo-class to assign margin-top: 0 to the first sub-element of # articles. This method does not require us to manually introduce a redundant Class, so you do not need to adjust the article code. Strong adaptability.
This method has been recognized in the CSS2 standard but has never been popularized because IE6 does not support it (So eliminating IE6 is the shared responsibility of all Web developers-the Translator's note ).
Is the CSS you wrote compatible with IE?
Here is the essence.
The above content is just a brief description of some of the functions that can be implemented by the current CSS. How to exert the power of CSS depends on the use of web designers. The following describes several powerful tools, but it is very convenient to perform the most authentic compatibility test on IE browser, so that you can choose the best CSS programming solution.
Ie7-js
Ie7-js is a JavaScript library that will make IE behave like a W3C-compatible browser, you can view the compatibility of a certain version of IE with this CSS syntax on this test page, and their compatibility.
The "IE7-js" project has two major JavaScript scripts: IE7.js and IE8.js. When you decide to use the IE8-js, you don't need to use the IE7-js at the same time, because the IE8-js already contains all the features of the IE7-js. You can find all the descriptions about this project on this page.
Ie-css3.js
IE-css3.js, however, gives IE support for CSS3 rules. However, the fly in the ointment is that this script does not allow IE to fully support CSS3, but can only be used as an extension to the CSS engine of IE. After all, CSS3 is still an unfinished standard.
ECSStender
This should be the most powerful IE extension written in JavaScript. It integrates some of the highlights of the two extensions and adds some additional support. You can view detailed descriptions of this database on this page.
Bolo's opinion
No matter how high the call for eliminating IE6 is, the best way is to try to be compatible with it, so that you will not lose readers. Therefore, the compatibility method should be preferred when writing browser code. I can't write hack anymore.
For the several JavaScript libraries recommended in this article, if they are used on online websites, their disadvantages are very fatal (when JavaScript is disabled by the browser ), it is also prone to other incompatibility issues (mainly conflicts with other JavaScript scripts ). Therefore, I recommend that you use these libraries to understand the performance of IE. This is a permanent practice.
