• Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ
Hotline
0355 00 77 38
quangphuong@sogo.edu.vn
SOGOSOGO
  • Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ

    Lập trình Web

    • Trang chủ
    • Blog
    • Lập trình Web
    • Bài 15 | CSS Display – Overflow, Float và Alignment – SOGO xSchool

    Bài 15 | CSS Display – Overflow, Float và Alignment – SOGO xSchool

    • Mục Lập trình Web
    • Date 04/08/2019
    • Ý kiến Chưa có ý kiến nào
    css display overflow float alignment

    CSS display là một trong những thuộc tính được sử dụng nhiều nhất trong lập trình CSS. Trình duyệt xem mỗi một HTML element  như là một box. Thuộc tính display trong CSS cho phép thiết lập kiểu hiển thị của các HTML này trên trang web.

    CSS display

    Thuộc tính CSS display thiết lập cách một HTML element hiển thị trên trình duyệt web.

    Giá trị hiển thị mặc định của hầu hết các HTML elements là block hoặc inline.

    Block-level Elements

    Một block-level element luôn luôn bắt đầu bằng một dòng mới và trải dài hầu hết chiều dài màn hình hiển thị.

    Ví dụ các block-level elements:

    • <div>
    • <h1> - <h6>
    • <p>
    • <form>
    • <header>
    • <footer>
    • <section>

     

    Inline Elements

    Một inline element không cần thiết phải bắt đầu bằng một dòng mới và chỉ hiển thị theo chiều dài cần thiết.

    Ví dụ của các inline elements:

    • <span>
    • <a>
    • <img>

    CSS Display: none

    Thuộc tính display: none thường được sử dụng cùng với JavaScript để dấu (hide) hoặc hiển thị (show) các elements mà không cần phải xóa hoặc tạo mới.

    Phần tử <script> element có giá trị măc định là display: none;

    Ví dụ sau đây thiết lập display: inline; cho <li> elements để tạo một horizontal menu:

    li {
    display: inline;
    }

     

    See the Pen css display none by QUANG (@QUANGPHUONG) on CodePen.

    Lưu ý: Thiết lập thuộc tính display của một element chỉ thay đổi cách element đó hiển thị, không phải là thay đổi loại element đó. Vì vậy nếu một inline element được thiết lập display: block; thì sẽ không cho phép thêm block elements nào bên trong nó.

    Ví dụ sau hiển thị <span> và <a> elements dưới dạng block elements:

    span {
      display: block;
    }

    a {
      display: block;
    }

    See the Pen css display block span by QUANG (@QUANGPHUONG) on CodePen.

    Hide một Element – sử dụng thuộc tính display:none hay visibility:hidden?

    Display:none

    Hide một element có thể bằng cách thiết lập thuộc tính display:none. Khi đó element sẽ được giấu đi, và trang web sẽ hiển thị giống như là element không hề tồn tại ở vị trí ban đầu.

    h1.hidden {
      display: none;
    }

     

    See the Pen css hide display none by QUANG (@QUANGPHUONG) on CodePen.

    Visibility:hidden

    Thiết lập visibility:hidden cũng có tác dụng giấu đi element. Tuy nhiên tại vị trí của element này sẽ thay vào là một khoảng trắng. Điều này đôi khi ảnh hưởng đến hiển thị layout của trang web.

    h1.hidden {
      visibility: hidden;
    }

     

    See the Pen css hide visibility hidden by QUANG (@QUANGPHUONG) on CodePen.

    Using width, max-width and margin: auto;

    Như đề cập trước đó, một block-level element sẽ kéo dài hết chiều rộng của trang web. (stretches out to the left and right as far as it can).

    Cài đặt width của một block-level element sẽ hạn chế element hiển thị hết toàn bộ chiều dài của.

    Tuy nhiên, bạn có thể thiết lập giá trị của margin: auto;, để canh chỉnh element nằm chính giữa container của nó.

    Ví dụ dưới đây cho 2 trường hợp thiết lập chiều rộng của <div>:

    1. <div> element có width là 500px, và margin được thiết lập giá trị auto.Trường hợp này element sẽ có chiều rộng là 500px, và khoảng trống còn lại sẽ được chia đều cho hai bên margins.
    2. <div> element sử dụng max-width, trong trường hợp này trình duyệt sẽ xử lý tốt hơn cho các cửa sổ nhỏ. Đặc biệt là trên màn hình các thiết bị di động:

    Ví dụ:

    div.ex1 {
      width: 500px;
      margin: auto;
      border: 3px solid #73AD21;
    }

    div.ex2 {
      max-width: 500px;
      margin: auto;
      border: 3px solid #73AD21;
    }

     

    See the Pen css max width by QUANG (@QUANGPHUONG) on CodePen.

    CSS position

    Thuộc tính position property thiết lập vị trí của HTML element

    Có 5 giá trị position như sau:

    • static
    • relative
    • fixed
    • absolute
    • sticky

    position: static

    HTML elements được thiết lập mặc định là position: static.

    HTML element với thiết lập position: static; thì sẽ không có vị trí gì đặc biệt.  Sẽ không bị ảnh hưởng bởi sự thiết lập vị trí top, bottom, right và left. Mà sẽ tùy thuộc theo nội dung của trang web.

    div.static {
      position: static;
      border: 3px solid #73AD21;
    }

     

    See the Pen css position static by QUANG (@QUANGPHUONG) on CodePen.

    position: relative;

    HTML element với thiết lập position: relative; có 1 vị trí tương đối. Khi đó việc thiết lập vị trí top, right, bottom, và left sẽ thay đổi vị trí của element từ vị trí thông thường.

    div.relative {
      position: relative;
      left: 30px;
      border: 3px solid #73AD21;
    }

     

     

    See the Pen css position relative by QUANG (@QUANGPHUONG) on CodePen.

    position: fixed;

    HTML element với position: fixed; sẽ có vị trí tương đối với viewport (cửa sổ màn hình), có nghĩa là nó sẽ luôn đứng yên ngay cả khi user kéo chuột xuống xem nội dung bên dưới. Có thể thiết lập thuộc tính top, right, bottom, và left để định vị element.

    div.fixed {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 300px;
      border: 3px solid #73AD21;
    }

     

    See the Pen css position fixed by QUANG (@QUANGPHUONG) on CodePen.

    position: absolute;

    HTML element với position: absolute nằm ở vị trí gần với element cha (ancestor) của nó.

    div.relative {
      position: relative;
      width: 400px;
      height: 200px;
      border: 3px solid #73AD21;
    } 

    div.absolute {
      position: absolute;
      top: 80px;
      right: 0;
      width: 200px;
      height: 100px;
      border: 3px solid #73AD21;
    }

     

    See the Pen css position absolute by QUANG (@QUANGPHUONG) on CodePen.

    position: sticky;

    HTML element với position: sticky có vị trí đi theo con trỏ chuột

    Một sticky element thay đổi thuộc tính giữa relative và fixed, dựa vào vị trí con trỏ. Nó mang giá trị position: relative cho đến khi một vị trí tối đa đạt được trong viewport – sau đó chuyể sang position:fixed.

    Trong ví dụ sau, sticky element sẽ dính vào đầu trang (top: 0) khi kéo trỏ xuống 1 vị trí nhất định.

    div.sticky {
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      background-color: green;
      border: 2px solid #4CAF50;
    }

     

    See the Pen css position sticky by QUANG (@QUANGPHUONG) on CodePen.

    Overlapping Elements

    Các elements có thể trùng lắp (overlap) lên nhau.

    Thuộc tính z-index thiết lập vị trí thứ hạng (stack order) của một element Theo đó element sẽ được đặt ở trước hoặc sau các elements khác.

    Ví dụ sau image có z-index là -1, vì vậy nó sẽ được đặt sau text.

    img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }

    See the Pen css overlap z index by QUANG (@QUANGPHUONG) on CodePen.

    Positioning Text In an Image

    Cách sắp đặt vị trí Text trên Hình ảnh (Image):

    Top Left:

    See the Pen css image top left by QUANG (@QUANGPHUONG) on CodePen.

    Top Right:

    See the Pen css image top right by QUANG (@QUANGPHUONG) on CodePen.

    Bottom Left:

    See the Pen css image bottom left by QUANG (@QUANGPHUONG) on CodePen.

    Bottom Right:

    See the Pen css image bottom right by QUANG (@QUANGPHUONG) on CodePen.

    Nguồn tham khảo: w3school

    *************

    Xem thêm:

    1. Lập trình web là gì?
    2. HTML là gì?
    3. Học lập trình web bắt đầu như thế nào?
    4. Bài 1 | Xây dựng trang web đơn giản với HTML
    5. Bài 2 | Các thành phần cơ bản của HTML
    6. Bài 3 | HTML style – Định dạng nội dung trang web
    7. Bài 4 | CSS style – Định dạng nội dung trang web
    8. Bài 5 | HTML Table và List – Định dạng bảng và list trong trang web
    9. Bài 6 | HTML Block, Inline, ID, Class và Iframes Elements
    10. Bài 7 | HTML Form Elements – Nhập dữ liệu cho Web
    11. Bài 8 | HTML Input Elements – Nhập dữ liệu cho Web
    12. Bài 9 | Tạo responsive web layout bằng HTML và CSS
    13. Bài 10 | CSS là gì? Thiết kế Web nâng cao bằng CSS
    14. Bài 11 | CSS Background và Border
    15. Bài 12 | CSS Margin và Padding
    16. Bài 13 | CSS Box Model trong thiết kế Website
    17. Bài 14 | CSS Text, List và Table

    —————————————————————————————

    SOGO – xSchool

    Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).

    SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).

    Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.

    Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).

    Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.

    Liên hệ ngay để biết thêm chi tiết đây:

    Hotline: 0355 00 77 38

    Facebook (SOGO xSchool): sogoxschool

    Tag:block level element, bottom left, bottom right, css display, css element, css position, display none, html element, inline element, lap trinh web, margin auto, max-width, overlapping element, position absolute, position fixed, position relative, position sticky, sogo xschool, thiet ke web, top left, top right, visibility hidden, web developer, width

    • Chia sẻ:
    admin

    Bài trước

    Bài 14 | CSS Text, Table và List Formatting trong thiết kế Website – SOGO xSchool
    04/08/2019

    Bài sau

    Bài 16 | CSS Combinator trong thiết kế Website - SOGO xSchool
    11/08/2019

    Bạn cũng có thể thích

    json-la-gi
    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23 Tháng Mười Một, 2019
    javascript-dom-la-gi
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23 Tháng Mười Một, 2019
    javascript-if-else
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    9 Tháng Mười Một, 2019

    Ý kiến Hủy

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Tìm kiếm

    Chuyên mục

    • Học tiếng Anh (1)
    • Lập trình Android (1)
    • Lập trình Java (2)
    • Lập trình trẻ em (13)
    • Lập trình viên chuyên nghiệp (18)
    • Lập trình Web (37)
    • Tin tức (15)
    • Uncategorized (2)

    CÁC KHÓA HỌC

    Lập trình Python Cơ bản

    Lập trình Python Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Free
    Robotics Nâng cao

    Robotics Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Free
    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Free
    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Free
    Robotics Cơ bản

    Robotics Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Nâng cao

    Lập trình Scratch Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Cơ bản

    Lập trình Scratch Cơ bản

    2.800.000₫ 2.600.000₫

    BÀI VIẾT MỚI NHẤT

    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23Th112019
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23Th112019
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    09Th112019
    Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO
    09Th112019
    Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO
    05Th102019
    logo-sogo

    0937117714 (Ms. Hương)

    0935710181 (Mr. Quang)

    info@sogo.edu.vn

    SoGo

    • Về chúng tôi
    • Bài viết
    • Liên hệ
    • Tuyển dụng

    Links

    • Khoá học
    • Sự kiện
    • Hoạt động
    • FAQs

    Education Website by QuangPhuong. Powered by SOGO.