Which part of the box model does the outline property belong to? Is the outline css property part the margin?
The outline property is not part of the CSS Box Model.
18.4 Dynamic outlines: the outline
property
Outlines do not take up any space.
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top, and does not influence the
position or size of the box, or of any other boxes.
Since the outline does not affect formatting (i.e., no space is left
for it in the box model), it may well overlap other elements on the
page.
Related
I was going through the MDN website to learn about the clip-path property. Here is the link : https://developer.mozilla.org/en/docs/Web/CSS/clip-path
Now, I understand most of what the website says but I don't understand the following parts. Could anyone please explain them to me preferably with a demo?
<geometry-box> If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path.
fill-box uses the object bounding box as reference box.
stroke-box uses the stroke bounding box as reference box.
view-box uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
My questions are what exactly is a geometry-box and what does reference box mean in the context of clipping?
How is a reference box useful during clipping?
What is a stroke bounding box? Is it related to SVG?
Can you please provide a working example with all these values?
So, I am reading through the CSS spec on W3 site, and I came across the use of the word "non-positioned" which I am having a hard time picturing. Please see below use.
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
My question is/are,
what is a non-positioned box in CSS context? Is it a box in normal-flow? Or a box that does not have style property position explicitly set?
What does the first paragraph up there mean?
I mean what does the spec. mean by the
"current and subsequent line-boxes created next to the float are shortened to make room for the margin box of the floated-box"
when the floated-box is OUT-OF-FLOW?
Thanks in advance for your answer.
Three paragraphs above the one you quote, it says "The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property."
So it is worth noting that the language used in the quote is not as precise as is usually is in the CSS spec.
what is a non-positioned box in CSS context?
Here it means a box of an element whose position property has the value static That is, it always true for position:static elements. However, the quote does not imply that it is always false for boxes with other position values.
Is it a box in normal-flow?
It's similar. Normal flow contains boxes that are position:static and position:relative and which are not floated elements.
Or a box that does not have style property position explicitly set?
Not necessarily. Elements are position:static by default, but could be explicitly set to static too.
what does the spec. mean by the
"current and subsequent line-boxes created next to the float are shortened to
make room for the margin box of the floated-box"
In a (say) div element, the text is laid out as a stack of line boxes. If there is an immediately preceding float, The <div> element will go "behind" the float. You can see this by, say, reducing the opacity of the float and putting a background-color on the div. But the text won't go behind the float, because the text goes in the line boxes, and the line boxes avoid the float. See this jsfiddle.
I am a newbie of CSS3, and recently I am learning the border-image attributes, when I read the W3C documents:
http://dev.w3.org/csswg/css-backgrounds/#border-image-width
I found the following lines:
The border image is drawn inside an area called the border image area.
This is an area whose boundaries by default correspond to the border
box, see ‘border-image-outset’.
so, what exactly the "border image area" and "border-box" mean? and what's the effects of border-image-width and border-image-outset?
I think the W3C documents don't explain it very clearly.
thanks in advance!
The border box is defined as everything within the outer perimeter of the borders of a box, including the borders themselves, if any. This definition is given in this section of CSS2.1. If there are no borders, then it's the perimeter of the padding box (or, if there's no padding either, then the content box). The border image area is defined as the entire area of the border box, including the padding and content.
So if you have a box with a border width of 30px, then the border image fits into the 30 pixels surrounding the box by default. When you specify a value for border-image-outset, the image is rendered that set distance away from the border area, making it appear further away from the padding/content edge.
Note that border-image-outset by itself does not stretch the border image; it only shifts the border image area a set distance away from the border area. If you want to stretch the image as well, combine border-image-outset with border-image-width.
My understanding of them isn't perfect, but, from use I have found that:
The border image area is the area surrounding your content. If you set a 1px border, then it's 1px. If you use an image of say, 90 pixels in height for a border, and the border is 30px, like so...
XoX
o o
XoX
So X is the corner, o is a side. Anything in this area is the border box.
My intention is to have 4 main Nav-bars at a site. If the user hovers one, it expands and should show content. But how should I do the content part?
#bottom-menu:hover #contact{
visibility: visible ;
}
If I make it visible when the box is fully expanded, it works but there is an issue: The content, while not visible, is still there and needs room which causes the layout to collapse.
I would like to do that with pure CSS, allthough i'm aware of jQuery.
http://jsfiddle.net/RbZwx/1/
visibility: hidden causes the element to continue to consume layout space.
display:none causes it to take up no layout space.
Think "spoilers" vs "hidden".
https://developer.mozilla.org/en/CSS/visibility
The visibility CSS property is used for two things:
The hidden value hides an element but leaves space where it would have been.
The collapse value hides rows or columns of a table. It also collapses XUL elements.
https://developer.mozilla.org/en/CSS/display
The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.
In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all child elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
I would still encourage you to read both of these, and to learn how they affect the page more than just for this particular case.
Use display: none. See CSS 2.1: 11.2 Visibility: the 'visibility' property:
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings: [...]
hidden The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
I'm want to have a div with class "a" to be invisible. I've tried already to give it the display: none; line in the CSS file but what it does is hide it, yet it doesn't catch any space and so all my other boxes don't stay in place.
Is there a way to do this using CSS?
add .a{visibility: hidden} to your CSS. More about it here:
http://reference.sitepoint.com/css/visibility
visibility:hidden should hide the element, while keeping it's space so as not to move your other elements around.
You can use visibility css property. From sitepoint reference -
This property specifies whether an
element is visible—that is, whether
the box(es) that are generated by an
element are rendered.
Note that even if a box in the normal
flow is hidden, it still affects the
layout of other elements, unlike the
behavior that occurs when we suppress
box generation altogether by setting
display to none. Descendant boxes of a
hidden box will be visible if their
visibility is set to visible, whereas
descendants of an element for which
display is set to none can never
generate boxes of their own.
More information can be found here.