thuoc tinh box sizing trong css3

http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Thuộc tính box sizing CSS3 Thuộc tính box sizing sử dụng để thay đổi chiều cao độ rộng phần tử Bắt đầu từ CSS2, thuộc tính box làm việc sau: width + padding + border = chiều rộng thực phần tử box height + padding + border = chiều cao thực phần tử box Nghĩa là, bạn xác định chiều cao chiều rộng, kích cỡ box lớn chút phải cộng thêm padding border vào chiều cao độ rộng bạn thiết lập Thuộc tính sizing CSS2 Ví dụ sau minh họa cách sử dụng thuộc tính sizing CSS2: div1 { width: 200px; height: 100px; border: 1px solid green; } div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } Hoc CSS co ban tai VietJack Hoc CSS co ban tai VietJack Kết Trong ví dụ trên, thiết lập chiều cao chiều rộng cho hai hình ảnh nhau, nhiên bạn thấy kết hiển thị khác nhau, hình thứ hai thêm thuộc tính padding Thuộc tính box sizing CSS3 Ví dụ minh họa cách sử dụng thuộc tính box-sizing CSS3: div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } Hoc CSS co ban tai VietJack Hoc CSS co ban tai VietJack Trong ví dụ trên, bạn để ý hai hình ảnh có chiều cao chiều rộng thuộc tính box-sizing:border-box http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Kết là: Mặc dù hình ảnh thứ hai, xác định thêm thuộc tính padding, nhiên việc sử dụng thuộc tính box-sizing:border-box, chiều cao chiều rộng hai hình   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... Mặc dù hình ảnh thứ hai, xác định thêm thuộc tính padding, nhiên việc sử dụng thuộc tính box- sizing: border -box, chiều cao chiều rộng hai hình   http://vietjack.com/