A, WebStorm take color techniques: webstorm color eyedropper built, we can use the figure eyedropper, color identification of the unknown when a certain color.
Second, the system will default to the body to add margins, so we should first get rid of these inner and outer margins in this case, the business development in order to better control the width and height of the box and calculate the width of the box and so higher, so in the enterprise development process, before you write the code first thing is to clear the default margins.
How do I clear it?
We learned earlier use wildcard selector, to remove the default label property, because low priority, so we do not affect the already set tags, labels not only to set the margin removal
< Style > * { magrin : 0 ; padding : 0 ; } .......... .......... omitted Code
Precautions: Wildcard label will traverse all the labels in the current interface, it will affect our performance, but do not worry, Daniel has helped me find good solutions.
In the Baidu search "yui css reset", we enter the website: https: //yuilibrary.com/yui/docs/cssreset/
We enter the URL in the screenshot above, there is a piece of code, we have to copy and paste the following style tag on it.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
Third, the font size and line height
1. Row Height: CSS in all rows are all rows high.
2. Notes:
(1) We in the box, if you do not set the height of the box, but the box text, then the system will also be added to the height of the box, this is equal to the height of the text line height
(2) the row height and high box not the same concept.
(3) High School text line centered by default.
(4) in the enterprise development, we often joint venture height and row height to consistent, then so that we can guarantee a line of text is a vertical play in the joint venture height.
(4) Format: line-height: PX value;
Here is the value of this whole line of text values.
for example:
{div border: Black Solid 1px; width: 300px by; height: 20px; Line-height: 50px;} .......... omitted codes ......... < div > I was a text </ div >
We can see, this box set is less than the height of the high lines of text, the text will overflow.
(5) In the business development process, if a cassette can not use multiple lines of text line height is provided in a box so that to achieve high vertical center of the text object, the text can be centered so that padding is provided by the calculated values.
div { / * Box-Sizing: border-Box; * / border: Black 1px Solid; width: 300px by; height: 50px; Line-height: 50px; padding-bottom: 50px; } </ style > </ head > < body > < div > I am a paragraph of text < br > I am a paragraph of text </ div >
Fourth, the source code:
d117and118_line_height.html Address:
https://github.com/ruigege66/HTML_learning/blob/master/d117and118_line_height.html
2.CSDN: https: //blog.csdn.net/weixin_44630050 (Xi Jun Jun Moods do not know - Rui)
3. Park blog: https: //www.cnblogs.com/ruigege0000/
4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package
