Home > Developer > CSS

CSS model frame learning notes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS model box Overview: the CSS box model specifies how the element content, inner margin, border, and outer margin are processed by the element box;

Illustration: the width and height are the width and height of the element content. The outer margin is transparent by default and will not block the elements behind it, in general, the background refers to the area formed by the content and the padding,
The padding, border, and outer margin can be applied to all edges of an element, or individual edges. The outer margin can be negative, in addition, in many cases, the outer margin of the negative value must be used;

1. Padding attributes: blank area between elements and borders. The padding attributes accept length or percentage values, but do not allow negative values;

 

 
<Table Style = "border-style: solid; border-color: black;"> <tr> <TD style = "border-style: solid; border-color: black; border-width: 1px; padding: 1 cm; "> set four identical margins </TD> <TD style =" border-style: solid; border-color: black; border-width: 1px; padding: 1 cm 2 cm 3 cm; "> set four different padding values: 1 </TD> <TD style =" border-style: solid; border-color: black; border-width: 1px; padding-top: 1 cm; padding-Right: 2 cm; padding-bottom: 3 cm; padding-left: 4 cm; "> set four different padding 2 </TD> </tr> </table>

:

2. Border attributes: border is one or more lines around the element content and the padding. The cssborder attribute allows you to specify the style, width, and color of the element border;

1. Border and Background: The border is drawn on the background of the element. The background of the element is the background of the content, padding, and border area. 2. Border style: border style is the most important attribute of border, because if there is no border style, there will be no border; 
 
<Table Style = "border-style: solid; border-color: black;"> <tr> <TD style = "border-width: 1; border-color: blue; padding: 1 cm; Background-color: red; "> If the border style is not set or set to none, the border will not appear. </TD> <TD style =" border-style: solid; border-width: 0.5; border-color: black; padding: 1 cm; Background-color: red; "> set the border style, set the border color to black </TD> </tr> </table>

:

3. Border Width: Specify the Border Width in two ways: You can specify the length value, such as 2px or 0.1em; or use one of the three keywords, which are thin and medium (default) and thick. 4. Transparent border: if the border has no style, there is no width. However, in some cases, you may want to create an invisible border; 
<Table Style = "border-style: solid; border-color: black; Background-color: Blue;"> <tr> <TD style = "border-style: solid; border-width: 0.5; border-color: green; padding: 1 cm; Background-color: red; "> set the border color to green </TD> <TD style =" border-style: solid; border-width: 0.5; border-color: transparent; padding: 1 cm; background-color: red; "> set the border color to transparent </TD> </tr> </table>

:

3. margin (outer margin) attributes: surrounding the blank area of the element border, this attribute value can accept any length unit, percentage, or even negative value;

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">  


 
:
 


 
 
 


 
Summary:
 


 
1. If the length or width value is a percentage, the percentage is calculated relative to the width of the parent element, and the element width is the width of the element content;
 


 
2. No border style;
 


 
3. Copy values:
 


 
     
 
  
       
   
    • Margin: Top right bottom left
      •  
   
    • Border: Top right bottom left
      •  
   
    • Padding: Top right bottom left
      •  
  
     

 


 
These values rotate clockwise from the top margin:
 


If three values are specified, the 4th values are copied from the 2nd values. If two values are given, 4th values are copied from 2nd values, and 3rd values are copied from 1st values. In the last case, if only one value is specified, the other three margins are copied from this value.
 


 
 
 


 
 
 


 
 
 


 
 
 


 
 
 


 
 
 


 
 
 


 
 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
andrew ng coursera machine learning notes frame php frame frame forwarding a4 frame frame bezel hdlc frame
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More