Danh mục: Tự học CSS3

Thuộc tính z-index trong CSS có thể được sử dụng kết hợp với thuộc tính position để tạo hiệu ứng layer (xếp chồng phần tử) như Photoshop.

Xếp chồng các phần tử bằng z-index

Thông thường các trang HTML được coi là hai chiều (2D), vì văn bản, hình ảnh và các yếu tố khác được sắp xếp trên trang mà không bị chồng lên nhau.

Tuy nhiên, ngoài vị trí theo chiều ngang (x) và dọc (y) của chúng, các phần tử cũng có thể được xếp chồng lên nhau dọc theo trục z.

Tức là, phần tử này nằm trên phần tử kia bằng cách sử dụng thuộc tính z-index trong CSS.

Thuộc tính z-index này chỉ định thứ tự xếp chồng của phần tử có giá trị position xác định là absolute, fixed hay relative.

Vị trí trục z của mỗi layer được biểu thị dưới dạng số nguyên đại diện cho thứ tự xếp chồng để trình duyệt kết xuất các layer đúng như mong muốn.

Phần tử có chỉ số z-index lớn hơn thì chồng lên phần tử có chỉ số z-index thấp hơn.

Với thuộc tính z-index, bạn có thể tạo ra bố cục trang web phức tạp hơn, có chiều sâu hơn.

Sau đây là ví dụ cho thấy cách tạo các layer trong CSS với thuộc tính z-index.

HTML:

<div id="layer1" style="z-index: 2"></div>
<div id="layer2" style="z-index: 1">
    <div id="layer3" style="z-index: 3"></div>
</div>

Với CSS như thế này:

div {
    border: 2px solid #000;
    width: 300px;
    height: 50px;
    margin: 10px;
    position: relative;
    background-color: #FFF;
}

#layer3 {
    background-color: orange;
    width: 300px;
    height: 60px;
    top: -50px;
}

Kết quả nhận được là như thế này:

Thuộc tính position trong CSS xác định vị trí, cách một phần tử sẽ được định vị trên một trang như thế nào.

Định vị các phần tử một cách thích hợp trên các trang web là rất cần thiết để có một bố cục web tốt.

Phần sau đây sẽ mô tả cho bạn từng phương pháp định vị này.

1. Định vị tĩnh (static)

Phần tử được định vị tĩnh luôn được định vị theo dòng bình thường của trang web (thứ tự theo cách nó được sắp xếp trong HTML). Và theo mặc định các phần tử HTML được định vị tĩnh.

Các phần tử được định vị tĩnh không bị ảnh hưởng bởi các thuộc tính top, bottom, left, right và z-index.

Ví dụ:

HTML:

<h2>Định vị phần tử</h2>
<p>Phần tử theo mặc định hiển thị bình thường theo dòng chảy của trang, thứ tự theo cách nó được sắp xếp trong HTML</p>
<div>Đơn giản là chúng ta chưa định vị lại vị trí của nó</div>

CSS:

h2 {
    color: #003999;
    font-size: 24px;
}
p {
    color: #333;
    font-size: 18px;
}
div {
    color: orange;
    font-size: 16px;
}

Kết quả ta được như hình:

2. Định vị tương đối trong CSS

Một phần tử được định vị tương đối được định vị so với vị trí bình thường của nó.

Trong sơ đồ định vị tương đối, vị trí hộp của phần tử được tính theo dòng thông thường. Sau đó, hộp được dịch chuyển từ vị trí bình thường này theo các thuộc tính: top, bottom, left hoặc right.

Hãy thử làm ví dụ sau:

HTML:

<h2>Định vị tương đối</h2>
<p>Phần tử được định vị tương đối là phần tự được định vị so với vị trí thông thường của nó</p>
<div>Đơn giản là ở vị trí ban đầu của nó, chúng ta di chuyển nó như thế nào</div>

CSS:

h2 {
    color: #003999;
    font-size: 24px;
    position: relative;
    left: 100px;
}
p {
    color: #333;
    font-size: 18px;
}
div {
    color: orange;
    font-size: 16px;
}

Kết quả nhận được như hình:

3. Định vị tuyệt đối trong CSS

Một phần tử được định vị tuyệt đối sẽ được định vị so với phần tử cha đầu tiên có position khác mặc định.

Nếu không tìm thấy phần tử như vậy, phần tử đó sẽ được định vị trên một trang so với góc ‘trên cùng bên trái’ của cửa sổ trình duyệt.

Vị trí sau cùng của hộp phần tử có thể được chỉ định bằng cách sử dụng một hoặc nhiều thuộc tính, bao gồm: top, right, bottom, left.

Các phần tử được định vị tuyệt đối được đưa ra ngoài luồng thông thường hoàn toàn và do đó không chiếm không gian khi sắp xếp các phần tử anh em.

Note: Nếu phần tử cha di chuyển, phần tử được định vị tuyệt đối cũng sẽ di chuyển theo.

Tuy nhiên, nó có thể chồng lên các phần tử khác tùy thuộc vào giá trị thuộc tính z-index.

Ví dụ:

HTML:

<div class="container">
    <h2>Định vị tuyệt đối</h2>
    <p>Phần tử định vị tuyệt đối sẽ có vị trí phụ thuộc vào phần tử cha đầu tiên có position khác mặc định</p>
    <div>Phần tử được định vị tuyệt đối sẽ tách ra khỏi luồng thông thường</div>
</div>

CSS:

.container {
    position: relative;
}
h2 {
    color: #003999;
    font-size: 24px;
    position: absolute;
    left: 100px;
    top: 100px;
}
p {
    color: #333;
    font-size: 18px;
}
div {
    color: orange;
    font-size: 16px;
}

Kết quả:

Ngoài ra, một phần tử được định vị tuyệt đối có thể có margin và chúng không bị thu hẹp với bất kỳ margin nào khác, có nghĩa là:

• Nếu phần tử cha đầu tiên của phần tử được định vị tuyệt đối có position là absolute thì margin sẽ bị thu hẹp
• Nếu phần tử cha đầu tiên của phần tử được định vị tuyệt đối có position là relative thì margin sẽ không bị thu hẹp

4. Định vị cố định

Định vị cố định (fixed) là một chức năng định vị gần giống với định vị tuyệt đối

Sự khác biệt duy nhất là, một phần tử được xác định position: fixed; sẽ được cố định với khung nhìn của trình duyệt và không di chuyển khi cuộn lên hay cuộn xuống.

Phương pháp này thường được ứng dụng để cố định menu trang web khi cuộn.

Cú pháp của nó như thế này:

.box {
    position: fixed;
    top: 10px;
}

Ví dụ như thế này:

Lưu ý: Trong trường hợp bạn chọn in trang, phần tử được định vị cố định được hiển thị trên mọi trang in (ngay cả trong bản in xem trước). IE7 và IE8 chỉ hỗ trợ giá trị cố định nếu a! DOCTYPE được chỉ định.

Như vậy là trong bài viết này bạn đã được tìm hiểu thêm về một kỹ thuật tạo bố cục web rất pro rồi đó.

Bởi vì, trong lập trình web thực tế thì chúng ta thường xuyên phải sắp xếp bố cục, vị trí không theo dòng chảy thông thường, trong đó thuộc tính position là cực kỳ hữu ích.

Học tiếp: Updating…

Đọc thêm: Thuộc tính visibility trong CSS

Thuộc tính visibility trong CSS là thuộc tính sử dụng để xác định khả năng hiển thị của một phần tử (hiển thị hay bị ẩn).

1. Kiểm soát khả năng hiển thị của phần tử bằng visibility

Trong CSS bạn có thể sử dụng thuộc tính visibility để kiểm soát xem một phần tử có được hiển thị (visible) hay không.

Thuộc tính này có thể nhận một trong các giá trị sau được liệt kê dưới đây:

• visible: Giá trị mặc định. Hộp và nội dung của phần tử có thể nhìn thấy.
• hidden: Hộp và nội dung của nó vô hình (invisible), nhưng vẫn ảnh hưởng đến bố cục của trang.
• collapse: Giá trị này khiến toàn bộ hàng (row) hoặc cột (column) bị xóa khỏi màn hình hiển thị. Giá trị này được sử dụng cho các phần tử hàng, nhóm hàng, cột và nhóm cột.
• inherit: Chỉ định rằng giá trị của thuộc tính visibility phải được kế thừa từ phần tử cha. Tức là nhận cùng một giá trị hiển thị như được chỉ định cho phần tử gốc của nó.

Kiểu visibility: collapse; loại bỏ các phần tử bên trong bảng, nhưng nó không ảnh hưởng đến bố cục của bảng theo bất kỳ cách nào khác.

Khoảng trống thường được chiếm bởi các phần tử bảng sẽ được lấp đầy bởi các phần tử tiếp theo.

Lưu ý: Nếu quy tắc visibility: collapse; được chỉ định cho các phần tử khác chứ không phải các phần tử bảng, nó gây ra hành vi tương tự như hidden.

2. Visibility khác Display như thế nào?

Các thuộc tính visibility và display trong CSS có vẻ giống nhau, nhưng thực tế chúng khá khác nhau và thường gây nhầm lẫn cho những người mới học lập trình web.

Nếu bạn quan tâm đến nghề lập trình web và thực sự muốn đi theo con đường này thì không nên bỏ lỡ KHÓA HỌC LẬP TRÌNH WEB (Full Stack) tại NIIT – ICT Hà Nội

• visibility: hidden; sẽ ẩn phần tử, nhưng nó vẫn chiếm không gian trong bố cục. Phần tử con của một hộp hidden sẽ hiển thị nếu khả năng hiển thị của chúng được đặt thành visible.

Trong khi đó:

• display: none; tắt hiển thị và xóa hoàn toàn phần tử khỏi document. Nó không chiếm bất kỳ không gian nào nữa. Mặc dù thẻ HTML vẫn nằm trong mã nguồn. Tất cả các phần tử con cũng bị tắt hiển thị, ngay cả khi thuộc tính display của các phần tử con có được đặt khác đi.

Hãy thử ví dụ sau:

HTML:

<div class="testVisibility">Đây là một thẻ DIV bị ẩn khả năng hiển thị mà vẫn <span>chiếm không gian</span></div>
<div class="testDisplay">Đây là một thẻ DIV bị ẩn khả năng hiển thị mà vẫn <span>chiếm không gian</span></div>

CSS:

div {
    width: 500px;
    height: 200px;
}

.testVisibility {
    background: #333;
    border: 1px solid grey;
    visibility: hidden; /*Làm nó vô hình*/
}
/* Hiển thị phần tử span trong thẻ div đầu tiên*/
.testVisibility>span {
    visibility: visible;
}

.testDisplay {
    background: #333;
    border: 1px solid grey;
    display: none; /*Tắt hiển thị*/
}
/* Cố gắng hiển thị phần tử span trong thẻ div thứ 2*/
.testDisplay>span {
    display: block;
}

Thử chạy trên trình duyệt xem như thế nào nhé.

Ở đây, mình đã ẩn 2 thẻ div bằng visibility: hidden; và display: none;

Và phần tử span trong thẻ 2 div đó thì cho nó hiển thị với visibility: visible; và display: block;

Rõ ràng chúng ta thấy cách hành xử của chúng khác nhau.

Một cái thì chỉ đơn giản là người dùng không nhìn thấy nhưng vẫn chiếm không gian. Còn một cái thì mất hẳn, không chiếm không gian luôn.

Trong lập trình web, tùy theo mục đích thực tế mà bạn có thể sử dụng thuộc tính visibility hoặc thuộc tính display để mang lại hiệu quả khác nhau.

Học tiếp: Position trong CSS

Đọc thêm: Thuộc tính display trong CSS

Như đã nhắc đến trong bài học trước, thuộc tính display trong CSS kiểm soát loại hộp được tạo bởi một phần tử.

Bài này chúng ta sẽ tìm hiểu kỹ hơn về nó.

Thuộc tính display là gì?

Thuộc tính display được sử dụng để xác định giá trị hiển thị mặc định cho tất cả các phần tử.

Ví dụ:

• Phần tử div được hiển thị dưới dạng khối (block)
• Trong khi phần tử span được hiển thị nội dòng (inline).

Có thay đổi giá trị của thuộc tính display được không?

Hoàn toàn có thể.

CSS cho phép bạn ghi đè giá trị display mặc định của một phần tử. Đây là một tính chất mang hàm ý quan trọng của thuộc tính display.

Ví dụ:

• Thay đổi phần tử Inline-level để được hiển thị dưới dạng phần tử Block-level
• Hoặc thay đổi phần tử Block-level để được hiển thị dưới dạng phần tử Inline-Level.

Lưu ý rằng: Thuộc tính display trong CSS là một trong những thuộc tính hữu ích và mạnh mẽ nhất trong CSS. Nó có thể rất hữu ích để tạo các trang web trông theo một cách khác, nhưng vẫn tuân theo các tiêu chuẩn web.

Tiếp theo đây, bạn sẽ biết cách để thay đổi, mô tả giá trị display CSS thường được sử dụng nhất.

1. display: block;

Giá trị block của thuộc tính display sẽ buộc một phần tử hoạt động giống như phần tử cấp block, như phần tử div hoặc p.

Quy tắc CSS trong ví dụ sau đây sẽ thay đổi phần tử span và phần tử a từ một phần tử Inline thành phần tử hiển thị như một phần tử Block:

HTML:

<p>
    <a href="https://niithanoi.edu.vn/">niithanoi.edu.vn</a>
    <br>
    <span>Phần tử span hành xử giống như là Block</span>
</p>

CSS:

a {
    display: block;
    background: grey;
}
span {
    display: block;
    background: orange;
}

Kết quả nhận được như hình:

Lưu ý: Việc thay đổi kiểu hiển thị của một phần tử chỉ thay đổi hành vi hiển thị của một phần tử, KHÔNG phải là thay đổi loại phần tử đó. Ví dụ, một phần tử Inline được đặt là display: block; vẫn không được phép bạn đặt phần tử Block bên trong nó.

2. display: inline;

Giá trị inline của thuộc tính display sẽ khiến một phần tử hoạt động như thể nó là một phần tử Inline.

Quy tắc CSS trong ví dụ sau sẽ thay đổi hiển thị của các phần tử p và li thành dạng phần tử cấp Inline:

HTML:

<p>Phần tử p và li hiển thị như một phần tử inline.</p>
<ul>
    <li>Học Full Stack</li>
    <li>Java</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

CSS:

p {
    display: inline;
    background: orange;
    padding: 10px;
}
ul li {
    display: inline;
    margin: 10px;
}

Ta có kết quả như sau:

3. display: inline-block;

Giá trị inline-block của thuộc tính display khiến một phần tử tạo ra một block sẽ được lưu chuyển với nội dung xung quanh, tức là trong cùng một dòng với nội dung liền kề.

Các quy tắc CSS sau đây hiển thị các phần tử div và span dưới dạng inline-block:

HTML:

<div>
    <span>Phần tử span và phần tử div (cha span) tạo thành hộp phần tử inline-block.</span>
</div>

CSS:

div {
    display: inline-block;
    background: orange;
    padding: 10px;
}
span {
    display: inline-block;        
    background: grey;
    padding: 10px;
}

Kết quả ta được:

Còn nếu không định nghĩa display: inline-block; cho cả span và div thì nó sẽ hiển thị như thế này:

4. display: none;

Giá trị none của thuộc tính display chỉ đơn giản là tạo ra một phần tử không có hộp nào cả.

Các phần tử con cũng không tạo ra bất kỳ hộp nào, ngay cả khi thuộc tính display của các phần tử con đó có đặt là gì đi chăng nữa. Trang web sẽ hiển thị như thể phần tử không tồn tại trong Document tree.

Ví dụ:

HTML:

<h1>Hello World!</h1>
<p>display: none; chỉ đơn giản là không tạo ra hộp phần tử nào. Nó không hiển thị trực quan nữa.</p>

Khi bạn không muốn hiển thị h1 trực quan cho người dùng nữa, bạn có thể ẩn nó đi bằng cách viết CSS như sau:

h1 {
    display: none;
}

Thử chạy chương trình và xem kết quả trên trình duyệt bạn nhé.

Ok, như vậy, cho đến bây giờ bạn đã hiểu về cách thay đổi giá trị thuộc tính display trong CSS để thay đổi cách chúng hiển thị, cách hành xử của các phần tử.

Thuộc tính display này sẽ giúp bạn rất nhiều trong lập trình web, lập trình front end đấy.

Hi vọng bạn thích nội dung này.

Học tiếp: Thuộc tính visibility trong CSS

Đọc thêm: Block và Inline

Định dạng trực quan thường được sử dụng để diễn giải cách các phần tử trong cây tài liệu (Document tree) hiển thị trực quan trên màn hình máy tính, thiết bị di động.

Trong định dạng trực quan chúng ta sẽ quan tâm đến nhiều thứ, nhưng có loại phần tử Block và Inline vẫn thường hay làm mọi người nhầm lẫn.

Mô hình định dạng trực quan CSS

Mô hình định dạng trực quan CSS là thuật toán được sử dụng để xử lý các tài liệu cho các thiết bị hiển thị trực quan (máy tính, di động, tivi…). Trong mô hình định dạng trực quan, mỗi phần tử trong cây tài liệu không tạo hoặc tạo nhiều hộp theo mô hình hộp

Đọc thêm: Box Model trong CSS

Bố cục của các hộp này phụ thuộc vào các yếu tố sau:

• Kích thước hộp.
• Loại phần tử (block hoặc inline).
• Sơ đồ định vị (normal flow, float và định vị tuyệt đối).
• Mối quan hệ giữa các phần tử trong cây tài liệu.
• Thông tin bên ngoài vd: Kích thước khung nhìn (viewport), kích thước tích hợp của hình ảnh, v.v.

Lưu ý: Cây tài liệu là hệ thống phân cấp của các phần tử được mã hóa trong tài liệu nguồn. Mọi phần tử trong cây tài liệu đều có chính xác một phần tử cha, ngoại trừ phần tử gốc, không có phần tử cha nào.

Mỗi phần tử được hiển thị trên một trang web sẽ tạo ra một hình hộp chữ nhật. Phần sau đây mô tả các loại hộp có thể được tạo bởi một phần tử.

Và mình chắc chắn qua phần dưới này bạn sẽ hiểu rõ về bản chất phần tử Block và phần tử Inline trong CSS.

Các phần tử cấp khối (Block-level) và Hộp khối (Block box)

Phần tử cấp khối (Block-level) là những phần tử được định dạng trực quan dưới dạng khối (nghĩa là chiếm toàn bộ chiều rộng có sẵn của khung nhìn), nó sẽ ngắt dòng trước và sau phần tử.

Ví dụ: Phần tử đoạn (p), tiêu đề (h1 đến h6), phần chia (div), v.v…. sẽ chiếm trọn 1 dòng trên trang web.

Nói chung, các phần tử cấp khối (Block – level) có thể chứa các phần tử nội tuyến (Inline-level) và có thể chứa cả các phần tử cấp khối khác.

Ví dụ:

• Thẻ phần tử div (block-level) có thể chứa phần tử span (inline-level) như thế này:

<div>Phần tử Block có thể chứa phần tử <span>inline</span></div>

• Thẻ phần tử div (block-level) có thể chứa phần tử div khác như thế này:

<div>
    <div>Phần tử Block có thể chứa cả phần tử Block</div>
</div>

Phần tử cấp nội tuyến (Inline-level) và Hộp nội tuyến (Inline box)

Phần tử cấp nội tuyến (Inline-level) là những phần tử của tài liệu nguồn không tạo thành các khối nội dung mới.

Hiểu đơn giản là nó không bẻ / ngắt dòng, không chiếm toàn bộ dòng.

Ví dụ: Các đoạn văn bản được nhấn mạnh trong một đoạn văn (em), các nhịp (span), yếu tố nhấn mạnh (strong), v.v.

Các phần tử nội tuyến thường chỉ có thể chứa văn bản và các phần tử nội dòng khác, ví dụ:

<span>Phần tử Inline chỉ có thể chứa văn bản và <strong>phần tử inline khác</strong></span>

Lưu ý: Không giống như các phần tử Block, một phần tử Inline chỉ chiếm đủ chiều rộng cần thiết và không buộc ngắt dòng.

Còn nếu bạn cố tính viết code HTML của bạn như thế này (Nhét phần tử Block vào trong phần tử Inline):

<p>
    <div>Bạn không nên làm như vậy</div>  
</p>

Thì khi trình duyệt render thì nó sẽ render thành như thế này:

<p>
</p>
    <div>Bạn không nên làm như vậy</div>
<p>
</p>

Điều này làm sai lệch đi ý định của bạn (và thực tế ý định này cũng không được chấp nhận)

Vì thế có thể layout website của bạn sẽ bị phá vỡ hoặc những CSS bạn viết không thể áp dụng được một cách chính xác nhất.

Tuy nhiên, bạn có thể thay đổi cách một phần tử sẽ được hiển thị trên trang web. Thay đổi tử phần tử Block sang phần tử Inline (và ngược lại) bằng cách sử dụng thuộc tính display trong CSS.

Hi vọng khi hiểu rõ về phần tử Block và phần tử Inline thì quá trình HỌC LẬP TRÌNH WEB của bạn sẽ trở nên dễ dàng hơn.

Đọc thêm: Các đơn vị trong CSS

Qua các bài viết thuộc tính font trong CSS, bạn đã sử dụng các đơn vị như px, %. Hôm nay chúng ta cùng tìm hiểu kỹ hơn thêm các đơn vị trong CSS khác nhé.

Các đơn vị được sử dụng để chỉ định giá trị độ dài khác 0 trong thuộc tính CSS.

1. Đơn vị trong CSS là gì?

Các đơn vị đo độ dài trong CSS có thể là tuyệt đối, chẳng hạn như pixel, điểm, v.v. hoặc tương đối như phần trăm (%) và đơn vị em.

Việc chỉ định đơn vị CSS là bắt buộc đối với các giá trị khác 0, vì không có đơn vị mặc định.

Thiếu hoặc bỏ qua một đơn vị sẽ được coi là một lỗi.

Tuy nhiên, nếu giá trị là 0, đơn vị có thể bị bỏ qua (xét cho cùng, 0 pixel là cùng một phép đo bằng không inch).

Lưu ý: Độ dài là số đo khoảng cách. Độ dài là phép đo chỉ bao gồm giá trị số và đơn vị, chẳng hạn như 10px, 2em, 50%, v.v. Khoảng trắng không thể xuất hiện giữa số và đơn vị.

2. Các đơn vị độ dài tương đối trong CSS

Đơn vị độ dài tương đối chỉ định độ dài liên quan đến thuộc tính độ dài khác. Đơn vị tương đối là:

• ẹm: Kích thước font chữ hiện tại
• ex: Chiều cao của phần tử thiện tại

Đơn vị em, ex thường xuyên được sử dụng để áp dụng kích thước trong phần tử .

2.1. Đơn vị em trong CSS

Phép đo giá trị bằng 1em được tính toán của thuộc tính kích thước phông chữ của phần tử mà nó được sử dụng. Nó có thể được sử dụng để đo dọc hoặc ngang.

Ví dụ: Nếu kích thước phông chữ của phần tử được đặt thành 16px và chiều cao dòng được đặt thành 2,5em thì giá trị tính toán của chiều cao dòng trong pixel là 2,5 x 16px = 40px.

HTML:

<p>Dòng văn bản này có kích thước 2.5 em</p>

CSS:

p {
    font-size: 16px;
    line-height: 2.5em;
}

Ngoại lệ xảy ra khi em được chỉ định trong giá trị của chính thuộc tính font-size, trong trường hợp đó, nó tham chiếu đến kích thước phông chữ của phần tử mẹ.

Vì vậy, khi chúng ta chỉ định kích thước phông chữ trong em, 1em bằng với kích thước phông chữ kế thừa. Như vậy, font-size: 1.2em; làm cho văn bản lớn hơn 1,2 lần so với văn bản của phần tử mẹ.

Nhưng làm như thế vẫn khó tính toán, hơi lệch khỏi nhận thức thông thường một chút. Nếu phần tử mẹ có font-size 20 px thì 1.2em lúc này sẽ khác.

Ở chỗ khác có phần tử mẹ có font-size là 18 px thì 1.2 em lúc này của phần tử con lại khác.

Điều này dễ dẫn tới sự nhầm lẫn trong khi viết CSS.

Để làm lại cho dễ tính toán, thống nhất, chúng ta hãy xem qua ví dụ sau:

HTML:

<p>Đây là một đoạn văn bản thông thường</p>

CSS:

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
p {
    font-size: 1.6em;
}
p:firt-letter {
    font-size: 3em;
    font-weight: bold;
}

Kích thước mặc định cho phông chữ trong tất cả các trình duyệt hiện đại là 16px.

Bước đầu tiên của chúng ta là giảm kích thước này cho toàn bộ tài liệu bằng cách đặt kích thước phông chữ phần body thành 62,5%, điều này nghĩa là đặt lại font-size của body thành 10px (62,5% của 16px).

Điều này là để làm tròn kích thước phông chữ mặc định để dễ dàng chuyển đổi px hay là em.

• Giờ thì 1em sẽ là 10 px
• 1.4 em sẽ là 14px
• 1.8 em sẽ là 18px
• … cứ như vậy

2.3. Đơn vị ex trong CSS

Đơn vị ex bằng chiều cao chữ thường của phông chữ hiện tại.

Nó còn được gọi là x-height vì nó thường bằng chiều cao của chữ ‘x’ viết thường, như minh họa bên dưới. Tuy nhiên, một ví dụ ex được xác định ngay cả đối với các phông chữ không chứa ‘x’.

3. Các đơn vị độ dài tuyệt đối trong CSS

Các đơn vị độ dài tuyệt đối là cố định. Chúng phụ thuộc nhiều vào thiết bị đầu ra, do đó chủ yếu hữu ích khi môi trường đầu ra được biết đến chính xác.

Các đơn vị tuyệt đối bao gồm các đơn vị vật lý (in, cm, mm, pt, pc) và đơn vị px.

Các đơn vị vật lý tuyệt đối như in, cm, mm, v.v. nên được sử dụng cho giấy in và các thiết bị có độ phân giải cao tương tự.

Trong khi đó, đối với hiển thị trên màn hình như máy tính để bàn và các thiết bị có độ phân giải thấp hơn, bạn nên sử dụng đơn vị pixel hoặc em.

Ví dụ:

HTML:

<h1>Test độ dài tuyệt đối trong CSS: in</h1>
<h2>Test độ dài tuyệt đối trong CSS: cm</h2>
<h3>Test độ dài tuyệt đối trong CSS: mm</h3>
<h4>Test độ dài tuyệt đối trong CSS: pt</h4>
<h5>Test độ dài tuyệt đối trong CSS: pc</h5>
<h6>Test độ dài tuyệt đối trong CSS: px</h6>

CSS:

h1 { margin: 0.5in; }       /* inches  */
h2 { line-height: 3cm; }    /* centimeters */
h3 { word-spacing: 4mm; }   /* millimeters */
h4 { font-size: 12pt; }     /* points */
h5 { font-size: 1pc; }      /* picas */
h6 { font-size: 12px; }     /* picas */

Mẹo: Trong khi lập trình web thực tế, chúng ta sẽ sử dụng các đơn vị tương đối như em hoặc tỷ lệ phần trăm (%) để có thể dễ dàng tạo ra các thiết kế đáp ứng (responsive) tốt cho các thiết bị có kích thước màn hình khác nhau.

Tham khảo: Khóa học Lập trình Web Full Stack (12 tháng dành cho người chuyển ngành, học sinh tốt nghiệp THPT)

Ok, như vậy là bạn cũng tìm hiểu kha khá về các loại đơn vị trong CSS rồi đó. Chỉ cần bạn hiểu rõ bản chất của chúng, đến khi học phần responsive sẽ dễ dàng hơn nhiều.

Học tiếp: Updating..

Đọc thêm: Thuộc tính Overflow trong CSS

Thuộc tính oveflow trong CSS được sử dụng chỉ định cho trình duyệt cách hành xử ra khi nội dung của phần tử tràn (không vừa) hộp của phần tử.

Xem lại: Box Model nếu đã quên hộp phần tử là gì bạn nhé.

Xử lý nội dung bị tràn với thuộc tính Overflow trong CSS

Trong khi lập trình web, sẽ xảy ra tình huống nội dung của một phần tử lớn hơn kích thước của hộp phần tử.

Ví dụ, các thuộc tính width và height đã cho quá nhỏ, không đủ chỗ để chứa nội dung của phần tử.

Thuộc tính overflow trong CSS cho phép bạn chỉ định cắt nội dung, hiển thị thanh cuộn hoặc hiển thị nội dung tràn của phần tử đó.

Thuộc tính overflow này có thể nhận một trong các giá trị sau:

• visible: Giá trị mặc định. Nội dung không bị cắt xén, nó sẽ được hiển thị bên ngoài hộp của phần tử và do đó có thể chồng lên nội dung khác.
• hidden: Nội dung tràn khỏi hộp của phần tử sẽ bị cắt bớt và phần còn lại của nội dung sẽ ẩn.
• scroll: Nội dung tràn được cắt bớt, giống như ẩn, nhưng cung cấp cơ chế cuộn để cuộn thấy nội dung bị tràn.
• auto: Nếu nội dung tràn khỏi hộp của phần tử, nó sẽ tự động cung cấp các thanh cuộn để xem phần còn lại của nội dung, nếu không thì thanh cuộn sẽ không xuất hiện.

Trong phiên bản CSS3, chúng ta còn có thêm các thuộc overflow-x và overflow-y cho phép kiểm soát việc xử lý thuộc tính tràn theo từng hướng, trục x hoặc trục y.

Ví dụ sử dụng thuộc tính overflow trong CSS

Để hiểu rõ thuộc tính overflow trong CSS, chúng ta cùng làm ví dụ sau:

HTML:

<div>Đây là một đoạn văn bản được sử dụng để mô tả thuộc tính overflow trong CSS. Cụ thể là thuộc tính overflow lúc này có giá trị là scroll, nó sẽ hiển thị một thanh cuộn ở bên phải để cuộn nội dung trong đó</div>

CSS:

div {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    overflow: scroll;
}

Thử chạy chương trình trên xem kết quả như thế nào nhé.

Để ẩn nội dung bị tràn, chúng ta sử dụng giá trị hidden (Vẫn sử dụng cho thẻ div bên trên):

CSS:

div {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    overflow: hidden;
}

Giờ chạy trên trình duyệt bạn thấy kết quả như thế nào?

Vậy là qua bài này mình đã giúp bạn tìm hiểu rõ hơn về thuộc tính overflow trong CSS để xử lý nội dung bị tràn.

Nhớ luyện tập thêm để ghi nhớ và hiểu rõ cách chúng hoạt động hơn nhé.

Học tiếp: Các đơn vị trong CSS

Đọc thêm: Thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS được sử dụng để xác định loại con trỏ (tức là con trỏ chuột) khi chuột di chuyển qua một khu vực nhất định hoặc qua một liên kết trên trang web.

Hãy cùng mình học để tùy chỉnh con trỏ trong CSS, tạo ra con trỏ phù hợp, ấn tượng cho riêng mình nhé.

Thay đổi các kiểu con trỏ trong CSS

Các trình duyệt thường hiển thị con trỏ chuột kiểu mũi tên trên bất kỳ phần trống nào của trang web, kiểu bàn tay có găng tay trên bất kỳ mục nào được liên kết hoặc có thể click và con trỏ kiểu chỉnh sửa (hình chữ I) trên bất kỳ đoạn văn bản nào.

Với CSS, bạn có thể xác định lại các thuộc tính đó để hiển thị nhiều loại con trỏ khác nhau.

Đây là các loại con trỏ, chạy nó trên trình duyệt và di chuột qua để thấy các kiểu con trỏ khác nhau bạn nhé:

Mình CSS các ô để test kiểu con trỏ một chút

CSS:

.cursor-demo span{
    min-width: 100px;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 3px;
}

HTML:

<h2>Các loại con trỏ có sẵn trong CSS</h2>
<p>Di chuột qua các ô để thấy sự thay đổi của con trỏ.</p>
<div class="cursor-demo">
    <span style="cursor: auto;">auto</span>
    <span style="cursor: default;">default</span>
    <span style="cursor: none;">none</span>
    <span style="cursor: context-menu;">context-menu</span>
    <span style="cursor: help;">help</span>
    <span style="cursor: pointer;">pointer</span>
    <span style="cursor: progress;">progress</span>
    <span style="cursor: wait;">wait</span>
    <span style="cursor: cell;">cell</span>
    <span style="cursor: crosshair;">crosshair</span>
    <span style="cursor: text;">text</span> 
    <span style="cursor: vertical-text;">vertical-text</span>
    <span style="cursor: alias;">alias</span>
    <span style="cursor: copy;">copy</span>
    <span style="cursor: move;">move</span>
    <span style="cursor: no-drop;">no-drop</span>
    <span style="cursor: not-allowed;">not-allowed</span>
    <span style="cursor: grab;">grab</span>
    <span style="cursor: grabbing;">grabbing</span>
    <span style="cursor:e-resize">e-resize</span>
    <span style="cursor: n-resize;">n-resize</span>
    <span style="cursor: ne-resize;">ne-resize</span>
    <span style="cursor: nw-resize;">nw-resize</span>
    <span style="cursor: s-resize;">s-resize</span>
    <span style="cursor: se-resize;">se-resize</span>
    <span style="cursor: sw-resize;">sw-resize</span>
    <span style="cursor: w-resize;">w-resize</span>
    <span style="cursor: ew-resize;">ew-resize</span>
    <span style="cursor: ns-resize;">ns-resize</span>
    <span style="cursor: nesw-resize;">nesw-resize</span>
    <span style="cursor: nwse-resize;">nwse-resize</span>
    <span style="cursor: col-resize;">col-resize</span>
    <span style="cursor: row-resize;">row-resize</span>
    <span style="cursor: all-scroll;">all-scroll</span>
    <span style="cursor: zoom-in;">zoom-in</span>
    <span style="cursor: zoom-out;">zoom-out</span>
</div>

Tạo con trỏ tùy chỉnh trong CSS

Ngoài các con trỏ có sẵn, bạn cũng có thể tạo ra con trỏ tùy chỉnh theo ý của bạn.

Thuộc tính cursor trong CSS xử lý danh sách được phân tách bằng dấu phẩy gồm các giá trị con trỏ do người dùng xác định, theo sau là con trỏ chung.

Nếu con trỏ đầu tiên được chỉ định không chính xác hoặc không thể tìm thấy, con trỏ tiếp theo trong danh sách được phân tách bằng dấu phẩy sẽ được sử dụng, v.v. cho đến khi tìm thấy con trỏ có thể sử dụng.

Nếu không có con trỏ nào do người dùng xác định là hợp lệ hoặc được hỗ trợ bởi trình duyệt, thì con trỏ chung ở cuối danh sách sẽ được sử dụng thay thế.

Mẹo: Định dạng chuẩn có thể được sử dụng cho con trỏ là định dạng .cur. Tuy nhiên, bạn có thể chuyển đổi các hình ảnh như .jpg và .gif sang định dạng .cur bằng cách sử dụng phần mềm chuyển đổi hình ảnh.

Ví dụ:

HTML:

<p>Hãy thử <a href="#">Di chuột qua đây</a> để thấy sự thay đổi của con trỏ chuột.</p>

CSS:

a {
    cursor: url("/images/custom-cursor-pointer.gif"), url("/images/custom-cursor-pointer.cur"), default;
}

Bạn tạo một thư mục tên là images cùng cấp với file .css và lưu 2 file con trỏ vào thư mục đó nhé. (Tải file con trỏ trên DRIVE)

Trong ví dụ trên, custom-cursor-pointer.gif và custom-cursor-point.cur là tệp con trỏ tùy chỉnh, nó được tải lên vùng máy chủ của bạn và default là con trỏ chung sẽ được sử dụng nếu không tìm thấy con trỏ tùy chỉnh hoặc không được trình duyệt của người xem hỗ trợ.

Chú ý: Nếu bạn đang khai báo con trỏ tùy chỉnh, bạn phải xác định một con trỏ chung ở cuối danh sách, nếu không con trỏ tùy chỉnh sẽ không hiển thị chính xác.

Lưu ý: IE9 và các phiên bản trước đó chỉ hỗ trợ các giá trị URL thuộc loại .cur cho con trỏ tĩnh và .ani cho con trỏ động. Tuy nhiên, các trình duyệt như Firefox, Chrome và Safari có hỗ trợ .cur, .png, .gif và .jpg nhưng không hỗ trợ .ani

Như vậy, qua bài viết này bạn đã có thể tự mình tạo ra những con trỏ xịn sò cho riêng mình với thuộc tính cursor trong CSS rồi đấy. Một điểm nhấn, nếu làm tốt thì sẽ gây ấn tượng mạnh với người dùng của bạn. cao đẳng y dược thành phố hồ chí minh

TIP: Dĩ nhiên, thông thường chúng ta sử dụng mặc định của trình duyệt để tránh tạo ra nhiều request khiến hiệu năng chậm đi.

Học tiếp: Thuộc tính overflow trong CSS

Đọc thêm: Thuộc tính Outline trong CSS

Trong hướng dẫn tự học CSS này, bạn sẽ học cách để thiết lập thuộc tính Outline cho một phần tử bằng CSS.

CSS Outline là gì?

Thuộc tính outline trong CSS cho phép bạn trang trí một vùng viền xung quanh hộp phần tử (Ngay ngoài phần Border)

Outline là một đường được vẽ ngay bên ngoài border của các phần tử. Outline thường được sử dụng để biểu diễn trạng thái focus hay active của các phần tử như button, link, input, v.v.

Lát nữa, ở phần bên dưới bạn sẽ được học chi tiết về cách thiết lập kiểu dáng, màu sắc và chiều rộng của Outline.

Outline có gì khác với Border?

Về cơ bản, Outline trông rất giống với Border, nhưng nó khác với Border ở một số điểm:

• Các Outline không chiếm dụng không gian. Nó chồng lên phần tử xung quanh.
• Không giống như Border, Outline sẽ không cho phép chúng ta đặt mỗi cạnh thành một chiều rộng khác nhau hoặc thiết lập màu sắc và kiểu dáng khác nhau cho mỗi cạnh. Outline giống nhau ở tất cả các cạnh.
• Outline không có bất kỳ tác động nào đến các phần tử xung quanh ngoài việc chồng lên phần tử xung quanh.
• Không giống như Border, Outline không thay đổi kích thước hoặc vị trí của phần tử.
• Outline có thể không phải là hình chữ nhật, nhưng bạn không thể tạo outline hình tròn được.

Lưu ý: Nếu bạn thiết lập Outline trên một phần tử, nó sẽ chiếm cùng một lượng không gian trên các trang web giống như nếu không có Outline cho phần tử đó. Bởi vì nó chồng lên Margin (vùng trong suốt bên ngoài đường viền) và các yếu tố xung quanh.

Các kiểu Outline

Thuộc tính outline-style thiết lập kiểu outline của một phần tử như: solid, dotted, v.v.

Thuộc tính outline-style có thể có một trong các giá trị sau: none, solid, dashed, dotted, double, inset, outset, rãnh và ridge.

Để hiểu rõ hơn bạn có thể xem hình minh họa bên dưới đây:

HTML:

<p class="p1">solid</p>
<p class="p2">dotted</p>
<p class="p3">dashed</p>
<p class="p4">double</p>
<p class="p5">inset</p>
<p class="p6">outset</p>
<p class="p7">groove</p>
<p class="p8">ridge</p>

CSS:

/* Mình CSS thẻ p cho dễ nhìn*/
p {
	outline-width: 10px;
	width: 100px;
	height: 100px;
	float: left;
	margin: 20px;
	text-align: center;
	line-height: 100px;
	color: orange;
}
/* Đây là các kiểu Outline*/
.p1 {
	outline-style: solid;
}
.p2 {
	outline-style: dotted;
}
.p3 {
	outline-style: dashed;
}
.p4 {
	outline-style: double;
}
.p5 {
	outline-style: inset;
}
.p6 {
	outline-style: outset;
}
.p7 {
	outline-style: groove;
}
.p8 {
	outline-style: ridge;
}

Kết quả hình minh họa:

Lưu ý: Bạn phải chỉ định một outline-style để làm cho outline xuất hiện xung quanh một phần tử, vì outline-style mặc định là none. Trong khi đó, chiều rộng hoặc độ dày outline mặc định là medium và có màu mặc định giống với màu văn bản.

Cách thiết lập chiều rộng cho outline

Thuộc tính outline-width chỉ định chiều rộng của outline sẽ được thêm vào một phần tử.

Hãy thử ví dụ sau để hiểu cách nó thực sự hoạt động:

HTML:

<p>IE7 không hỗ trợ Outline, IE8 có hỗ trợ nhưng phải được chỉ định <code><!DOCTYPE></code> rõ ràng</p>

CSS:

p {
        outline-style: dashed;        
        outline-style: dashed;
        margin: 20px;
}

Kết quả nhận được là:

Mẹo: Chiều rộng outline có thể được chỉ định bằng cách sử dụng bất kỳ giá trị chiều dài nào, chẳng hạn như px, em, rem, v.v. Nó cũng có thể được chỉ định bằng cách sử dụng một trong ba từ khóa: thin, medium và thick. Giá trị % hoặc giá trị âm là không được phép – giống như thuộc tính chiều rộng border.

Nếu bạn đã quên thì nên xem lại phần: Border trong CSS

Cách thiết lập màu cho Outline

Thuộc tính outline-color sẽ thiết lập màu của Outline.

Thuộc tính này chấp nhận các giá trị giống như các giá trị được sử dụng cho thuộc tính color.

Các quy tắc CSS sau đây thêm một outline liền màu cam xung quanh các đoạn văn bản.

HTML:

<p>Đây là một phần tử có outline liền màu cam</p>

CSS:

p {
	outline-style: solid;
	outline-color: #0000ff;
        margin: 20px;
        padding: 20px;
}

Kết quả nhận được là:

Lưu ý: Thuộc tính CSS outline-width hoặc outline-color không hoạt động nếu nó được sử dụng một mình. Sử dụng thuộc tính outline-style để thiết lập kiểu outline trước.

Cách viết tắt thuộc tính outline trong CSS

Thuộc tính CSS outline là một thuộc tính viết tắt để thiết lập một hoặc nhiều thuộc tính outline-style, outline-width và outline-color trong một dòng CSS duy nhất.

Hãy xem ví dụ sau để hiểu cách nó hoạt động:

HTML:

<p>Viết tắt thuộc tính outline trong CSS</p>

CSS:

p {
	outline: 5px solid orange;
	margin: 20px;
	padding: 20px;
}

Note: Mình thêm margin và padding cho dễ nhìn hơn thôi.

Nếu giá trị cho một thuộc tính outline riêng lẻ bị bỏ qua hoặc không được chỉ định trong khi viết tắt, giá trị mặc định cho thuộc tính đó sẽ được sử dụng thay thế, nếu có.

Ví dụ: Nếu giá trị cho thuộc tính màu của outline bị thiếu hoặc không được chỉ định khi viết tắt, thuộc tính color của phần tử sẽ được sử dụng làm giá trị cho màu của outline.

Trong ví dụ sau, đường viền sẽ là một đường thẳng màu blue có chiều rộng 5px:

HTML:

<p>Giá trị màu của khi viết tắt outline bị thiếu</p>

CSS:

p {
	outline: 5px solid;
	margin: 20px;
	padding: 20px;
	color: blue;
}

Kết quả được như hình:

Và trong trường hơp thiếu giá trị của thuộc tính outline-style thì cho dù bạn có áp màu sắc, chiều rộng thì nó cũng không xảy ra. Bởi vì outline-style mặc định là không có (Không có thì áp lên đâu??)

Ok, vậy là qua bài viết này mình đã hướng dẫn bạn tìm hiểu về thuộc tính outline trong CSS. Hãy thử nghiệm và ứng dụng nó trong các trường hợp thích hợp bạn nhé.

Học tiếp: Thuộc tính cursor trong CSS

Đọc thêm: Margin trong CSS

Trong bài hướng tự học CSS dẫn này, bạn sẽ học cách điều chỉnh phần không gian xung quanh một phần tử (Margin) bằng cách sử dụng CSS.

Nói đơn giản là cách xử lý margin trong CSS.

Thuộc tính margin trong CSS là gì?

Thuộc tính marign trong CSS cho phép bạn thiết lập khoảng cách xung quanh đường viền của hộp phần tử (hoặc cạnh của hộp phần tử, nếu nó không có đường viền).

Nếu bạn đã quên thì mời xem lại bài viết về CSS Box Model, hoặc xem lại hình minh họa ở dưới đây:

Lề (Margin) của một phần tử không bị ảnh hưởng bởi màu nền của nó, nó luôn trong suốt.

Tuy nhiên, nếu phần tử mẹ có màu nền, nó sẽ hiển thị qua vùng lề của nó.

1. Thiết lập margin trong CSS

Bạn có thể chỉ định margin cho các cạnh riêng lẻ của một phần tử như trên, phải, dưới và bên trái bằng cách sử dụng các thuộc tính CSS tương ứng:

• margin-top
• margin-right
• margin-bottom
• margin-left

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

HTML:

<h1>Đây là một ví dụ về Margin</h1>
<p>Margin là phần lề của phần tử. Nó giúp chúng giữ khoảng cách với các phần tử khác</p>

Còn đây là CSS:

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
    background: #00ccc5;
}
p {
    margin-left: 75px;
    margin-right: 75px;
    background: #00ccc5;
}

Kết quả khi chạy chương trình, ta được như thế này:

Các thuộc tính margin có thể được chỉ định bằng cách sử dụng các giá trị sau:

• Các loại kích thước: px, em, rem, pt, cm, v.v. (Đọc lại bài viết CSS Font để hiểu rõ hơn về một số loại kích thước trong CSS)
• %: Chỉ định lề tính bằng phần trăm (%) chiều rộng của phần tử chứa nó.
• auto: Trình duyệt tính toán mức lợi nhuận phù hợp để sử dụng.
• inherit: Chỉ định rằng lề phải được kế thừa từ phần tử mẹ.
• Ngoài ra, bạn cũng có thể chỉ định lề âm trên một phần tử, ví dụ: margin: -10px;, margin: -5%;, …

2. Cách viết tắt thuộc tính Margin trong CSS

Thuộc tính margin là một thuộc tính giúp bạn viết tắt các thuộc tính riêng lẻ của lề phần tử:

Nó cũng được sử dụng để thu gọn code hơn.

Thay vì phải viết như thế này:

h1 {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

Thì bạn có thể viết thế này:

h1 {
    margin: 10px 15px 20px 25px;
}

Ngắn gọn hơn rất nhiều đúng không?

Hãy xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:

HTML:

<h1>Margin 4 cạnh đều nhau</h1>
<p>Margin Trái Phải bằng nhau và Trên, Dưới bằng nhau</p>
<div>Margin Trái Phải bằng nhau</div>
<hr />
<p>Ví dụ về viết tắt thuộc tính margin trong CSS</p>

CSS:

h1 {
  margin: 50px; /* Áp dụng cho cả 4 cạnh */
}
p {
  margin: 25px 75px; /* TOP và BOTTOM | LEFT và RIGHT */
}
div {
  margin: 25px 50px 75px; /* TOP | LEFT và RIGHT | BOTTOM */
}
hr {
  margin: 25px 50px 75px 100px; /* TOP | RIGHT | BOTTOM | LEFT */
}
h1, p, div {
  background: #00ccc5;
}

Kết quả ta được như thế này:

Ký hiệu viết tắt này có thể nhận 1, 2, 3 hoặc 4 giá trị được phân tách bằng khoảng trắng.

• Nếu 1 giá trị được chỉ định, nó sẽ được áp dụng cho cả bốn mặt.
• Nếu 2 giá trị được chỉ định, giá trị 1 được áp dụng cho phía trên cùng và dưới cùng, và giá trị thứ 2 được áp dụng cho phía bên phải và bên trái của hộp phần tử.
• Nếu 3 giá trị được chỉ định, giá trị 1 được áp dụng cho phía trên cùng, giá trị thứ 2 được áp dụng cho phía bên phải và bên trái, và giá trị 3 được áp dụng cho phía dưới.
• Nếu 4 giá trị được chỉ định, chúng sẽ được áp dụng tương ứng cho phía trên, bên phải, dưới cùng và bên trái của hộp phần tử theo thứ tự đã chỉ định.

Bạn nên viết tắt thuộc tính margin, vì nó sẽ giúp bạn tiết kiệm thời gian, tránh nhiều code và làm cho code CSS của bạn dễ theo dõi và duy trì hơn.

Lưu ý: Lề của các phần tử sẽ nằm chồng lên nhau. Do đó, khoảng cách thực tế giữa 2 phần tử có thiết lập margin là bằng margin lớn hơn.

Cách căn giữa phần tử theo chiều ngang với marign auto

Giá trị auto cho thuộc tính margin nói cho trình duyệt web biết hãy tự động tính toán khoảng cách của lề.

Kết quả là trình duyệt sẽ căn phần tử ở giữa, theo chiều ngang.

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

Mình có một thẻ div như sau:

<div class="container">
    <h1>Div được căn giữa</h1>
    <p>Bằng thuộc tính margin: 0 auto;.</p>
</div>

Đây là CSS của nó:

.container {
    width: 300px;
    height: 200px;
    background: #00ccc5;
    margin: 0 auto;
}

Và đây là kết quả nhận được:

Như vậy, qua bài viết này, mình đã giúp bạn tìm hiểu về thuộc tính Margin trong CSS.

Hãy thử làm lại các ví dụ, thay đổi các giá trị để chơi với Margin bạn nhé.

Đến bài này, coi như bạn đã tự học xong về CSS cơ bản rồi đấy.

Cũng đơn giản thôi phải không nào.

Đọc thêm: Border trong CSS