Hãy học tại để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
#hoclaptrinh #mienphi #frontend #backend #devops
———————————————————–
SƠN ĐẶNG
► Facebook:
► Email: sondnf8@gmail.com
—————————————
► Học lập trình:
► Viết CV xin việc:
—————————————
HỌC LẬP TRÌNH MIỄN PHÍ
► Khóa Javascript cơ bản:
► Khóa HTML, CSS:
a ơi e k tìm thấy phần family selected
__TRƯỜNG HỢP 1__
* {
box-sizing: border-box;
}
———————————————————
/* Giả sử ta có đoạn code HTML: */
(Copy về để chạy thử và xem sự thay đổi)
<div class="box0">
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<p>Box 5</p>
</div>
</div>
</div>
</div>
</div>
</div>
/* Code CSS Internal: */
<style>
* {
box-sizing: border-box;
}
.box0 {
box-sizing: content-box;
}
.box5 {
width: 100px;
height: 100px;
border: 10px solid;
padding: 10px;
}
p {
padding: 5px;
border: 2px solid red;
background-color: yellow;
text-align: center;
}
</style>
==============================
– Trường hợp này ta thấy: Phần tử chung là * {} ta đã set cho chúng thuộc tính "border-box" vì vậy class "box0" là Cha của các class "box1", "box2", "box3", "box4", "box5". Khi đó chúng ta lại set cho class ".box0" có thuộc tính là content-box, lúc này hiển thị lên trang web của chúng ta sẽ ko có thay đổi gì, bởi vì class "box5" lúc này là con của class "box0", nó không được kế thừa từ Cha của nó là ông class "box0" mà nó lại được áp dụng thuộc tính "border-box" do ông * {border-box} quy định. Muốn áp dụng content-box cho box5 thì chúng ta phải chỉ đích danh ông ".box5" rồi cho nó thuộc tính: content-box thì lúc này mới có tác dụng!
==============================
__TRƯỜNG HỢP 2__
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
———————————————————–
/* Code CSS Internal: */
<style>
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.box0 {
box-sizing: content-box;
}
.box5 {
width: 100px;
height: 100px;
border: 10px solid;
padding: 10px;
}
p {
padding: 5px;
border: 2px solid red;
background-color: yellow;
text-align: center;
}
</style>
==============================
– Trường hợp này ta thấy: Phần tử chung là * {} ta đã set cho chúng thuộc tính "inherit", thẻ html to nhất trang được set là "border-box", vì vậy Phần tử chung là * {} có thuộc tính "inherit" sẽ kế thừa lại phần tử Cha của nó. Có nghĩa là: class "box0" là Cha của các class "box1", "box2", "box3", "box4", "box5". Khi đó chúng ta lại set cho class ".box0" có thuộc tính là content-box, lúc này "box5" là con của "box0" cũng sẽ được kế thừa thuộc tính "content-box" của Cha nó là "box0". Lúc này hiển thị lên trang web của chúng ta sẽ thấy thay đổi, box5 đã to ra bởi vì class "box5" lúc này là con của class "box0" nên nó đã kế thừa từ class "box0" thuộc tính content-box. Nếu muốn class0 ko ảnh hưởng, các class từ 1-5 mới có content-box thì chúng ta set content-box cho class "box1" là xong
==============================
ĐÓ CHÍNH LÀ LÝ DO VÌ SAO TA NÊN LÀM NHƯ SƠN ĐẶNG ĐÃ BẢO TỨC LÀ Ở TRƯỜNG HỢP 2, CHỨ KHÔNG PHẢI LÀM NHƯ TRƯỜNG HỢP 1.
TRONG THỰC TẾ VẪN CÓ TRANG WEB NGƯỜI TA LÀM TRƯỜNG HỢP 1, CŨNG CÓ NGƯỜI LÀM TRƯỜNG HỢP 2.
CHỈ LÀ CHÚNG TA NÊN LÀM THEO TRƯỜNG HỢP 2 THÌ SẼ THUẬN TIỆN CHO CHÚNG TA CODE SAU NÀY HƠN THÔI!
ở phần link font chữ vào file html, em làm theo xong thì k xuất hiện font chữ k có chân thì mình tùy chỉnh như thế nào ạ?
tNice tutorials actually was, and I'm just starting myself, I have no idea what I'm doing but I have a ton of ideas in my head. Ti to figure tNice tutorials out
Ad cho hỏi: Sao không thể dùng font-weight = 300, 500, 700, 900px. font-weight = bold thì lại được.
cho em xin file ảnh với anh ơi.
google roboto bên em sao kh tìm ra cái selection a nhỉ??
* box-sizing: border-box; –> tất cả các thẻ trong đều có box-sizing: border-box; –> ví dụ có 1 phần tử A chứa nhiều phần tử khác (như phần tử B, C, D. v.v…) mà ta ko mún phần tử A và các phần tử chứa trong nó có box-sizing: border-box; thì phải viết box-sizing: unset; cho phần tử A, B, C, ….
Nếu viết kiểu của a Sơn thì chỉ cần xét box-zing: unset; cho phần tử A thôi (do là inherit nên các phần tử con sẽ thừa hưởng từ phần tử cha, mà ta xét unset cho A rồi nên các thẻ con bên trong sẽ cũng ko có box-sizing). Mình nghĩ vậy ko biết có đúng ko, các bạn tham khảo nhá!
*,{
box-sizing: inherit;
}
box-sizing: inherit : kế thừa kích thước hộp của phần tử mẹ . Phần tử mẹ ở đây là html à m.n
Cái plugin đo web là gì vậy a
anh ơi, hoặc ai biết chỉ giùm mình mới ạ font tiếng nhật thì roboto không có nên em tra là noto sans jp nhưng khi tìm hiểu để viết về font -family thi Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', Verdana, sans-serif
phần base.css e bấm :root sau nó vẫn hiện chữ màu trắng v. với tự nhiên nó thêm dấu;
ai hiểu chỗ box-siizing; inherit giúp với ạ
Cảm ơn anh, các bài giảng rất dễ hiểu và chất lượng ạ
anh ơi đoạn .grid không phải là width: 100%; max-width: 1200px; à
:v