CSS In Depth

发表于 更新于 分类于

reviewing the fundamental

cascade,specificity and inheritance

cascede

keep selector under conrtol

  • stylesheep origin
    • user agent style
    • author
    • author important
  • specificity
    • inline-style(HTML)
    • selector specificity
selector IDs classed tags notation
html body header h1 0 0 4 0,0,4
#page-title 1 0 0 1,0,0
  • source order(CSS)

inherit,initial(hard-reset)

Don’t confuse cascade with inheritance

shortand properities

Stay out of trouble with shortand properies

Working with relative units

Tip:use rems for font-size,pixels for borders,and ems for most other properties

em,rem

1
2
3
4
5
6
7
8
9
10
.padded{
    font-size: 16px;
    padding: 1em;
}
:root{
    font-size: initial;
}
.box{
    font-size: 1.2rem;
}

viewport-relative

  • viewport-relative
    • vh:1/100th of the viewport height
    • vw:1/100th of the viewport width
    • vmin:1/100th of the smaller dimemsion,height or width
    • vmax

custom properties(aka css variables)

caniuse
caniuse

1
2
3
4
5
6
:root{
    --main-font: Helvetica,Arial,sans-serif;
}
p{
    font-family: var(--main-font,blue);
}

unitless valus

use unitless valus when specifying line height

1
2
3
4
5
6
7
body{
    line-height: 1.2
}
.about-us{
    font-size: 2em;
    /* line-height: 2em*1.2; */
}

mastering the box model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:root{
    box-sizing:border-box;
}
*,
::before,
::after{
    box-sizing:inherit;
}

.main{
    width:70%;
    float: left;
}
.sidebar{
    width:calc(30%-1.5em);
    margin-left:1.5em;
}

nerver explicitly set the height of an element

difficuties with element height,columns of equal height

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper{
    margin-left: -1.5em;
    margin-right: -1.5em;
}
.container{
    display:table;
    width:100%;
    /* margin can't work */
    border-spacing:1.5em 0;
}
.main{
    display: table-cell;
    width:70%;
}
.sidebar{
    display: table-cell;
    width:30%;
}

  • how to center
    • table-cell,vertical-align
    • flex
    • absulute positioning
    • line-height

collapsed margin

margin collapsing only occurs with top and bottom

  • collapsing between text
  • collapsing multiple margin
  • collapsing ouside a container

mastering layout

mastering float

Tip: By using max-width instead of width to avoid horizontal scrolling on the devies with smaller screens.

clear float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.clear{
    clear: both;
}
.clearfix::after{
    display: block;
    content: " ";
    clear: both;
}
/* prevent margin collapse */
/* with ::after you can insert an element into the DOM at the end of container */
.clearfix::before,
.clearfix::after{
    display: table;
    content: " ";
}
.clearfix::after{
    clear: both;
}

Establishing a block formatting context

it isolates its contents from the outside context)

  • BFC Page:103
    • float:left,float:right
    • overflow:hidden,auto,scroll,
    • display:inline-block
    • position: absolute or fixed

flexbox

grid layout

0%