current position:Home>Summary of HTML and CSS (1), introductory textbook of Java programming

Summary of HTML and CSS (1), introductory textbook of Java programming

2021-08-26 01:53:31 Program ape ana

  • By default, the element is still in accordance with the standard flow

Which elements are off label elements

  • Floating elements

    • float:left

    • float:right

    • Floating elements cannot be stacked

    • Floating elements cannot overlap with inline content

  • Absolute positioning elements

    • position:absolute

    • position:fixed

    • adopt z-index You can set the stacking order of elements

  Non nonstandard element


Block-level elements ( Basically non replacement )

  • div、p、pre、table、form、h1~h6

  • ul、li、ol、dl、dt、dd

  • header、footer、nav、section、article、aside

  • Monopolize one line

  • You can set the width and height at will

  • If the height is not set , The default height is determined by the content

In line elements

  • Replacement elements

    • img、input、iframe、canvas、object

    • video、audio

    • It can be displayed on the same line as other inline elements

    • You can set the width and height at will

  • Non replaceable elements

    • span、strong、a、em、i

    • It can be displayed on the same line as other inline elements

    • It is not allowed to set the width and height at will

    • If you don't set the width and height , The width and height are determined by the content by default

inline-block

  • It can be displayed on the same line as other inline elements

  • You can set the width and height at will

  • If you don't set the width and height , The width and height are determined by the content by default

 CSS attribute

========================================================================

  Box model


  • width、min-width、max-width

  • height、min-height、max-height

  • padding、padding-top、padding-right、padding-bottom、padding-left

  • margin、margin-top、margin-right、margin-bottom、margin-left

  • border、border-top、border-right、border-bottom、border-left

    • You can use borders to generate triangles

  • box-sizing

    • content-box

      • width barring padding and border,height barring padding and border
    • border-box

      • width = padding + border + Content width

      • height = padding + border + Content height

  • box-shadow

    • box-shadow: 2px 5px 10px 7px rgba(0,0,0,.2) inset

      2px: Shift right 2px

      5px: Offset down 5px

      10px: Blur radius ( Ambiguity , The bigger this is , The more obscure )

      7px: Diffusion radius ( The bigger the value is. , The wider the diffusion range )

      inset: Shadows are displayed inside the element ( If not inset, Look at what appears outside the element )

  • overflow

    • visible: Overflow content is still visible

    • hidden: Direct hiding of overflow content

    • scroll: Will always show the level 、 Vertical scroll bar

    • auto: It will automatically decide whether to display the scroll bar according to the overflow of the content

  • For inline non replacement elements (span、strong、a etc. )

    • margin-top、margin-bottom It doesn't work

    • padding-top、padding-bottom、border-top、border-bottom The effect is special

  • For block level elements ( such as div、p etc. )

    • There is margin-top、margin-bottom The problem of transmission ( Passed to the block level parent element )

    • There is margin-top、margin-bottom Folding problem (margin collapse)

    • Contains the width of the block = margin-left + margin-right + The actual width occupied by the block level element

  location


  • position:static

    • Default ( Non positioning elements )

    • Not out of standard flow

    • Cannot pass left、right、top、bottom Adjusting position

  • position:relative

    • Relative positioning ( Positioning elements )

    • Not out of standard flow

    • Can pass left、right、top、bottom Adjusting position

    • Locate the reference object : My original position

  • position:absolute

    • Absolute positioning ( Positioning elements , Absolute positioning elements )

    • Out of the standard stream

    • Can pass left、right、top、bottom Adjusting position

    • Locate the reference object :

      • The nearest locating ancestor element ( Find the nearest location element from the ancestor element )

      • If you can't find such ancestral elements , Then refer to the viewport (viewport)

    In many cases , The child element will be absolutely positioned with reference to the parent element , The common practice is : The son is the father

    • Subelement :position: absolute
    • Parent element :position: relative
  • position:fixed

    • Fixed position ( Positioning elements , Absolute positioning elements )

    • Out of the standard stream

    • Can pass left、right、top、bottom Adjusting position

    • Locate the reference object : viewport (viewport)

  • For absolute positioning elements

    • Contains the width of the block = left + right + margin-left + margin-right + The actual occupied width of the element

    • The height of the containing block = top + bottom + margin-top + margin-bottom + The actual occupation height of the element

For positioning elements , Sometimes I use left、margin-left Use in conjunction to center an element horizontally :

  • left: Half your width times minus one

  • margin-left: 50%

  written words


  • color: The foreground ( Text color 、 Border color 、 Text decorative line color ,#fff#ffffffrgb(255,255,255)rgba(255,255,255,.5)

  • text-align, Set the horizontal position of the content of the element in the element

    • left: Align left

    • right: Right alignment

    • center: In the middle

  • text-indent, Generally used to set the indentation of the first line of text

    • Common use :text-indent: 2em

    • Just indent 2 A word

  • text-decoration, Set text decoration line

    • underline: Underline

    • line-through: Delete line ( For example, the original price of e-commerce websites )

    • none: Remove the strikeout

  • text-overflow, Set the presentation of hidden overflow text content

    • clip: The overflow content is directly cropped

    • ellipsis: The overflow content is displayed with an ellipsis

Let an element always display only one line of text , And the overflow part displays an ellipsis :


      

    white-space: nowrap; /* Always show only one line of text */

    overflow: hidden; /* Hide overflow */

    text-overflow: ellipsis; /* The hidden content is represented by an ellipsis */

    
          

        typeface


      • font-family: Font name , You can set multiple font names , They are separated by commas

        • Generally, the English font is written in the front , The Chinese font is written at the back
      • font-weight: Set weight ( thickness )

        • 100~900

        • bold:700

        • normal:400

      • font-size: Set font size

        • font-size: 10px

        • font-size: 10%

          • Using the parent element font-size multiply 10%

          • Inheriting from the parent element font-size when , Inherited is the calculated value , Not direct inheritance 10%

        • font-size: 0.5em, Using the parent element font-size multiply 50%

        • width: 2em, Use your own font-size multiply 2

      • line-height

        • line-height: 20px

        • line-height: 20%, Use your own font-size multiply 20%

        • line-height: 2em, Use your own font-size multiply 2

        • line-height: 2, Use your own font-size multiply 2

        • If you want a line of text to center vertically , The common practice is :

          Set up line-height and height bring into correspondence with

      • font-style

        • normal: normal

        • italic: Italics

        • oblique: tilt

      • font

        • Abbreviated attribute

        • Format :font-size/line-height font-family

        background


      • background-color: Background color

      • background-image: Background image

      • background-repeat

        • repeat

        • repeat-x

        • repeat-y

        • no-repeat

      • background-position

        • background-position: 10px 20px

        • background-position: right top;

        • background-position: center top;

      • background-size: Set the size of the background image

      • background

        • Abbreviated attribute

        • Format :background: url("1.png") no-repeat left top/20px 20px #f00;

      CSS Sprite: Elves picture 、 Sprite pictures

        Animation


      Because the animation part has not been studied in detail , So skip

      • transition

        • Used to determine which CSS Attributes need to participate in animation

      Last

      I have also prepared a set of systematic architect learning materials package and BAT Interview information , For your reference and study ,  Get it free of charge here

      The knowledge system has been sorted out ( Source code , note ,PPT, Learning video ) Free collection .

       Insert picture description here

       Insert picture description here

       Insert picture description here

      copyright notice
      author[Program ape ana],Please bring the original link to reprint, thank you.
      https://en.qdmana.com/2021/08/20210826015328707Y.html

      Random recommended