Front-end advanced test questions css_html/css_WEB-ITnose

1. css 40 points

1. What is a box model? 2. How many types of Doctype are there? 3. How to lay out a two-column layout where the left side does not move and the right side adapts?

4. How to layout two columns of equal height? 5. How to make the layout with a fixed width on the right side and adaptive width on the left or middle?

6. How to layout three columns adaptively? 7. What is the difference between gif, png and jpg? 8. What is css sprite? What are its advantages and disadvantages? 10. Make thin line tables? 11. What are the differences and connections between position: relative, absolute, and fixed? 12. How to center a float:left element

13. How do you usually solve the compatibility issues of Css in various browsers? Please share your experience;

" -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

DOCTYPE html PUBLIC "-// W3C//DTD -//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

DOCTYPE html

Third, you can refer to Baidu Netdisk

Left column, float: left width: 300px;

Right column, margin-left: 300px;

Four, five, and six are all layouts. . .

7, gif, png, jpg

1. The excellent compression algorithm ensures image quality to a certain extent while reducing the size to a very small size.

2. Multiple frames can be inserted to achieve animation effects.

3. You can set a transparent color to create the effect of objects floating on the background.

png

* Supports 256-color palette technology to produce small files

* Supports up to 48-bit true color images and 16-bit grayscale images.

* Supports the translucency of Alpha channel.

* Supports gamma correction information for image brightness.

* Supports storing additional text information to retain image name, author, copyright, creation time, comments and other information.

* Use lossless compression.

* Asymptotic display and streaming reading and writing are suitable for quickly displaying the preview effect during network transmission and then displaying the full picture.

* Use CRC cyclic redundancy encoding to prevent file errors.
* The latest PNG standard allows multiple images to be stored in one file.

jpg

JPEG/JFIF is the most commonly used format for storing and transmitting photos on the World Wide Web. JPEG can achieve its best results in photos or realistic paintings with smooth changes in tone and color. In this case, it usually does better than a completely distortion-free approach, and can still produce a very good-looking image (in fact it will produce a higher quality image than other general methods like GIF, which is better for line drawings) The graphics (drawing) and illustrations are distortion-free, but full-color images require extremely difficult quantification).

Simple gif is small in size and can be compatible with ie6 without filters, but the color is a bit different


png, large in size and good in color , the filter needs to be compatible with IE6

jpg, choose the color by yourself, the better color will be larger in size, opaque

The big list above is for artists, Look at the design! This is all it takes for the front end to be OK

8 What is css sprite? Advantages and disadvantages?

It is the css sprite

CSS Sprites advantages and disadvantages

Advantages

1. Using CSS Sprites can greatly reduce the http requests of web pages, thereby greatly improving the performance of the page. This is also the biggest advantage of CSS Sprites and the main reason why it is widely spread and applied;

2. CSS Sprites can reduce the bytes of images. I have compared the bytes of merging three images into one image many times and the bytes are always smaller than the sum of the bytes of these three images.

3. It solves the problem of web designers in naming pictures. They only need to name a collection of pictures. There is no need to name each small element. This improves the efficiency of web page production.

4. It is easy to change the style. You only need to modify the color or style of the picture on one or a few pictures, and the style of the entire web page can be changed. Maintenance is more convenient.

Disadvantages

It is true that CSS Sprites are so powerful, but there are also some shortcomings that cannot be ignored, as follows:

1. When merging pictures, you should merge multiple pictures into one picture in an orderly and reasonable manner, and leave enough space to prevent unnecessary backgrounds in the section; These are okay, but the most painful thing is the adaptive page under widescreen and high-resolution screens. If your picture is not wide enough, it is easy for the background to break;

2. CSS Sprites are troublesome to develop. You have to measure and calculate the precise position of each background unit through photoshop or other tools. This is needlework, not difficult, but very tedious. Fortunately, Tencent’s ghost brother developed a CSS Sprites using ADOBE AIR. Although the style generation tool is still a little inflexible in use, it is much more convenient than photoshop measurement, and the style can be directly generated, copied, and copied!

3. CSS Sprites are more troublesome to maintain. If there is a slight change in the page background, you usually need to change the merged image. It is best not to touch the areas that do not need to be changed. This way Avoid changing more css. If it cannot fit in the original place, you can only (preferably) add the image down. In this way, the bytes of the image will increase, and the css must be changed.

4. CSS Sprites are worth learning and applying, especially if the page has a bunch of icons. In short, many times we have to weigh the pros and cons before deciding whether to use CSS Sprites.

十 border-collapse:collapse

Eleven What are the differences and connections between position:relative,absolute,fixed?

Relative, absolute, floating. . . I’ve basically used it before and I won’t introduce it.

How to center a float:left element

margin-left:50%;  position:relative; left:width除2 。。。这个方法是我想的笨办法，如果有更好的可以提出 Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；hack。。。页面的规范！。。。好吧这玩意已经变成一种习惯了。。。基本一次成型怎木办IE6滤镜css3的部分属性兼容ie6，pie.js