Font properties

  • Thickness of the font – weight

    • Attribute value: English word

      Attribute values instructions
      normal Default value to define standard fonts
      bold Defines the default values for bold characters, b, and strong tags
      bolder Define a bolder font
      lighter Define finer fonts

    • Attribute value: numeric type

      • The integer ranges from 100 to 900. The larger the number, the bolder the text.
      • Where 400 is equivalent to normal and 700 is equivalent to bold.

  • Font style

    • Effect: Sets whether text is displayed in italics.
    • Property value: word
      Attribute values instructions
      normal Set the normal font, the default for most labels
      italic Set italic text, as long as it is in English
      oblique Set slanted text, only the text slanted display, independent of the font

  • The high line – height

    • Meaning:

      1. Line height is the height that text really occupies.
      2. Text inside the line height is displayed vertically centered at the line height.

    • Attribute values

      Attribute values instructions
      Px pixel values Sets the specific pixel value for the row height
      Percentage value Sets the percentage of the pixel value of its size

    • In practical application, the value of row height is obtained from the design drawing, and some auxiliary software tools are needed to measure the value.

      • Fireworks software step 1: determine the text size and font. Using the Type Tool (T), write the same text and adjust the size and font until the text is exactly the same. This is the size and font you want. When creating, set a font color that differs greatly from the content text color.

        Step 2: Adjust the line height of the properties panel in pixels for the two lines of text that are aligned before and after the writing, based on the known size and font, and change the value until both lines are aligned.

  • Font synthesis font

    • Font attribute The values of five single attributes can be co-written, and the values can be from 2 to more, separated by Spaces.
    • writing
      1. There must be a size and font involved. Font in front, font in back.
        font: 14px "宋体";
Copy the code
      1. Font size, line height, font, and line height must be separated by a slash.
        font: 14px/28px "宋体";
Copy the code
      1. Set bold and italic, the two attributes can only be written at the front, the position between the two values can be exchanged, the size, line height, font position cannot change.
        font: bold italic 14px/28px "宋体";
Copy the code

Text attributes

  • Color color
  • Align horizontally with text-align
    1. Effect: Sets the horizontal alignment of text. In a box, each line is aligned in the corresponding direction, regardless of whether the text is single or multi-line.
    2. Property values: three directional words
      Attribute values role
      left Left-aligned, default value for most labels
      right In the right
      center Align center
  • Text decoration text-decoration
    • Effect: Sets whether the whole text has line decoration effect
    • Attribute values
      Attribute values instructions
      none Default value for most tags, no modifiers
      overline On the line
      line-through Underscore, delete line, default value for the <del> tag
      underline Underscore, the default value for the <a> tag
  • Indented text – indent
    • Effect: Sets whether to indent the first line of a paragraph.
    • Attribute values
      Attribute values instructions
      Px unit Represents how many pixels the first line is indented
      The em unit Indent the position of several Chinese characters in the first line (will automatically change according to font size)
      The percentage Represents the percentage of the width property value of the parent of the indent tag
    • In practice, attribute values in em are most often used
    • Attribute values distinguish between positive and negative values, with positive numbers representing right or down indentation and negative numbers representing left or up indentation.

Box model attributes

  • Meaning: Box model is also called box model.

  • Properties: Contains five properties that describe the location and size of the box.

    1. The width of the width

      • Effect: Adds the width of the element’s content area.

      • Attribute values

        Attribute values instructions
        auto The default value. The browser calculates the actual width
        px Width defined by the pixel value
        % Defines the percentage width that references the width of the parent element

      • Special applications

        1. The element does not have a width attribute. By default, auto calculates the actual width based on the element’s characteristics. If, for example, a <div> element occupies a single row, its width property automatically fills the width area of the parent element. If it is a <span> element that does not need a single line, the width attribute is the width that the internal element content automatically spreads.

        2. The <body> element is special; you don’t need to set the width attribute; the width automatically fits the width of the browser window.

    2. Height the height

      • Effect: Adds the height of the element’s content area.

      • Attribute values

        Attribute values instructions
        auto The default. The browser calculates the actual height
        px Height defined by the pixel value
        % Refers to the percentage height of the parent element height

      • For special applications, if the element does not have the height attribute, the default value is auto. The browser will automatically calculate the actual height, which is the height of the internal element content automatically spread. The height of the element ADAPTS to the height of the internal content.

    3. Padding padding

      • Effect: Sets the distance between the inside of an element’s border and the width and height area.

      • Features: Can load background, cannot write nested content

      • Attribute value: Usually in units of PX.

      • Padding is a compound property that can be divided into a single property in four directions depending on the direction of the inner margin.

      • Abbreviation (four notations)

        1. Four value method 👆, 👉, 👇, 👈
        2. Three value method 👆, left and right, 👇
        3. Binary method up and down, left and right
        4. One value method up, down, left and right

      • case

        • Make three sides with the same inner margin, one side is different
          1. Use four-value method and three-value method to set the attribute value
          2. Using the overlapping between the comprehensive attribute and the single attribute, set the single value method for the comprehensive attribute, set the same inner margin of the four edges, and then use the single attribute writing method to define the different attribute values in a certain direction again.
            div{<! -- Repeated parts of cascading composite properties -->padding: 12px;
    padding-bottom: 20px;
  }
Copy the code

    4. Border border

      • Function: Sets the boundary area outside the inner margin as the outermost layer of the box’s materialization.

      • Property value: consists of three values -> line width, line shape, and line color

        1. Line width: border – width

          • Attribute value: px value. Just like the padding, there are four different ways to write values.

        2. Linear: border – style

          • Property value: a word for a shape, which is a general property notation similar to the padding.
            Attribute values instructions
            none No border
            solid The solid line
            dashed Dotted line
            dotted Dotted border
            double double
            groove 3D groove frame
            ridge 3D ridge bezel
            inset 3D sag effect
            outset 3D highlighting

        3. Color: border – color

          • Attribute value: Overall similar to the padding comprehensive attribute writing.
            p {
    border-color: #f00 #f00 #f00 #f00;
  }
Copy the code

      • The border property is a compound property that can be divided in two ways as a single property.

      • 1. Top border-top 2. Right border-right 3. Bottom border-bottom 4. Left margin border – left

          p {
    border-top: 10px solid #f00;
    border-right: 20px dashed #0f0;
  }
Copy the code

      • Further subdivides according to direction and type

        • Single attribute: border- direction – type
          p {
    border-right-color: #0f0;
  }
Copy the code

    5. From the outside margin

      • Function: Sets the distance between boxes.
      • Features: Cannot render background
      • Attribute value: Usually in units of PX. (Note: The padding is exactly the same as the padding)

        1. A single attribute

        2. Four ways to write values for compound properties

  • Write the content area of the element: width+height

  • The area of the box that can be materialized: width+height+padding+border

  • Width +height+padding+border+margin

  • The box model figure

  • The box model extends applications

    1. Clear default styles

      • Most tags have a default browser-loaded style that affects the layout a bit. To prevent default styles from affecting the overall layout, be sure to clear them.
      • Inside and outside margins in box model attributes: Most container-level tags have default margins, either using union tag selectors (for large, efficient items) or wildcard clearing (for small items).
        • and < OL > both lists have default list prefixes: clear list-style: none;
      • the default style of the TAB, set the common style of the page: color and text-decoration: none;
      • Clear the default bold styles: font-weight: normal;
        body.div.p.h1.h2.h3.ul.ol.li.dl.dt.dd.td.th {
    margin: 0;
    padding: 0;
  }
  ul.ol {
    list-style: none;
  }
  a {
    color: #0f0;
    text-decoration: none;
  }
  h1.h2.b.strong {
    font-weight: normal;
  }
Copy the code
      • Give the tag an overall text style that most descendant tags inherit entirely.
        body {
    color: # 666;
    font-size: 16px;
    font-family: "consolas"."宋体";
  }
Copy the code

    2. Height application

      • If height is set: the height of the box is fixed, and subsequent sibling elements are loaded next to each other.
      • If the height is not set, the label is automatically opened based on the internal height of the label.
      • Using the <div> tag as an example, choose whether to set the height depending on the situation:
        1. Height must be set
          • Too much content inside the box will overflow the box area.

          • The Overflow property will overflow if the inner element is loaded higher than the parent. This can be resolved through overflow properties.
            Attribute values instructions
            visible Default value, overflow section display
            hidden The overflow part is hidden directly, hiding content that exceeds the border range
            scroll There are scrollbars in both horizontal and vertical directions with or without overflow. Without overflow, there are no sliders, but there are scrollbars.
            auto Automatic, if there is no overflow, the normal display, if there is overflow, overflow direction automatically appear scroll bar.

          Note: Scroll appears in both horizontal and vertical directions, while auto appears where overflow occurs. Textarea is a scroll bar that only appears in the vertical direction.

        2. The height must not be set
          • Requiring the box height to be adaptive to the height of the contents inside, or setting the height property to be automatic.

    3. In the middle

      • Text horizontally centered text-align

        • It can be set for either single or multiple lines.
          div {
    text-align: center;
  }
Copy the code

      • The text is centered vertically

        • Center a single line of text vertically so that the line height equals the height of the box.
        • Multi-line text is vertically centered so that the height of the element is adaptive or exactly equal to the height of the multi-line text. Set the inside margin of the element to be equal above and below.

      • The element is vertically centered

        • Meaning: A nested child element of an element, centered within the parent element.
        • Vertical center: Similar to multi-line text, the height of the parent element ADAPTS to the height of the child element, and the height of the child element automatically spreads over the height of the parent element, and sets the same height between the top and bottom of the parent element.
          .box {
    width: 300px;
    padding: 20px 10px;
    border: 1px solid red;
  }
Copy the code

      • The element is horizontally centered

        • If the width of the child box is less than the width of the parent box, you can set the margin value of the child box, and set the horizontal value to Auto.
        • The reason:
          1. Auto only works in the horizontal direction
          2. If the horizontal margin is set to Auto, the margin automatically increases indefinitely until it covers the entire parent element except for the child element width.
          3. If both horizontal directions are auto, both sides have to be infinitely large, and only one equilibrium can be reached, so the two sides are the same distance away, causing the box to be centered.
            .box {
    width: 300px;
    height: 300px;
    margin: auto 0;
  }
Copy the code

      • Why a row? Margin is automatically set for extra white space.

    4. Parent and child box model

      • Case: a parent element can contain one or more child elements, and to display multiple child elements in a row, the width of the parent element must be sufficient (regardless of overflow).
        • Follow the size: parent element width >= all child elements width+padding+border+margin
        • If the condition is not met: either extra child elements fall out of a row (multiple child elements) or overflow parent elements (single child elements).
        • Error Effect 1
        • Error Effect 2
      • The solution
        • When calculating or measuring the size, be sure to calculate accurately and not deviate a pixel.
        • Special case: box model automatically subtracted
          • In the parent-child box model, there is only one child element, and the child element is like the
            tag, which must be on one line.
          • If you do not set the width attribute of the child element, the child element’s width attribute automatically loads the parent element’s width. If you set the horizontal paddind, border, and margin of the child element at the same time, there is no need to manually subtract the child element. The width of the child element will automatically shrink.
          • The sum of all the horizontal positions of the child elements is equal to the width of the parent element.

    5. Margin collapse phenomenon

      • Meaning: If margins of two elements meet in the vertical direction, the true margin loaded in the browser is not the sum of the two margins, but the larger the median margin, and the smaller the margin falls inside the larger one.

      • classification

        • Sibling element collapse: the top element has a lower margin, the bottom element has a top margin, the two margins meet, and the actual box distance is the larger value.

        • Parent and child element collapse

          1. The parent element and child element are both set with the margin-top value in the same direction, and there is no other content (border and padding) between the two attributes for isolation, resulting in the encounter of the two attributes and margin collapse.

          1. The distance between the parent element and the previous element is 0, and if the child element is set to a vertical distance, it will fall with the parent element.

      • Solution to margin collapse problem

        1. Peer elements: Set in place at once. That is, if two elements are separated vertically, set it to only one element and do not split it.
        2. Parent-child elements: Keep the margins separate from each other. You can use the parent element border or padding to separate the margins. More commonly, the distance between the parent and child box models is not kicked out by the margin of the son, but by the padding of the parent.

      • Note: the horizontal margin does not collapse.