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

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