Sublime Text
<!DOCTYPE html> <html> <head> <style type="text/css"> .father{ border:1px solid black; height:70px; } .child_01{ background-color:skyblue; width:400px; } .child_02{ background-color:yellow; max-width:400px; } </style> </head> <body> <p>- Đối với phần tử sử dụng thuộc tính <b>width</b> hoặc <b>max-width</b>, nếu chiều rộng phần nội dung của cha nó lớn hơn chiều rộng của nó thì nó sẽ được hiển thị theo đúng kích thước được thiết lập.</p> <div class="father" style="width:500px"> <div class="child_01">- Lập Trình Web</div> <div class="child_02">- Lập Trình Web</div> </div> <p>- Đối với phần tử sử dụng thuộc tính <b>width</b>, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ bị tràn ra ngoài.</p> <p>- Đối với phần tử sử dụng thuộc tính <b>max-width</b>, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ tự động thu hẹp lại để có thể nằm gọn bên trong phần nội dung của cha nó <i>(tuy nhiên phải nhớ là không được sử dụng chung với thuộc tính width)</i></p> <div class="father" style="width:300px"> <div class="child_01">- Lập Trình Web</div> <div class="child_02">- Lập Trình Web</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> .father{ border:1px solid black; height:70px; } .child_01{ background-color:skyblue; width:400px; } .child_02{ background-color:yellow; max-width:400px; } </style> </head> <body> <p>- Đối với phần tử sử dụng thuộc tính <b>width</b> hoặc <b>max-width</b>, nếu chiều rộng phần nội dung của cha nó lớn hơn chiều rộng của nó thì nó sẽ được hiển thị theo đúng kích thước được thiết lập.</p> <div class="father" style="width:500px"> <div class="child_01">- Lập Trình Web</div> <div class="child_02">- Lập Trình Web</div> </div> <p>- Đối với phần tử sử dụng thuộc tính <b>width</b>, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ bị tràn ra ngoài.</p> <p>- Đối với phần tử sử dụng thuộc tính <b>max-width</b>, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ tự động thu hẹp lại để có thể nằm gọn bên trong phần nội dung của cha nó <i>(tuy nhiên phải nhớ là không được sử dụng chung với thuộc tính width)</i></p> <div class="father" style="width:300px"> <div class="child_01">- Lập Trình Web</div> <div class="child_02">- Lập Trình Web</div> </div> </body> </html>