• 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、#ffffff、rgb(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 ：

Log in and copy

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 */

Log in and copy

  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 ！