CSS(II)

Box-Modeling/ Display & Positioning

On this week lesson more functions under the topic box-modeling were introduced, the likes of:

Overflow

Resetting defaults

Visibility

Border-box

overflow

is a scenario where the child in a parent container is too large for the parents to contain thus overflowing from the containing area. some common properties introduced to overcome this are:

hidden — when using this value, the element overflowing from the container is contained in the container, showing half of its content.

p{
 overflow: hidden;
}

visible — this is the default value where the overflowed content can be seen.

p{
 overflow: visible;
}

scroll — when used, any content overflowing will be hidden but a scroll bar will be added to the parent box and all content can be viewed by scrolling.

p{
 overflow: scroll;
}

resetting defaults

all stylesheets have a default value for margin and padding and affects how elements are displayed, it can also interfere with a developer's design making it difficult to code. the (*) function helps to reset margin and padding value of all elements to 0.

*{
 margin: 0;
 padding: 0;
}

visibility

this property can make an element be hidden from view, the contents can still be seen in the source code but will not be seen in the web page. such values used to manipulate the elements are:

Get Cyril’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

hidden — hides an element from the web page but still occupies space in the webpage

<ul>
 <li>Home</li>
 <li>About</li>
 <li class="cntc">Contact</li>
</ul>

.cntc{
  visibility: hidden;
}

the list with item contact will be hidden from view.

visible — displays an element

.intel{
 visibility: visible;
}

collapse — only for table rows and columns, basically removes the row or column.

#form{
 visibility: collapse;
}

border-box

the box-sizing determines how the width and height of an element are calculated excluding the border thickness and padding, by default the box-sizing value is set to “content-box” which excludes the border and padding when calculating, causing additional width and height. just like manually resetting defaults, a new property “border-box” includes the border and padding into calculation giving you more precise control on the width and height of a box.

After box-modeling, a new declaration in CSS style sheet that changes the position of a HTML element in a web page, some of the properties used for adjusting the element of a browser are as follows:

position

in HTML there are elements that take the full width of a line preventing other elements from appearing in the same horizontal space normally called “block-element”, with the position property the position of this element can be changed using these five values:

static — the default value of the position, it is positioned to normal flow of the web page

.green box{
 position: static;
}

relative — this value allows you to change position of an element relative to its static position (opposite), although its relative to its static position it does not specify the element should be positioned in a page, hence adding some other properties (top, bottom, left, right) it can be specified in pixels, percentile, ems.

.point{
 position: relative;
 top:50px;
 left: 120px;
}

absolute — when an elements position is set to absolute the element will be positioned relative to the closest ancestor and overlaps on another element with other offset properties( top, bottom, left, right)

.p{
 position: absolute;
 top: 300px;
 right: 0px;
}

fixed — with this value the position of an element remains fixed on the web page regardless of how much scrolling is involved, still visible throughout the web page.

.title{
 position: fixed;
 top: 0px;
 left: 0px;
}