CSS
17 Jul 2018Box model
</img>
border-width:
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:
box-sizing: content-box/ border-box
line-width: normal/1.6/30px/0.8em
margin
margin-top
margin-bottom: 2px/3em/10%/auto
margin-left
margin-right
height:
max-height: none/2000px
max-width:
min-height: 0/200px
min-width:
padding
padding-top:
padding-bottom:
padding-left:
padding-right:
width: auto/240px/50%
overflow: auto/hidden/visible
background-cli: border-box/padding-box/content-box
display: block/inline/inline-block/positioned/table/flex
- You can use unitless values: the line height will be relative to the font size.
line-height: 1.6; - You can use pixel values.
line-height: 30px; - You can use em values: like with unitless values, the line height will be relative to the font size.
line-height: 0.8em;
Flexbox
Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
flexbox
align-content: stretch/flex-start/flex-end/center/space-between/space-around/
align-items: flex-start/flex-end/center/baseline/stretch
align-self: auto/flex-start/flex-end/center/baseline/stretch
flex-basis: auto/80px/
flex-direction: row/row-reverse/column/column-reverse
flex-flow
flex-grow: 0/1
flex-shrink: 0/1
flex-wrap: nowrap/wrap/wrap-reverse
justify-conent: flex-start/flex-end/center/space-between/space-around
order: 0/1/-1/9