Danh Mục Bài Viết
Ok anh em, Tiếp theo chủ đề học nhanh Css cùng Minacode bài này mình sẽ nói về 2 khái niệm Box-Model và Outline cũng như làm rõ vai trò của nó trong Css nhé! Nào Let's go thôi
Trong Css, thuật ngữ "Box Model" được sử dụng khi nói về thiết kế và bố cục.
Box Model về cơ bản là một hộp bao quanh mọi phần tử HTML. Nó bao gồm: nội dung, phần đệm(padding), đường viền(border) và lề(margin). Hình ảnh dưới đây minh họa mô hình hộp:
Box Model cho phép chúng ta thêm đường viền xung quanh các phần tử và xác định khoảng cách giữa các phần tử.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Minacode|Box Model</h2>
<p>Thẻ div dươi đây bao gồm: borders, padding, margins và content là một đoạn văn bản.</p>
<div>Kênh chia sẻ kiến thức lập trình miễn phí.</div>
</body>
</html>Ta có:
Để đặt chính xác chiều rộng và chiều cao của một phần tử trong tất cả các trình duyệt, bạn cần biết mô hình hộp hoạt động như thế nào.
Nên nhớ giúp mình, Khi bạn đặt thuộc tính chiều rộng và chiều cao của một phần tử bằng Css, bạn chỉ đang đặt chiều rộng và chiều cao của vùng nội dung thôi . Để tính tổng chiều rộng và chiều cao của một phần tử, bạn cần phải bao gồm thêm cả phần đệm(padding) và đường viền(border).
Ví dụ:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}Đây là tính toán:
Tổng chiều rộng: 350px. Trong đó:
+ 320px (chiều rộng của vùng nội dung)
+ 20px (phần đệm bên trái + phần đệm bên phải)
+ 10px (viền trái + viền phải)
Tổng chiều cao: 80px. Trong đó:
+ 50px (chiều cao của vùng nội dung)
+ 20px (phần đệm trên + phần đệm dưới)
+ 10px ( viền trên + viền dưới)
Tóm lại:
Tổng chiều rộng của một phần tử phải được tính như sau:
Tổng chiều rộng phần tử = chiều rộng nội dung + đệm trái + đệm phải + viền trái + viền phải
Tổng chiều cao của một phần tử phải được tính như sau:
Tổng chiều cao của phần tử = chiều cao nội dung + phần đệm trên + phần đệm dưới + viền trên + viền dưới
Bạn có thể hình dung outline là một đường viền được vẽ bên ngoài đường border của phần tử nó giúp phần tử nhìn nổi bật hơn.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>Minacode|outline</h2>
<p>Thẻ này có một đường viền màu đen rộng 2px và một đường outline bao quanh đường viền màu xanh rộng 10px</p>
</body>
</html>Ta có:
Outline trong Css có các thuộc tính sau:
Kiến thức phần này sẽ khá giống với phần border các bạn xem thêm giúp mình bài viết:
Đối với phần outline-offset nhìn khá mới nên mình sẽ nói thêm ở đây:
Thuộc tính outline-offset sẽ tính thêm khoảng trống trong suốt giữa outline và border của một phần tử.
Ví dụ:
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}Lưu ý: phân biệt outline khác với border nhé ! Không giống như đường border, outline được vẽ bên ngoài đường border của phần tử và có thể chồng lên nội dung khác. Ngoài ra, đường outline KHÔNG phải là một phần kích thước của phần tử; tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng của đường outline.
>>Còn tiếp nhé>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
