Home Web Front-end HTML Tutorial How much do you know about css (1)--I will ask you to answer_html/css_WEB-ITnose

How much do you know about css (1)--I will ask you to answer_html/css_WEB-ITnose

Jun 24, 2016 am 11:50 AM

1. Introduction

Dear front-end or pseudo-front-end comrades (such as the author himself), CSS is not very unfamiliar to you. For example, when I was in college a few years ago, I used CSS when making websites for external parties, and I had to use CSS. Calculating this way, it takes more than six years. Some functions may be familiar, and some functions may need to be checked online. It seems that I can handle things at work?? I was the same before (now I don’t do development at work, but I still write code in my spare time) ).

Nothing in the world is absolutely simple, it’s just that we think it is simple. Just like the current development situation of our company, the development environment has just been transferred to B/S. The development leaders used to use .net for C/S. In my opinion, they think that js and css are just that. , not very profound. But I still had an attitude of awe and bought a copy of "CSS Design Guide (Third Edition)". Regardless of whether I knew it or not, I read it all. After the book came back from the mail, I spent three nights reading it. I have a habit that when I do something, there must be a result. I can't just think that I understand it in my head. I must write it down or even give an example. So, I just wrote a few blogs. Benefit yourself and benefit others.

Below I will list down the things that I encountered during the reading process that I think are more important (we don’t have a strong grasp of them) or that I didn’t understand before. I will give you a few questions so that readers can try to think about them. If you know it all, then your foundation is very solid and there is nothing to say; if you don’t know something, just check the answer yourself if you are anxious. If you are not anxious, just wait for my blog introduction later.

We’ve talked a lot, let’s start now!

2. Question

 01. Some browsers do not fully support css3. Which tool can be used to detect whether the browser supports it and what items it supports?

Tip: Mo****zr

 02. Commonly used html tags, their display attributes generally default to block and inline. What are the common tags whose display is not block or inline? What is the difference between the display of these tags and block/inline?

Tips: table, input, textarea

03. Have you ever used @import?

 (relatively simple)

 04. The first row of a table displays a red background, the last row displays a blue background, and the middle row uses How to write gray/white spaced background?

Tip: Structured pseudo-class (relatively simple)

05. Have you ever used pseudo-elements ::before and ::after? Where are they used?

Tips: Clear floats and add a "triangle" to a div Important

06. css?? Cascading style sheet, how to understand the "cascading"? Important

Tip: Stacking means stacking one layer after another. The key is to know how many layers there are and what each layer is.

 07. Regarding "Special" How much do you know about "specificity"? Do you know the calculation rules of "I-C-E"? Important

Tip: refer to http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

08. It is not very troublesome to understand the specificity. The key is to analyze multiple css selectors and calculate the trouble. There is a simple solution, a four-sentence formula called "Charlie's version of simple cascading essentials". Do you understand? Repeat to

Tip: For example, "A selector containing an ID should be preferred over a selector containing a class..."

 09. Search for "browser default styles", find it, open it and see if you can understand all the default styles of the browser. Important

Tip: For example, what is the difference between display:table and display:block?

10. In the first line of the first css file of the system you develop, you must write * {margin:0; padding:0}. Why is this?

Tip: Browser compatibility (relatively simple)

11. Style p{margin-top:50px; margin-bottom:30px;} will What will be the vertical distance between p's?

Tip: Vertical margins...horizontal margins...?? Relatively simple basic knowledge

  12. Everyone knows the "box model" (don't know Quickly fix it! ), the width of the box model actually refers to the width of the content, excluding padding, border, and margin. In fact, this is very detrimental to our CSS layout. Is there any way to make the width the full width? Important

Tip: box-sizing (pay attention to the compatibility of lower IE versions)

13. Some of the effects of float will make us often It's hard to laugh or cry (especially for beginners). In fact, if you understand the original design intention of float, maybe you will understand these things. What is the original design intention of float?

Tip: Just a simple sentence...

 14. Float has "wrapping properties"?? For example:

abc

and

abc

The width of both is It's different. If you don't believe it, you can try adding a background color to p. Do you understand this "encapsulation"? Try to think about it, what other elements (or CSS attributes) also have this kind of "wrapping"? Repeat to

Tip: It is closely related to question 13

15. Another representation of float is " "Destructive", it will cause the parent element to collapse highly, everyone should know this, right? So why is this? In addition, which css attribute also causes this "destructive" Heavy

Tip: Both float and absolute will cause elements to leave the document Flow

(For questions 13, 14, and 15, you can refer to the tutorials http://www.imooc.com/learn/121 and http://www.imooc.com/learn/192, which are very detailed Okay, it’s just that the lecturer’s voice is very “magnetic”, so be patient)

  16. There are three ways to clear floating in css, do you know? How do you usually clear floats? What are the classic clear float styles most commonly used in the industry? Important

Tip: Search for "clearfix"

 17. How do you understand relative positioning, and what is the most fundamental difference between it and absolute positioning?

Tip: One is inside the document flow and the other is outside the document flow

18. Do you know the "positioning context"? Important

 19. How to implement the classic three-column layout of a web page? If IE6 and 7 are not considered, what is the best way to implement multi-column layout? Important

Tip: table-cell

20. Have you ever used inline-block? How is IE6 and 7 compatible?

Tip: It is relatively simple, just use Baidu

3. End

We have summarized so many questions, you can think of the answers based on the questions. If you think there is more important knowledge to write, you can leave me a message and I will consider joining.

In addition, next I will write a short series of articles about key css knowledge, and introduce these issues in this article based on the wangEditor rich text box I have made and my understanding of the bootstrap framework. I've been very busy with work recently, so updates may be slow, so stay tuned!

----------------------------------------------- -------------------------------------------------- ---------------

Welcome to follow my Weibo.

Also welcome to follow my tutorials:

"From Design to Pattern""In-depth understanding of javascript prototype and closure series""Microsoft petshop4 .0 Source Code Interpretation Video" "json2.js Source Code Interpretation Video"

---------------------------------- -------------------------------------------------- --------------------------

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

See all articles