Cafedev chia sẻ cho ace vềthuộc tính float và clear, display: inline-block của layout trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Nội dung chính
1. Thuộc tính Float(nổi) trong CSS
Thuộc tính floats(nổi) được sử dụng để định vị và định dạng nội dung, ví dụ: để một hình ảnh nổi bên trái văn bản trong vùng chứa.
Thuộc tính float có thể có một trong các giá trị sau:
- left – Phần tử nổi ở bên trái vùng chứa của nó
- right – Phần tử nổi ở bên phải vùng chứa của nó
- none – Phần tử không nổi (sẽ được hiển thị ngay tại nơi nó xuất hiện trong văn bản). Đây là mặc định
- inherit – Phần tử kế thừa giá trị float của phần tử cha của nó
Trong cách sử dụng đơn giản nhất, thuộc tính float có thể được sử dụng để bọc văn bản xung quanh hình ảnh.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
2. Thuộc tính clear(nổi) trong CSS
Thuộc tính clear chỉ định phần tử nào có thể trôi nổi bên cạnh phần tử đã xóa và ở phía nào.
Thuộc tính clear có thể có một trong các giá trị sau:
- none – Cho phép các phần tử nổi trên cả hai mặt. Đây là mặc định
- left – Không cho phép phần tử nổi ở phía bên trái
- right- Không cho phép các phần tử nổi ở phía bên phải
- both – Không cho phép phần tử nổi ở bên trái hoặc bên phải
- inherit – Phần tử kế thừa giá trị rõ ràng của phần tử gốc của nó
Cách phổ biến nhất để sử dụng thuộc tính clear là sau khi bạn đã sử dụng thuộc tính float trên một phần tử.
Khi xóa các phao, bạn nên khớp phần rõ ràng với phao: Nếu một phần tử được làm nổi ở bên trái, thì bạn nên xóa ở bên trái. Phần tử nổi của bạn sẽ tiếp tục trôi nổi, nhưng phần tử đã xóa sẽ xuất hiện bên dưới phần tử đó trên trang web.
Ví dụ sau xóa float ở bên trái. Có nghĩa là không có phần tử nổi nào được phép ở bên trái (của div):
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>
<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>3. Giá trị của display: inline-block
So với display: inline, sự khác biệt chính là display: inline-block cho phép thiết lập chiều rộng và chiều cao trên phần tử.
Ngoài ra, với display: inline-block, lề / đệm trên cùng và dưới cùng được tôn trọng, nhưng với display: inline thì không.
So với display: block, sự khác biệt chính là display: inline-block không thêm dấu ngắt dòng sau phần tử, vì vậy phần tử có thể nằm cạnh các phần tử khác.
Ví dụ sau đây cho thấy các hành vi khác nhau của hiển thị: display: inline, display: inline-block and display: block:
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>4. Sử dụng inline-block để tạo liên kết điều hướng
Một cách sử dụng phổ biến để display: inline-block là hiển thị các mục danh sách theo chiều ngang thay vì chiều dọc. Ví dụ sau tạo liên kết điều hướng ngang:
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Horizontal Navigation Links</h1>
<p>By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).</p>
<p>Note: If you resize the browser window, the links will automatically break when it becomes too crowded.</p>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</body>
</html>Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
