css_faq

Posted on Edited on In ,
FAQ about CSS property

FAQ

Align element center/center

  • Align block element center with margin:auto the browser assigns half the remaining space to margin-left and the other half to margin-right, this is only works for block element so <img> not working, you need to change it display: block or display:inline-block.

  • Align text center

    1
    2
    3
    4
    5
    6
    7
    .center {
      margin: auto;
      width: 50%;
    }
    .text {
      text-align: center;
    }

    inline, block, inline-block difference

    Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element, it’s always set for real inline elment that wants width or height.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements

Note: for real inline element, you can set padding, border, background, but cant NOT set width and height.

what happens if content is too big to fix in the container?

The CSS overflow property controls what happens to content that is too big to fit into an area.

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

  • visible - Default. The overflow is not clipped. The content renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is always added to see the rest of the content at X/Y.
  • auto - Similar to scroll, but it adds scrollbars only when necessary.

web layout

float property used for what?

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container, the float limited inside the conainer!!!.

The float property can have one of the following values:

  • left - The element floats to the left of its container in the same line
  • right - The element floats to the right of its container
  • none - The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images. The image as a child of p tag or sibling of p have different effect. it’s floated inside the container!!!

Another good example, float makes the <li> sit side by side in the same line.

1
2
3
li {
  float: left;
}

display

The display property specifies if/how an element is displayed, every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can), we can prevent this by setting width property to prevent it from stretching out to the edges of its container.

1
2
3
4
5
6
7
8
9
10
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
<li>
<td>
<th>

An inline element does not start on a new line and only takes up as much width as necessary

1
2
3
4
5
6
7
8
<span>
<a>
<img>
<input>
<i>
<b>
<cite>
<strong>

As mentioned, every element has a default display value. However, you can override this, Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it but can set width, height the fake block!!!.

1
2
3
li {
  display: inline;
}
  • display: none, take no space from layout, seem no element
  • visibility:hidden; also hides an element. but it still takes the space(width and height) of layout, just can’t see it!!!
  • width: 0 and overflow: hidden, can’t see the element as well, but the element still takes(height) of layout. just can’t see it!!!

Flex

Flexbox is made for one dimensional layouts, there are two concepts here, flex container and flex items, flex container is a block element, any element with display: flex, it will behaves like a box starts a new line, scretch full width of it's container, all flex items behaves like inline-block, its width equals its content length, they sit one by one in one direction, but they are flexible, that means their width can grow(should set flex-grow) if there is free space left in the flex container or their width can shrink if there is less space in the conatiner. ther width are not fixed, even you set it explicitly. but there is the default behavior, you can change the default behavior by setting proper property.

As the width are not fixed, what’s the final value of flex items

  • initial value(width) = equal to content length or width if set explicitly.
  • may grow or shrink if allowed to the final width

flex container property setting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.flex_container {
  display: flex;

  // default: row
  // others: row-reverse, column, colum-reverse
  flex-direction: row;
  //default: nowrap: all items always in the same line
  flex-wrap: nowrap

  //OR shorthand for above two
  flex-flow: row nowrap;

  // align-items specifies the default alignment for items inside the flexible container.
  // default: scretch
  align-items: center;
}

grow and shrink on each flex item
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container, it grows only when there is free space left after the initial value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.flex_item {
  //default: auto, width == content length.
  //others: flex-basis: 100px, flex-basis: 20%(20% container's width)
  flex-basis: auto;

  //default: no grow, shrink euqaly, make on item grow, other not
  // the grow element will take the rest space of its container!!
  flex-grow: 1;
  flex-shrink: 1;

  //shorthand for above three with below order
  //1. flex-grow
  //2. flex-shrink
  //3. flex-basis
  // default: 0 1 auto
  // others: flex:auto    == 1 1 auto
  //         flex:initial == 0 1 auto
  //         flex:none    == 0 0 auto
  
  flex: 0 1 auto;
}
.flex_item_large {
  //default: auto, width == content length.
  //others: flex-basis: 100px, flex-basis: 20%(20% container's width)
  flex-basis: auto;
  //2 times grows tha others
  //let's take an example, 60px free space, two flex items, flex items grow, the large one gains 40px, the other one gains 20px. same thing for shrink.
  flex-grow: 2;
  flex-shrink: 2;
}

More examples refer to Flex example;

Main difference between display: flex; and display: inline-flex; is that display: inline-flex; will make the flex container an inline element while its content maintains its flexbox properties.

ALign of flex

  • align-items: specifies the default alignment for items inside the flexible container vertically
  • justify-content: aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally)
  • align-content: modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines only valid with wrap property set, as in that case more lines can happen for flex items.
  • align-self: specifies the alignment for the selected item inside the flexible container, the flexible container’s align-items property.

It only works for the direct children(which is called flex items), it does not affect the elements inside each items

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex">
<!--flex has three flex items
  1. div.inner
  2. <span>
  3. <i>
  4. #Text with yes
-->
  <div class="inner">
    Hello
  </div>
  <span>World</span>
  <i class="fas fas-book"></i>
  Yes
</div>

Wrap means if flex item width is over the container’s width, the item starts with a new line, by default no wrap that means each item will shrink to hold the item in the same line.

Note: Use the align-self property of each item to override the align-items property

can fixed item be flex item?

element with position: fixed itself can NOT be flex item, but Can be flex container. if you check flex layout with developer tool, you will see such item is not flex item!!! that means flex setting not work for such item!!!

Grid

Grid is made for two dimensional layouts, Row and Column. Grid will give you more flexibility, you can control how row and column display. each row is spilitted into columns, the direct children(grid item) fall into each column automatically.

Grid Container

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  //default no gaps for row and column
  grid-row-gap: 10px;
  grid-column-gap: 20px;
  
  //OR shorthand, if same value grid-gap 10px;
  grid-gap: 10px 20px;
}

Explicity container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.grid-container {
  display: grid;
  // explicit 4 columns
  //The size(width) of the columns is determined by the size of the container and on the size of the content of the items in the column
  grid-template-columns: auto auto auto auto;
  //OR only depends its content
  grid-template-columns: max-content max-content max-content max-content;
  //OR fix length repeat(4, 100px) or repeat(4, 10%)
  grid-template-columns: 100px 100px 100px 100px;
  //OR
  grid-template-columns: repeat(4, 10%);

  //Specify the first two row size(height), it's tempalte, that means
  // the second row in real may not there but if it's there, it has 300px height.
  grid-template-rows: 100px 300px;
}

As explicit container only says part of column’s width and part of row’s height.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.grid-container {
  display: grid;
  //Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor
  //the last two columns take all rest space in proportion
  grid-template-columns: 100px 100px 2fr 1fr;
  //the last columns take all rest space!!
  grid-template-columns: 100px 100px 100px 1fr;
  //if we have 9 grid items, the 9th items starts a new row, we did not say the height for that row
  //it use default row height and default column width which is defined below.
  grid-template-rows: 100px 300px;

  //set default row height value for implicit grid row, column in that row use default width set by grid-auto-columns
  grid-auto-rows: 50px;

  //implicit tracks: This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.
  grid-auto-columns: 200px;
  grid-auto-columns: 100px 150px 390px;
}

dynamic columns
Above the grid has fixed column number, even there is free space left in the row, but auto-fill keyword creates as many tracks as fit into the grid container without causing the grid to overflow it, same thing for auto-fit except that after grid item placement it will only create as many tracks(columns) as needed and any empty repeated track collapses.

1
2
3
4
5
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-gap: 20px;
}

Grid item
By default each grid item takes one column from one row but you can change the default behavior to let one item to take more columuns and more rows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.item1 {
  //item1 takes two rows starting from row 1
  grid-row: 1 / span 2;
  //item1 starts from row 1, end row3(not include), two rows
  grid-row: 1 / 3;

  //item1 takes two columns starting from colum 1
  grid-column: 1 /span 2;
  //span 2 columns, the start depends on location.
  grid-column: span 2;
  //item1 starts from column 1, end column3(not include), two columns
  grid-column: 1 / 3;

  //OR
  //shorthand for above
  // grid-area: grid-row-start / grid-column-start /grid-row-end /grid-column-end;
  grid-area: 1 / 1 / span 2 / span 2;
}

Most of time, we use named area to do this, as it’s easy to understand.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//NOTE: NO "" quotes for each area name!!!
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  //as you can see six columns
  //header takes 5 columns + unamed columns
  //menu takes 1 column + across two rows
  grid-template-areas:
    'header header header header header .'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Note

Flex and Grid are note standalone, you can use Flex inside Grid, combine them, also Flex can achieve grid system this’s boostrap4 does.

Bootstrap grid system

Bootstrap3 uses float/width and more hacks to achieve its grid system, from bootstrap4, it uses CSS flex box to do this, as flex is widely supported by most browsers, CSS Grid is more powerful, but not all browsers support it, but someday in future, after it’s widely supported, bootstrap may change its grid system to use CSS Grid.

CSS grid is currently not an official standard (it is a W3C Candidate Recommendation) although it has been adopted by most major browsers, as of October 2017, Chrome, Firefox, Safari and Edge all support CSS grid without vendor prefixes.[3][4][5] IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera Mini and UC Browser.

Bootstrap grid vs CSS grid for the same layout
responsive layout

web layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-4 navigation-menu">...</div>
      <div class="col-xs-12 col-md-6 col-lg-8 main-content">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 footer">...</div>
    </div>
  </div>
</body>

CSS Grid is more cleaner

1
2
3
4
5
6
7
8
<body>
  <div class="container">
    <div class="header">...</div>
    <div class="navigation-menu">...</div>
    <div class="main-content">...</div>
    <div class="footer">...</div>
  </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
...
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.header {
  grid-column: span 12;
}
@media screen and (max-width: 768px) {
  .navigation-menu {
    grid-column: span 6;
  }
  .main-content {
    grid-column: span 6;
  }
}
@media screen and (max-width: 480px) {
  .navigation-menu {
    grid-column: span 12;
  }
  .main-content {
    grid-column: span 12;
  }
}
.footer {
  grid-column: span 12;
}

Browser extensions to CSS

CSS defines the standard way(property name, value) that all browser should support, but some browsers support it in their own way that’s the extension for, browser extensions are only valid for that particular type of browser, if you only use the standard CSS property, the style may not take effect in some version of browser, so check that if browser supports it at canIuse;

Firefox Chrome Microsoft(IE)
prefix -moz-xxx -webkit-xxx -ms-xxx 
1
2
3
4
5
6
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
  }

how to change the cursor when it moves to element

1
2
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:wait">wait</span><br>

input with icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

//Animated Search Input
input[type=text] {
  width: 100px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

Note: In real world, you don’t need to write property for each browser as it could be done by tool like PostCSS;

how to make a round or oval

let’s say we have an element like div or img how to make it a round or oval, use border-radius: 50%

1
2
3
4
5
6
7
8
9
10
11
12
.img {
    display: inline-block;
    width: 100px;
    height: 100px;
    // as width == height, so it's round, if width != height, it's an oval
    border-radius: 50%;
}

div {
    background-color: red;
    border-radius: 50%;
}

set multiple imgs as background

For some case, you may want to set multiple images as a background for an element, CSS allows us to do this and set peroperties for each imge seperately. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer, if overlap happens, you see the first image for overlap part.

1
2
3
4
5
6
7
8
9
10
#example1 {
  // set each img seperately
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}
//ShortHand
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

gradients only for color!!!

CSS gradients let you display smooth transitions between two or more specified colors

1
2
3
#grad {
  background-image: linear-gradient(to right, red , yellow);
}

How to set shadow?

There are two kind of shadowns text-shadow and box-shadow;

1
2
3
4
5
6
7
8
h1 {
  text-shadow: 2px 2px red;
}

// box shadow
div {
  box-shadow: 10px 10px grey;
}

how to use web font which is not installed on client computer.

1
2
3
4
5
6
7
8
9
10
@font-face {
  // use font-face to define a font-family which refer to web font
  font-family: myFirstFont;
  // client(browser will download the font automatically
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

transition/transform/animation

transform

CSS transforms allow you to move, rotate, scale, and skew elements based on the center of element itself.

  • 2D transforms: X, Y
  • 3D transforms: X, Y, Z

Transform performs on any element.

Both 2D and 3D use the same property, but 2D only support X,Y function, 3D added Y function.

  • The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis)
  • The rotate() method rotates an element clockwise or counter-clockwise according to a given degree
  • The scale() method increases or decreases the size of an element (according to the parameters given for the width and height)
  • The skew() method skews an element along the X and Y-axis by the given angles.
  • The matrix() method combines all the 2D transform methods into one, the parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
1
2
3
4
5
6
7
.div {
  // 2 times width, 20deg skew, move 100px on X-axis, 50 px on Y-axis
  transform: matrix(2, 20deg, 20deg, 0.5, 100px, 50px);
  //rotate is only for 2D, not a combine with rotateX and rotateY which is provided by 3D
  transform: rotate(10deg); //rotate clockwise
  transform: rotateX(10deg); //rotate on X-axis
}

transition

CSS transitions allows you to change property values smoothly, over a given duration. you have to specify

  • allowed property(default all)
  • when it happens
  • how long it keeps
    At last set the value change to trigger the transition
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div {
  width: 100px;
  //allowed
  transition-property: width;
  //how long
  transition-duration: 2s;
  //effect others: ease, ease-in, ease-out, ease-in-out
  transition-timing-function: linear;
  //delay before happen
  transition-delay: 1s;

  //shorthand
  transition: width 2s linear 1s;
}
div:hover {
  width: 200px;
}

//Change Several Property Values
div {
// multiple properties must be in signle line, that means at most one transition property set.
  transition: width 2s, height 4s;
}
div:hover {
  width: 100px;
  height: 200px;
}

animation

An animation lets an element gradually change from one style to another. the style includes several properites
You can change as many CSS properties you want, as many times you want

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  //animation setting
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite; // can set 3 times
  animation-direction: alternate;

  //Shorthand
  animation: example 5s linear 2s infinite alternate;
}

@keyframes example {
  // styles for each frame
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

negative value in top/left/right/bottom and margin

1
2
3
4
5
6
7
8
9
10
11
12
.div {
  //the offset if relative to its normal position.

  //move left margin of element to left direction 5px: move close to left element
  margin-left: -5px;
  //if the right element besides it at same row, the right element move left 5px
  margin-right: -5px;
  //move top margin of element to top direction 5px: move close to up element
  margin-top: -5px;
  //the closest down element besides it, the down element moves up 5px
  margin-bottom: -5px;
}

top/left/right/bottom value

  • If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor

  • If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.

The value can be

  • length Sets the left edge position in px, cm, etc. Negative values are allowed
  • % Sets the left edge position in % of containing element. Negative values are allowed, 10% if container is 100px, 10% means 10px!!!
1
2
3
4
5
6
7
8
div.b {
  position: absolute;
  // 0px means edge of its container, -10px means move left 10px of its container's left edge
  left: -10px;
  width: 100px;
  height: 120px;
  border: 3px solid blue;
}

what’s the difference for width and max-width

width has a fixed length, no matter the viewpoint, if viewpoint is small, scroll bar is added
max-width: it limits the max length of the element when brower is large, but when viewpoint is small, no scroll bar!

hence same value for width and max-width, max-width is responsive.

how to define large button

Acutally button size is determined by font-size, if font is large, the button is large as well. but you can set its width like this

1
2
3
4
5
.button1 {width: 250px;}
// depends on container size
.button2 {width: 50%;}
.button3 {width: 100%;}
}

how to resize element by drag

The resize property specifies if (and how) an element should be resizable by the user.

1
2
3
4
5
6
div {
  // other values: both, vertical
  resize: horizontal;
  overflow: auto;
}

beatiful tooltips

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  /* the parent must set position with relative, otherwise the offset top, left will used body as ancestor */
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

debug css by firefox

The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific, some from itself, some from its parent. see below

cross-line with attribute mean it’s overwritten!

s

A warning icon appears next to unsupported or invalid styles. This can help you understand why certain styles are not being applied:
invalid style

rule display
rule display

px/em/rem/vw/fr

  • px: fixed size
  • em: relative to it’s parent
  • vw: 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. font-size is responsive!!!
    1
    2
    3
    4
    child {
      font-size: 2em; //relative to parent's font-size
      width: 2em; //relative to itself font-size
    }
  • rem: relative to root

Note: font-size: 16px by default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}
</style>
<div>
  我是父元素div
  <p>
    我是子元素p
    <span>我是孙元素span</span>
  </p>
</div>

css useful snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//“Responsive” media
img, video, audio {
  max-width: 100%;
  height: auto;
}

//Box sizing
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

//
.🦄 {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate (-50%, -50%);
}

what’s value for css property.

As you know that property can be inherited from its parent, but not ALL properties support this, that means for a property that’s not set explicitly from inline style, internal style, external style, its value depends on what type it’s

Value of a property which is Not set explicitly

  • default value (non-inherited properity)
  • its parent value (inherited property)

default value for css

Actually, most of properties can be NOT inheritid.
Inherited Property

  • color
  • font-size
  • font-family
  • font-weight
  • font-xxx
  • list-style
  • list-xxx
  • visibility
  • text-indent
  • text-transform
  • text-align
  • text-shadow
  • :hover

height and width for an element

defaut value

It depends on the type of elmenent, auto means different

inline element you can’t set height and width

  • height: auto means the height of its content
  • width: auto means the length of its content

block element you can set height and width

  • height: auto means the height of it’s content
  • width: auto means scratch the full of its container

element with position: fixed like inline but without container
As fixed element out of document flow, its width and height equal its content length if not set explicitly
otherwise belong to user setting.
div with position: fixed will not start a new line and scretch its container, as it out of document flow.

explicit setting

explicit setting has the highest priority than others, element always belongs to it if set.

1
2
3
div.a {
    height: 100px;
}

Note: position property can effect height and width as well if set in pairs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.a {
    position: fixed;
    top: 0;
    bottom: 0;
    //the height is the entire viewport
    //same thing for left and width as well!!!
}
div.b {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100px;
    //bottom not working, start from top 0 with height 100px(which has high priority)
}

how to use relative and absolute and fixed

  • static Default value. Elements render in order, as they appear in the document flow
  • absolute The element is positioned relative to its first positioned (not static) ancestor element, it must have a parent with(fixed, relative, sticky)
  • The element is positioned relative to the browser window
  • The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position
  • The element is positioned based on the user’s scroll position

Note: the absolute and fixed element behaves like inline element not scretch at all even it’s block element. but relative still remains

Ref