Bottleneck_html/css_WEB-ITnose-HTML Tutorial-php.cn

Bottleneck_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:56

Original

1189 people have browsed it

I like Zhang Xinxu’s blog very much. I have been reading it for a long time. Recently, my state has been a bit wrong, so I went back to read his blog about bottlenecks in CSS learning.

Personal experience

Let me talk about my personal experience first. The most basic elements of the front end are html, css and js. My personal understanding is that html is the skeleton, css is the clothes, and js is the action. So writing a good html structure is the most basic. Getting started with css is also very easy

relative, absolute of position,

float, clear float,

box model, elastic box

css sprite

When I first started working on the front-end, I felt that every day was new and I was exposed to new knowledge every day. Later, every month was new. I looked at some effects and frameworks written by others and used them myself. Now I feel a little impetuous, and I can't learn new things as quickly as before.

Dada’s point of view

Back to Dada’s blog, my current situation is probably the bottleneck 1 mentioned by Dada. . . This article is really worth reading. I haven’t written anything for a long time, so my ability to express myself is no longer good. Now I am working hard on blogging.

Back to business, now let’s answer a few questions that were raised:

What is the default margin value of the browser for the three tags dl, dt, and dd? Is there a label with bold text by default?

dl {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}dt {display: block;}dd {display: block;-webkit-margin-start: 40px;}

Copy after login

This is a demo I wrote and copied and pasted in Chrome. In fact, dt is not worth the default margin. I really haven’t paid attention to these things, which is shameful. . .

What is the difference between line-height:150% and line-height:1.5?

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    div{ font-size:16px;line-height: 150%;}    p{        font-size: 30px;    }    </style></head><body>    <div>        <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>    </div></body></html>

Copy after login

line-height

line-height:15px The parent element sets the line-height in px, and the child element inherits its line- height will not change as its own font-size changes
line-height: 150% The parent element sets the percentage line-height, the line-height of the child element = the font-size of the parent element*parent element The value of line-height will not change with the change of the font-size of the child element
line-height:1.5 The parent element sets the line-height of the value, and the line-height of the child element = the font of the child element -size*The line-height of the parent element will change as the font-size of the child element changes

You can change the line-height of the demo above to see the effect

Why float Make outer container highly collapsed? Is this a bug?

A trace of the floating things we cleared together in those years

p.s. This seems to be something from last week or the week before last. I wrote half of it but didn’t finish it, and then put it aside. Let me post it first. There is also "Why does the performance of vertical-align differ under IE7, IE8, and IE9? What is the rendering mechanism?" This question has not been written, and will be added next time.