current position:Home>HTML and CSS summary, geek University architect training camp Baidu cloud

HTML and CSS summary, geek University architect training camp Baidu cloud

2021-08-26 02:01:39 Program ape ana

  • 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

        • transition: all 2s;

          • All animatable CSS Property modification , Will be in 2s Complete through animation in time
      • transform

        • translation

          • translateX(10px)

          • translateY(30px)

          • translate(10px, 30px)

        • The zoom

          • scaleX(0.5)

          • scaleY(0.5)

          • scale(0.5)

        • rotate

          • rotate(45deg): 2D plane rotation

          • rotateX(45deg): Around x Shaft rotation

          • rotateZ(45deg): Around Z Shaft rotation ( Follow rotate() similar )

          • rotateY(45deg): Around Y Shaft rotation

        • transform: translate(20px, 30px) scale(0.5) rotate(45deg);

      • animation

        • Use steps

      summary

      Large scale distributed system is like a life , Each service in the system is like a skeleton , The data is like blood , and Kafka Like meridians , Connect the whole system in series . This Kafka The source code notes are displayed through a large number of design drawings 、 The code analysis 、 Sample sharing , hold Kafka The implementation context of is displayed in front of readers , Help readers better study Kafka Code .

      You need to get this free of charge Kafka The iron juice of source notes , Please forward this article + Pay attention to me , then   You can get it here for free !

       Just this time ! Pinduoduo internal architect training Kafka Source notes ( Now out of print )

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

      Random recommended