Note về CSS cơ bản Layout and positioning

57

A) Position content

  1. Display:{block, inline, none} none: vị trí không gian của element bị loại bỏ như thể element chưa có ở đó.
  2. Visibilty:{hidden} Vị trí của element vẫn tồn tại nhưng thay bằng khoảng trắng( đã hiển thị/ display nhưng ko nhìn thấy trên browser)
  3. Width (mô hình content-box): {max-content, min-content, 100%, 300px} min-content: dùng trong trường hợp ảnh và caption. (IE ko support thuộc tính min-content) Ví dụ:

     
  4. Box-sizing: {content-box, border-box}
    * {
        box-sizing: border-box; //padding và border được tính toán rồi mới tính box size (box size đã bao gồm cả padding và border)
    }

     

  5. Float và clear float: Thuộc tính để đưa block content căn lề trái/phải của containing element. Chú ý, thông thường block content sẽ chiếm toàn bộ chiều ngang của containing element, tuy nhiên thuộc tinh float:left cho phép các nội dung tiếp theo sau nó được đặt vị trí như inline. Những content khác sẽ được đặt bên phải của floated content.

    Clearing Floats

    The float attribute also affects how subsequent content is positioned. The floated element is aligned to the left or right, but also, subsequent content can continue inline instead of starting a new row like normal blocked content. To illustrate that, the following markup creates four div elements and using inline styling to explicitly set the float attribute.
    <section>
        <div style=”float: left; padding: 25px”>div 1</div>
        <div style=”padding: 25px”>div 2</div>
        <div style=”float: right; padding: 25px”>div 3</div>
        <div style=”padding: 25px”>div 4</div>
    </section>
    The first element is floated to the left. The second element is not floated but continues on the same row because the previous element is floated. Because this element is not floated, it takes up the remainder of the current row. The third element is floated to the right and the final element is positioned to the left and takes up the remainder of the row.

     

  6. Containing Floating: Chú ý, khi tính toán kích thước chiều cao (height) của element chứa float, thì floated content không được tính vào tham số đó. Lý do là floated content có thể chiếm khoảng không của nhiều div, nếu kích thước floated content được tính vào div đầu thì div sau sẽ không thể xuất hiện đến khi hiển thị floated element.
  7. Setting overflow: Khi kích thước parent element/container nhỏ hơn {visible, hidden, scroll, auto} Với trường hợp floated content, với giá trị ngoài visible thì kích thước height của container sẽ bao gồm cả kích thước height của floated content. Với container chứa floated content, overflow nên để auto để tránh trường hợp hiển thị scroll bar.

    Using a Pseudo-Element

    Another solution for this is to use the ::after pseudo-element to create additional content after the container and use the clear attribute on this content. For example, adding this CSS rule, will add content after the floated content.
    header::after {
        content: “”;
        display: block;
        clear: both;
    }
    The content declaration, which is required, is set to an empty string so this doesn’t add any actual content. However, the pseudo-element will have the clear: both; declaration. This causes the content to “appear” after the floated content but still be part of the container. This also forces the floated content to be included in the container size.
  8. Inline-block cho phép cài đặt thuộc tính height và width cho content nằm inline.
  9. Position: {static; relative/offset so với vị trí mặc định; absolute/ở một vị trí nhất định so với ancestor element và không được cấp không gian nào; fixed/ở vị trí offset so với viewport. Using position: absolute; will position the element relative to its positioning context. “When absolute positioning is used, the browser will look through the element’s ancestry to find the nearest ancestor that has the position attribute set to either absolute or relative. If none is found, the document is used as the default positioning context.
  10. Z-Index: Mặc định thì static position có z-index = 0. Để xác định element nào hiển thị trên element nào, có một số qui tắc:
    First, all non-statically positioned content will be on top of the other content. If you don’t want that behavior, set the z-index to -1 and that content will appear underneath the statically positioned content.
    Secondly, content that comes later in the document will be on top of the previous content.
  11. Stacking context:
    When determining the display order , the browser uses stacking contexts. A stacking context is created at the document level, for all statically positioned content. Whenever relative, absolute, or fixed positioning is used, a new stacking context is created. All the child elements within this element use the same stacking context.
    Child elements can also use one of the positioning values and create a new stacking context. This can cause some confusion because these contexts are hierarchical. For example, suppose there are two stacking contexts, the first with a z-index of 1 and a the second with a z-index of 2. Then you add a child element with relative positioning inside the first stacking context and set its z-index to 3. However, everything in the second context (z-index of 2) will be on top of the first (z-index of 1). The subcontext (z-index of 3) only affects the ordering of elements in the first context .
    Caution
  12. Centering content:

     

Summary

In this chapter I covered a number of topics that control how content is positioned within an HTML document. There are a lot of options available when laying out the content and this is one of the trickiest concepts in CSS. When deciding how to arrange your content, consider these techniques and choose the one that fits best:

  • Block layout – takes up the entire width of its parent and always starts a new row.
  • Inline layout – designed to flow horizontally from one element to another.
  • Specifying size – using absolute, relative, or max sizes and setting the size based on content.
  • Box sizing – automatically considers padding and border in sizing.
  • Floats – float content left or right and let other content wrap around.
  • Inline block – allows normally blocked content to flow horizontally.
  • Relative position – offset content from its calculated position.
  • Absolute or fixed positioning – positioned independent of the DOM.
  • Centering – using the margin attribute.

Sample HTML

 

 

CSS Sample: