Study Notes Chapter 11th CSS3 Layout Basics

11th Chapter CSS3 Layout Foundation "Learning Focus"

• Learn about the CSS2 box model.
• Design the border style.
• Design the boundary style.
• Design the filler style.
• Learn about the CSS3 box model.

11.1 CSS Box Model basics

All elements of the page are basically shown in a square box (box), and according to the box model rules, all the element objects in the page are placed in a box, and the designer can control how the box is displayed using CSS.

11.1.1 Box model structure

Box has the following features:

• Each box has: border, border, padding, content 4 properties.
• Each property consists of 4 parts: Top, right, bottom, and left. The four-part of a property can be set at the same time, or it can be set separately.

Contents (content) in the box of things, filling (padding) is afraid of things in the box damaged and added anti-seismic accessories, Border (border) is the box itself, the border (margin) is the box and the gap between the box.

Web page, the content can be a small box (nested structure), CSS box has filled in, the inside of something larger than the box itself to hold it up, but will not damage the box.

Any element in a Web page can be treated as a box.

11.1.2 Define Size

The CSS box uses width and height to define the size of the content area (contents) .

For a CSS box model, its actual width/height is equal to the width/height of the content area plus twice times the boundary, border, and padding .

In the IE Weird parsing mode (some browsers also support quirks mode, such as Firefox and Opera), CSS's Width/height attribute represents the width/height of content, padding, and border .

Users can also flexibly control the size of the CSS box model with the following 4 properties, which are useful in Web page resilience layouts.

• Min-width: Minimum width;
• Max-width: Maximum width;
• Min-height: Minimum height;
• Max-height: Maximum height.

11.1.3 defining borders

CSS uses border to define the border style, border includes 3 sub-properties: Border-style (Border Style), Border-color (border color), and border-width (border width).

1. Define width
   2. Specify the width value directly following the property.

      <style type="text/css">border-bottom-width:12px;border0  . 2em; </style>

   4. Use keywords, such as thin, medium, and thick.

      <style type="text/css">Border-Width:thick; </style>

   6. Sets the width for a single border of an element.

      <style type="text/css">border-bottom-width:12px;border0  . 2em; </style>

   7. Use the Border-width property to quickly define.

      <style type="Text/css">. div{Border-width:4px;/*define 4px for all four edges*/} #title {border-WIDTH:2PX 4px;/*define the bottom of the 2px, the left to the right is 4px*/} #article {border-width:2px 4px 6px;/*define top 2px, left to right 4px, 6px below*/
      } #ar2 {border-width:2px 4px 6px 8px;/*define top 2px, right 4px, 6px below, 8px on the left*/
      }
      </style>

3. Define color--color name, RGB color value, or 16 binary color value
5. Defining styles

There are several border styles:

• • • None: Default value, no border, not affected by any specified border-width value;
    • Hidden: Hidden border, ie does not support;
    • Dotted: Dot line border;
    • Dashed: dashed border;
    • Solid: Solid line border;
    • Double: two-line border, both lines and the interval width are equal to the specified Border-width value;
    • Groove: Defines a 3D groove according to the Border-color value;
    • Ridge: 3D convex groove is defined according to Border-color value;
    • Inset: Define 3D concave edge according to Border-color value;
    • Outset: Defines a 3D convex edge based on the Border-color value.

11.1.4 Defining boundaries

The margin of an element is controlled by the margin attribute, and margin defines the distance between the element and other neighboring elements. The margin property has 4 sub-properties: Margin-top, Margin-right, Margin-bottom, and Margin-left.

Margin can be negative, which forces the element to be shifted to its original position for relative positioning.

11.1.5 Defining fillers

Padding is used to adjust the distance between the element's content and the element's border, as defined by the CSS's padding property.

Unlike boundary margin, the padding cannot be negative. Fillers are as transparent as borders, and when you set the background color or border of an element, you can feel the presence of the filler.

11.2 CSS3 Perfect Box model

CSS3 improved the traditional box model structure, enhanced the function of box elements, and expanded the display mode of box model. Described below:

• Improved structure: Added contour area to the box;
• Enhanced Features:
  • Content area Enhanced CSS Auto-add content function, enhance content overflow, line-wrapping function;
  • Allow multiple definitions of background map, control the display of the background map, etc.;
  • Added kinetic energy such as border of background map, multi-border, rounded border;
  • Perfect Margin:auto;
  • Layout characteristics.
• Extended display: Improve the traditional block display features, increase the elasticity, telescopic box display function, rich Web page layout means.

11.2.1 Define display Mode

In order to take into account ie strange mode, CSS3 has improved the box model, defined the Box-sizing attribute, and can define the dimension analytic mode of box model beforehand. The basic syntax is as follows:

Box-sizing:content-box | Border-box | Inherit

• Conten-box: The attribute value maintains the CSS2.1 box model's constituent mode, element width/height=border+padding+content.
• Border-box: Attribute values redefine CSS2.1 box model composition mode, element width/height=content.

Currently, the WebKit engine supports-webkit-box-sizing private properties, the Mozilla Gecko engine supports-moz-box-sizing private properties, and the Presto engine and Internet Explorer directly support this property.

11.2.2 Defining Element size

CSS3 added the Resize property, which allows the user to change the dimensions of the element by dragging. Used primarily in any container element that can use the overflow property.

Resize:none | both | Horizontal | Vertical | Inherit

The Resize property has an initial value of none and applies to all elements that are not visible to the overflow property. The values are described as follows:

• None: The browser does not provide a sizing mechanism, and the user cannot manipulate the size of the element by manipulating the mechanism.
• Both: The browser provides a bidirectional resizing mechanism that allows the user to adjust the width and height of the element;
• Horizontal: The browser provides a one-way horizontal adjustment mechanism that allows the user to adjust the width of the element;
• Vertical: The browser provides a one-way vertical size adjustment mechanism that allows the user to adjust the height of the element;
• Inherit: Default inheritance.

In addition to IE browser, the most recent version of the mainstream browser allows the scaling of elements, but not fully supported, partially only allow bidirectional adjustment.

11.2.3 Overflow Handling

Overflow features in the CSS2.1 specification, while the overflow-x and OVERFLOW-Y attributes are the newly added features in the CSS3 base box model.

The overflow property defines whether the display is clipped when the contents of a block-level element overflow the element's box.

The Overflow-x property defines the cut for the left and right edges (horizontal direction), while the Overflow-y property defines the cut to the top (vertical). The basic syntax is as follows:

Overflow-x: Visible | Hidden | Scroll | Auto | No-display | no-content;overflow-y:visible | Hidden | Scroll | Auto | No-display | No-content;

The initial value of the Overflow-x and Overflow-y properties is visible, suitable for non-replacement block elements, or non-replaceable inline block elements. The values are described as follows:

• Visible: Do not cut content or add scroll bars. The element is clipped to the window size of the containing object, and the clip property setting is invalidated;
• Auto: Cut the content and add scroll bars when needed. The property is the default value for the body and TEXTAREA elements;
• Hidden: does not display content beyond the element size;
• Scroll: When the content exceeds the element size, the overflow-x is displayed as a horizontal scroll bar, and the overflow-y is displayed as a vertical scroll bar;
• No-display: When the content exceeds the element size, the element is not displayed, and a display:none declaration is added like this;
• No-content: When the content exceeds the element size, the content is not displayed, and a Visibility:hidden declaration is added like this.

11.2.4 Defining outlines

The Outline property defines the outline of the block element, which is clearly defined in the CSS2.1 specification and CSS3 enhanced by this attribute.

Drawing a contour line around an element can serve as a prominent element. The basic syntax is as follows:

Outline:[outline-color] | | [Outline-style] | | [Outline-width] | | [Outline-offset] | Inherit

• <outline-color>: defines outline border color;
• <outline-style>: defines outline border outlines;
• <outline-width>: defines contour border width;
• <outline-offset>: Defines the value of the contour offset position;
• Inherit: Default inheritance.

11.2.5 Defining Contour Styles

1. Set width--outline-width

   Outline-width:thin | Medium | Thick | <length> | Inherit

   The initial value is medium, which applies to all elements.

2. Set Style--outline-style

   Outline-style:auto | <border-style> | Inherit

   The initial value is none and applies to all elements.

3. Set Color--outline-color

   outline-color:<color> | Invert | Inherit

   The initial value is invert (performing a color reversal) and applies to all elements.

4. Set Offset--outline-offset

   outline-offset:<length> | Inherit

   The initial value is 0 and applies to all elements.

11.2.6 defining a multi-color border

The Border-color property can set the color of the border. However, CSS3 enhances the functionality of this property by using it to set more colors. The basic syntax is as follows:

border-color:<color>;

The Border-color property in CSS2 can be mixed, and when a color value is set for the property, a solid color is set for the border, and if you set n color values and the cut border width is n pixels, you can use n colors on that border, each of which displays a width of 1 pixels. If the border width is 10 pixels, but only 5 colors are declared, the last color is added to the remaining width.

Border-color derives 4 Border color properties: Border-top-color, Border-right-color, Border-bottom-color, Border-left-color.

11.2.7 defining the border background

CSS3 adds the Border-image property to simulate the Background-image property feature and is more powerful.

Border-image:none | <image> [<number> | <percentage>]{1,4}[/<border-width>{1,4 }

• None: The default value, which indicates that the border has no background map;
• <image>: Specifies the background image of the border using an absolute or relative URL address;
• <number>: Sets the border width or the border background image size, uses the fixed pixel value representation;
• <percentage>: Sets the border background image size, expressed as a percentage.

CSS3 divides the border-image into 8 parts, which are defined using 8 sub-attributes: Border-top-image, Border-right-image, Border-bottom-image, Border-left-image , Border-top-right-image, Border-top-left-image, Border--bottom-left-image, Border-bottom-right-image.

In addition, depending on the processing capabilities of the border background image, the Border--image property also derives the following properties:

• Border-image-source: Defines the background image source of the border, that is, the image URL;
• Border-image-slice: Defines how to crop the background image, which is different from the positioning function of the background image;
• Border-image-repeat: Defines the repetition of the border background image;
• Border-image-width: Defines the display size of the border background image (that is, the border display size);
• Border-image-outset: Defines the offset position of the border background image.

Study Notes Chapter 11th CSS3 Layout Basics