containing block
i need to know who is the containing block so that i can position and size the elements.
the major rule is: i need to know the current status of the element to identify it's container.reversly if i know some element's status then i can identify what kind of elements it can contain.however the first segment of the rule is easier to implement.
hint:a positioned element is position:relative,absolute,fixed but not static.
hint:absolutely positioned is contained inside any positioned element!!!
hint:The containing block in which the root element (<html>) resides is a rectangle called the initial containing block. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).
hint:inline elements can not contain block-level elements and can only take padding and horizontal margin.however it can be positioned.once positioned the same rules for positinoed elements apply but block-level elements still can not be contained.
head to mdn/all about containing block for full details.
------------------------------------------------------------------------------------------------------------------------------------------- transformation
perspective&transform: lets the element to give 3d effect to it's direct children and become a block containing element to it's children.naturally thoes children will be positioned as fixed and can be positioned absolute.always define them as either positioned absolute or fixed for better control over them.
------------------------------------------------------------------------------------------------------------------------------------------- stacking context
after identifying if an element is a "containing block" TO HAVE the ability to size and position an element with great knowladge of what results to be expected.the "stacking context" term comes in.there are some scenarios that cause an element to be a "stacking context".however there are some major rules for identifying order and handling the stacking process.
see mdn stacking context
------------------------------------------------------------------------------------------------------------------------------------------- initial,inherit and unset
initial: resets the property to it's default value(CSS spec)
inherit: inherit the "nearest parent" value.
unset: if the property is "inherited:yes" it will be the same as "inherit".else if the property is "inherited:no" it will be the same as "initial".
something to note here is that when a property is not specified(not written inside a block of styles) this means the property is already there and is set with the keyword value "unset".
----------------------------------------------------------------------------------------------------------------------------------------
using url values for cursor image
cursor:url('image.cur'),pointer;
cursors can be customized to display images as cursor indicators beside the default keyowrds used to display the various cursor values.code above stands for:a utl image will be loaded to be the cursor indicator.the pointer keyword is a fallback value incase of the image was not loaded for any reasone.
cursor:url('image.png'),url(;image_2'),pointer;
multiple images are assigned as afallback in case the first one did not load..etc.the keyword is a fallback as well incase none of the urls loaded.
cursor:url('image.png') 10 20,pointer;
the code above is similar to the ones above with one exception,the corrdinates:
HOTSPOT is the point where the pointer points at.this point is by default is at the top-left corner of the image(hotspot will be at the image's top-left corner and the image top-left corner will appear from that point downwards).this is the default behavior.setting the x,y coordinates of the hotspot will change it's position INSIDE THE IMAGE diemensions(width and height) relative to the top-left corner of the image.the code above stes the htspot position to be at 20 20 pixel address inside the image dimensions starting positioning from the top-left corner.the image will position it self in opposite to the position of the hotspot.for instance if i set the coordinates of the hotspot to be at 20-x 10-y then the hotspot will go 20px to the right and 10px to the bottom.whilst the image will position itself opposite(20px to the left and 10px to the top) to the hotspot point of te cursor.
----------------------------------------------------------------------------------------------------------------------------------------
Margin collapsing
vertical margins (margin-top,margin-bottom) of adjacent elements "siblings" and nested elements "a father element and a child" collapse.with positive margins if they are equal then one collapse else the smaller collapse.on the other hand with negative values it is the same as positive "-50 is greater than -5" imagine there is no negative sign.finally if both negative and positive values the result then is a sum of both"-20+5=-15".to stop vertical margins from collapsing we can use:
1- BFC properties 2-padding or borders with the father(nested elements) 3-use either "margin-top" or "margin-bottom" not both.
----------------------------------------------------------------------------------------------------------------------------------------
css nested counters
nested counters is when two elements only get nested in each other .then counters(inedx,".") is used as it will count the nested elements inside.
for instance suppose any form of nested elements (two elenets only of a different types for example <div></div> and <aside></aside>).the counters() function will count only the nested elemnts down in the elements heirachy any main elements(elemnts that hold the nested elements inside them) will not be counted with this counter.different counter should be used to count the main elemnts.
<div>
<aside></aside>
<asied>
<div>
<aside></aside>
<aside></aside>
</div>
</aside>
</div>
div{
counter-reset:one; /*with each new div the counter will be reset to count the nested elements inside(<aside>)*/
}
aside:before{
counter-increment:one;/*with each asid element the counter will increment to count the nested elements*/
content:counters(one,".");/*the nested counter value is displayed next to it's matching nested element(notice that the main elements where not counted through out the process but were used to reset the counter to count the nested elements*/
}
----------------------------------------------------------------------------------------------------------------------------------------
mix-blend-mode
if we have two elements with whatever background they have then ONLY and i repeat ONLY the element that is sitting on top of the other can BLEND it's background with the background of the element(S) underneth it (backdrop element) REGARDLESS of the number of elements underneth it,that is, if i have for instance an element sitting on two elements then the background of element ON TOP will blend with the part(s) of background(s) of the element(s) underneth the front element. using mix-blend-mode property.
----------------------------------------------------------------------------------------------------------------------------------------
Background-blend-mode
for instance we have element that has a 1-background color 2- background image 3-another background image 4-infinite number of background images then a "background-blend-mode" would blend them all together because "background-blend mode" job is to look for 2 or more layers(color and images) in an element background
and blend them at once using one of it's blending values.
----------------------------------------------------------------------------------------------------------------------------------------
CSS HEIGHT
an element with height set as percentage ,keyowrd(initial inherit) or as high as it contains inside it.will not inherit from it's parent if it's parent's height also a percentage, keyword or as high as it contains inside it.however if this element is absoultely positioned then it can inherit even if it's parent's height is percentage,keyword or as high as it contains.
----------------------------------------------------------------------------------------------------------------------------------------
How to use (table-cell) with (vertical-align)?
1-element displayed as a "table-cell" can't use "vertical-align" when "floated".
2-"height" should be spcified in any unit other than <percentage> to have "vertical-align" work properly.
----------------------------------------------------------------------------------------------------------------------------------------
what is initial?
setting a property to initial; means that the initial value determined by the css specification is used on this property as a value.this is different from not setting any value for a property at all (like when we only declare elements with no styling assigned) because now user agent styling (browser styling) is applied and it is different from one to another. hence,when initial is not used either browser styling or developer styling is used.
revert?
it would set the property to the user agent (browser) styling specificly.
now a property can be set to be:
developer styling
browser styling-either by not including the property in the document at all.or by using revert
specification styling-initial
----------------------------------------------------------------------------------------------------------------------------------------
Alternative style sheets and titles
the order of <link> tags in the markup will decide which persistent style sheet to be applied at last along withe the previous ones (cassicading).alternative and prefered style sheets will apply:
the first prefered style sheet in the markup order will be applied on page load (along with) the persistent style sheet.other prefered style sheets if any and other alternate style sheets will apply once the user decieds to do so along withe the persistent style sheet.
when we say (along) means the order in markup will have it's effect
on the applied style sheet (persistent,alternate or prefered).prefered and alternate style sheets do not override because of their order in the markup.however persistent will override them if comes last in the markup order.`
----------------------------------------------------------------------------------------------------------------------------------------
what is <percentage>? (#1)
width: <percentage>
percentage here is not a <length> value however <length> value is assigned for that property using <percentage>.
width:50%;
50% of parent width "<length>" is assigned as a <length> value for "width" property.
"%" is a sign/measurement unit.
<number>%=<percentage> so we have:<length-percentage>,<time-percentage>,<angle-percentage>,<frequency-percentage>,<number-percentage>
------------------------------------------------------------------------------------------------------------------------------------
what is <percentage>? (#2)
<pecentage> goes to any property takes value as <number>.infact "%" only works with numbers or <number>.so that sign is a relative measurement unit and it is always relative to something specific to that element.something that relates the parent and the child element.
----------------------------------------------------------------------------------------------------------------------------------------
paged-media
absloutley positioned elements are not affected by the page-break-* properties and propably all the paged media properties(need to check that).
@page at-rule used to set margins (the area between page-content and page-box).the rest of the paged media properties page-breaks,orphans and widows are used inside @media print.
setting <body> margin inside @media print is similar to using margin: inside @page at-rule.however @page selectors need to be used to margin a specific page.
----------------------------------------------------------------------------------------------------------------------------------------
"%" relative to some value(property related)
"em" relative to the element "font-size"
1em = 1 font-size
"ex" relative to the element small "x" height of the font
1ex = 1 x-height
"ch" relative to the element '0' zero character width of the font
1ch = 1 '0' zero character width
"rem" relative to the root element (<html>) font-size
1rem = 1 <html> font-size
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.