Sublime Text
<!DOCTYPE html> <html> <head> <style type="text/css"> .div_1{ border:1px solid black; height:200px; } .div_2{ height:50%; } .div_3{ background-color:yellow; height:inherit; } </style> </head> <body> <div class="div_1"> <div class="div_2"> <div class="div_3">- Lập Trình Web</div> </div> </div> <p>- <i><u>GIẢI THÍCH</u>:</i> Giá trị thuộc tính height của phần tử .div_3 sẽ kế thừa giá trị thuộc tính height từ phần tử cha của nó (tức là phần tử .div_2), khi đó giá trị thuộc tính height của phần tử .div_3 sẽ là "50%". Mà phần tử .div_2 có chiều cao bằng 50% chiều cao phần nội dung của phần tử .div_1, trong khi phần tử .div_3 có chiều cao bằng 50% chiều cao của phần tử .div_2, cho nên phần tử .div_3 có chiều cao khoảng 25% chiều cao phần nội dung của phần tử .div_1</p> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> .div_1{ border:1px solid black; height:200px; } .div_2{ height:50%; } .div_3{ background-color:yellow; height:inherit; } </style> </head> <body> <div class="div_1"> <div class="div_2"> <div class="div_3">- Lập Trình Web</div> </div> </div> <p>- <i><u>GIẢI THÍCH</u>:</i> Giá trị thuộc tính height của phần tử .div_3 sẽ kế thừa giá trị thuộc tính height từ phần tử cha của nó (tức là phần tử .div_2), khi đó giá trị thuộc tính height của phần tử .div_3 sẽ là "50%". Mà phần tử .div_2 có chiều cao bằng 50% chiều cao phần nội dung của phần tử .div_1, trong khi phần tử .div_3 có chiều cao bằng 50% chiều cao của phần tử .div_2, cho nên phần tử .div_3 có chiều cao khoảng 25% chiều cao phần nội dung của phần tử .div_1</p> </body> </html>