Màu nền của thẻ BODY được áp dụng cho toàn bộ HTML

Tôi đang nhầm lẫn về kích thước của thẻ body trong html.Màu nền của thẻ BODY được áp dụng cho toàn bộ HTML

Tôi có một mã số khó khăn như sau:

<body> 

</body>

body{ 
     padding: 0px; 
     height: 100px; 
     background-color: #e5e5e5; 
    }

Tại sao bìa nền tất cả các trang ?, tôi nghĩ nó chỉ nên bao gồm 100px,

Xin giải thích này cho tôi, cảm ơn sự giúp đỡ của bạn!

Nguồn

2013-07-23 ThiepLV

Tôi không hiểu tại sao điều này lại nhận được phiếu bầu? Tôi cũng không hiểu câu hỏi đó. Bạn đã hỏi lý do tại sao nó không bao gồm toàn bộ trang, nhưng bạn đã trả lời rằng chính bạn bằng cách nói rằng bạn đã cho nó một chiều cao 100px? Nó đang làm chính xác những gì bạn đã nói với nó để làm gì? Bạn có thể đặt màu nền trên thẻ html, nhưng câu trả lời của @ aashnisshah dưới đây sẽ (cần) phục vụ cho nhu cầu của bạn. – seemly

@seemly: có chỉnh sửa không hợp lệ đối với câu hỏi, bạn có thể xem lịch sử câu hỏi, OP hỏi tại sao nền thực tế được áp dụng cho toàn bộ trang. –

@seemly, hãy thử và hiểu câu hỏi. Anh ấy muốn hỏi tại sao màu Bg lại được áp dụng cho toàn bộ trang. Thành thật mà nói, aashnisshah của không trả lời câu hỏi và nó deviates từ những gì trả lời OP tìm kiếm của – AnaMaria

Đây thực sự là confusi ng, nhưng nó được quy định cụ thể trong đặc tả CSS 2.1, khoản 14.2 Background: nếu giá trị tính toán của background-color là transparent và giá trị được tính là background-image là none cho phần tử html (như mọi thứ theo mặc định), thay vào đó, trình duyệt phải sử dụng giá trị đã tính thuộc tính nền cho phần tử body và không được hiển thị nền cho body (tức là làm cho nó trong suốt). Tức là, body nền kỳ diệu sẽ biến thành nền html nếu html thiếu nền của riêng nó - và điều này chỉ ảnh hưởng đến thuộc tính nền chứ không ảnh hưởng đến chiều cao thực sự của phần tử body.

Tôi đã không thấy bất kỳ lý do nào cho quy tắc kỳ lạ này, quy định một loại "thừa kế ngược". Nhưng nó được xác định rõ ràng trong CSS 2.1 và được trình duyệt áp dụng.

Như đã giải thích trong câu trả lời khác, bạn có thể làm cho nội dung của bạn có một nền tảng của chiều cao cụ thể hoặc bằng cách thiết lập một nền tảng về html (để body nền thực sự áp dụng cho chỉ body) hoặc bằng cách sử dụng các yếu tố bao bọc bên trong body và thiết lập chiều cao trên đó (vì quy tắc đặc biệt chỉ áp dụng cho body).

Nhờ Anne van Kesteren, người đã chỉ ra thông số CSS khi tôi hỏi về điều này trong danh sách gửi thư WHATWG. (Tôi nghĩ rằng tôi biết CSS 2.1 bằng trái tim nhưng thực sự thì không.) 2)

Nguồn

2013-07-23 18:15:20

Đây là câu trả lời đúng và giải thích đúng nguyên nhân của vấn đề. Câu trả lời này phải là câu trả lời được chấp nhận! –

Ngoài ra, vào một thời điểm nào đó trước năm 2009, hành vi này đã được chỉ định khác nhau đối với tài liệu HTML và XHTML và các trình duyệt cũ hoạt động theo cách này, nhưng thông số được thay đổi: https://groups.google.com/forum/#!topic/mozilla .dev.tech.css/HLBSyyITk_w –

@Jukka Cảm ơn bạn, tôi đã đọc, nhưng tôi không hiểu canvas là gì !, bạn có thể giải thích cho tôi không? – ThiepLV

Cơ thể là một thẻ HTML đặc biệt và thường bao gồm toàn bộ trang HTML. Hãy thử như sau:

<body> 
    <div id="content"> 
     Content goes here 
    </div> 
</body>

và CSS để đi cùng với nó sẽ là:

body{ 
    /* whatever body related codes you'd like to use go here */ 
} 

#content{ 
    padding: 0px; 
    height: 100px; 
    background-color: #e5e5e5; 
}

Nguồn

2013-07-23 09:46:39 aashnisshah

Ở đây chiều cao của phần tử 'body' được đặt thành 100px và câu hỏi là lý do tại sao nền của nó vẫn được áp dụng cho toàn bộ trang. –

Phần tử 'body' * không * thường che phủ khung nhìn. Vấn đề nền là trường hợp đặc biệt được mô tả riêng trong thông số CSS 2.1: http://www.w3.org/TR/CSS21/colors.html#background –

Bạn nên xác định một cách rõ ràng background color for the html tag (như các trình duyệt thêm nó tự động), nếu không, nền của body được lan truyền khắp tài liệu.

Nguồn

2013-07-23 09:50:39 YardenST

Điều này không trả lời câu hỏi “tại sao”. –

Nội dung được xử lý như html (vì nó đại diện đồ họa của tài liệu, html chứa các nội dung khác:

) vì vậy trừ khi đặt rõ ràng thuộc tính css thành , nó sẽ hoạt động giống như tất cả các trang – YardenST

Đó là những gì dường như đang diễn ra giải thích hay lý do gì trong thông số kỹ thuật HTML hoặc CSS? Điều này chỉ xảy ra với nền. Ví dụ: nếu bạn đặt đường viền trên 'body', nó sẽ được vẽ xung quanh hộp của phần tử' body'. –

Nhiều nhà phát triển web không hiểu sự khác biệt giữa cách áp dụng kiểu cho phần tử nội dung so với phần tử html. Hầu hết thời gian các tác giả này sẽ chỉ áp dụng kiểu cho phần tử cơ thể; khi đó là không đủ, họ sẽ spam tất cả các loại phong cách trên cả hai html và cơ thể cho đến khi trang xảy ra để tìm chính xác.

Sự nhầm lẫn là dễ hiểu. Ban đầu, cả hai đều được xử lý tương tự, với các thuộc tính như màu nền được áp dụng cho thẻ body, ảnh hưởng đến toàn bộ trang.

EDIT: Để đơn giản hóa điều tôi đã thêm một fiddle để chứng minh làm thế nào màu nền được áp dụng. Nếu bạn chỉ định màu nền cho cơ thể và bạn DONT muốn nó lan đến toàn bộ trang bạn phải chỉ định các background-color cho HTML quá

FIDDLE

CSS

html{ 
    background-color:yellow; 
} 
body{ 
     padding: 0px; 
     height: 100px; 
     background-color: red; 
    }

Nguồn

2013-07-23 09:59:44 AnaMaria

Điều này không trả lời câu hỏi (lý do tại sao nền 'body' được áp dụng cho toàn bộ trang). –

@ JukkaK.Korpela, Đôi khi những điều tầm thường như thế này là tốt nhất còn lại không giải thích được. Bây giờ nếu chúng ta bắt đầu đưa ra lời giải thích cho "tại sao trà được phục vụ tốt nhất nóng?", Chúng ta sẽ không làm cho nó đến cuối ngày, phải không? Chỉ đùa thôi. Thành thật mà nói, tôi không biết. :) – AnaMaria

Màu nền của thẻ BODY được áp dụng cho toàn bộ HTML

Trả lời

Các vấn đề liên quan