above occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser’s handling of small windows. This is important when making a site usable on small devices:
element has a max-width of 500px, and margin set to auto.
Tip: Resize the browser window to less than 500px wide, to see the difference between the two divs!
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
The overflow property only works for block elements with a specified height.
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
#text-align
Only applied to block element
The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).
#outline
An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.(After border)
#boxmodel
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The max-width property is used to set the maximum width of an element.
width : calc(100% – 70px)
% – specifies a padding in % of the width of the containing element
f the padding property has four values:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
If the padding property has three values:
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
If the padding property has two values:
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
If the padding property has one value:
padding: 25px;
all four paddings are 25px
Although it is for padding but applicable for margin also.
margin:0 auto
auto: The browser sets the margin. The result of this is dependent of the browser
margin:0 auto specifies
* top and bottom margins are 0
* right and left margins are auto
If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
Space means descendant
color is referring to the text color in that element.
background-color refers to the background color
background is shorthand to combine many background tags into one line.
background: #ffffff url(“img_tree.png”) no-repeat right top;
overlay(cover the surface of (a thing) with a coating).
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
color: initial; /*Get the element default value instead of parent container*/
“text-align” applies to the content of a box, while “float” applies to the box itself.
align is a property to align a single element for table , text, span etc
float is a property to align block level elements like sidebar, div etc
display:
inline :Will ignore the width and height properties
inline-block:inline-block elements are like inline elements but they can have a width and height but not min-height and min-width .
block: a element with content padding border and margin .It can have min-height and min-width.
A CSS pseudo-element is used to style specified parts of an element.Some pseudo-elements are:
:first-letter
:first-line
:selection
:before
:after
A pseudo-class is used to define a special state of an element.
eg. :hover ,:active etc
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } |