Home > Developer > JavaScript
CSS learning notes-differences between the box model, block-level elements and in-line elements, and css learning notes
Today, I was planning to perform automated front-end Learning Based on my own plans, but I had to add a page when I received a task request in the morning. Since I had to turn to the front-end because of my work, my main focus has been on JavaScript. In fact, the foundation for CSS and HTML is really poor, today, when I was writing a page, it was delayed for a lot of time.
Reflecting on this, I do have a lot of deficiencies in these basic aspects, so my study notes in the future are mainly some of the problems I encountered at work and their solutions. There may be JS, CSS, and HTML. I will record what I learned every day to help lay the foundation for myself.
Today, I recorded several questions in the code process. These questions cannot be answered by myself:
1. What is the box model? Certainly not a simple div ..
2. What are the differences between intra-row elements and block-level elements and their characteristics?
3. What are the main types of CSS positioning mechanisms?
The first question: what is the box model? (The following is my summary of reading materials)
The box model is an idea for CSS to implement page layout:All the elements on the page are considered as a box similar to a gift box. The gift box may be packed in multiple layers, so the page elements are also composed of content, borders, and internal and external margins. Here, I would like to remind you that the box model regards elements as three-dimensional and does have spatial attributes. I will introduce them in detail later.
If you understand the concept of the box model, pay attention to the types of the box model.
Currently:Standard box model and IE Box ModelTwo box models. Their respective durations are as follows:
We can see their differences:
Standard box model:Element width and height = content
IE box model:Element width and height = (content + border + padding)
Because of these differences, cross-browser processing is troublesome. Of course, the two methods must be better than the standard box model. Here is a cross-browser solution:
Add the DOCTYPE statement to the top of the webpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In this way, all browsers will parse the page elements according to the W3C standard box model and meet the requirements of cross-browser.
As mentioned above, the box model is spatial, mainly manifested in the different layers of each part of the box. The order from top to bottom is
Border -----> content, padding -----> background-image -----> background-color -----> margin such
Therefore, you must note this when processing the style of page elements.
The second question: what are the differences and characteristics between intra-row and block-level elements? Summary:
A block-level element occupies only one row. By default, its width automatically fills the width of its parent element.
The element in a row does not exclusive to a row. The elements in the adjacent row are arranged in the same row. The line breaks only when the row cannot be arranged. The width varies with the content of the element.
Common block-level elements include:DivCommon elements in the line are:A,Span
If you want to set the width and height of an element and display it in rows, you can set the value of display to inline-block.
The third question: What are the main types of CSS positioning mechanisms?
1. Standard Document Stream format (from top down to left to right)
2. Floating float (mainly for block-level element settings)
3. Absolute positioning.
How about it? Is there a problem again... What is floating? What is absolute positioning? Life is a question and answer! These two problems will be solved tomorrow.
January 8, 2016
A thousand miles away
PS: most of the information I read comes from the Internet. If there is any infringement, please contact me to delete it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
