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