tôi không thấy sự khác biệt giữa:Sự khác nhau giữa việc áp dụng các quy tắc css cho html so với cơ thể là gì?
html {
background: #f1f1f1;
}
và
body {
background: #f1f1f1;
}
Bất kỳ lời giải thích?
html là cha mẹ của nội dung. Một cách để thấy sự khác biệt là:
html {
overflow: scroll;
}
body {
overflow: scroll;
}
Bạn sẽ thấy rằng có hai bộ thanh cuộn lồng nhau, một phần của html và phần bên trong thuộc về cơ thể.
Tôi tin rằng, tức là chiều cao cũng khác nhau (chiều cao cửa sổ trình duyệt thực tế (html) so với chiều cao tài liệu (thân)). Không chắc chắn nếu có bao giờ đóng một vai trò w/o sử dụng javascript ... –
Thường không có bất kỳ sự khác biệt nào cả, vì các yếu tố đó vừa được coi là chiếm toàn bộ màn hình. Nó giống như có một div bên trong một số div khác. Nhưng tôi nghĩ rằng đó là chính xác hơn để tạo kiểu cho thẻ body, bởi vì html không thực sự là một phần của layout.
Cung cấp cho cơ thể của bạn một số lợi nhuận và bạn sẽ thấy sự khác biệt. 'html {background-color: green; } body {padding: 2em; lề: 2em; màu nền: màu vàng; } ' –
Không có sự khác biệt thực sự (nếu bạn chỉ nói về nơi áp dụng background, nếu không BoltClock's answer to this other question phù hợp hơn). html là một phần tử, giống như body.
Cả hai đều là lựa chọn hợp lệ và cả hai đều sẽ hoạt động trong tất cả các trình duyệt phổ biến.
Các YUI Đặt lại ví dụ, chọn để thiết lập một background trên các yếu tố html thay vì body:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css
này yêu cầu bạn thiết lập của bạn background trên html, ví dụ xem: can't change body background color using CSS reset
Xem:http://dev.w3.org/csswg/css3-background/#special-backgrounds
Nền của phần tử gốc trở thành nền của canvas và vùng vẽ nền của nó mở rộng để che toàn bộ canvas , mặc dù bất kỳ hình ảnh nào có kích thước và vị trí tương ứng với phần tử gốc như thể chúng được vẽ riêng cho phần tử đó. (Trong các từ khác , khu vực định vị nền được xác định là cho phần tử gốc .) Nếu giá trị ‘nền màu’ gốc là ‘trong suốt’, màu nền của canvas là phụ thuộc vào UA. Phần tử gốc không vẽ lại nền này, tức là, giá trị đã sử dụng của nền của nó là trong suốt.
Và:
Đối với tài liệu có phần tử gốc là một yếu tố HTML HTML [HTML401] hoặc một yếu tố html XHTML [XHTML11]: nếu giá trị tính toán của 'background-image' trên phần tử gốc là 'none' và màu nền là 'là' trong suốt ', tác nhân người dùng phải thay thế truyền giá trị được tính của thuộc tính nền từ phần tử cơ thể HTML BODY hoặc XHTML cơ thể đầu tiên của phần tử đó.Các giá trị được sử dụng thuộc tính nền của phần tử BODY là giá trị ban đầu của chúng, và các giá trị được truyền được coi như được chỉ định trên phần tử gốc . Chúng tôi khuyên các tác giả của tài liệu HTML chỉ định nền canvas cho phần tử BODY chứ không phải phần tử HTML .
gì mà bức tường của văn bản được nói là đã chứng minh ở đây:
background trên chỉ body: http://jsfiddle.net/hhtzE/background trên html và body: http://jsfiddle.net/hhtzE/1/background chỉ html: http://jsfiddle.net/hhtzE/2/Trong khi body và html thường có thể được xử lý giống nhau, chúng là không phải điều tương tự. body có thể có lề, đệm và đường viền và được di chuyển tương đối với phần tử html. Đôi khi tôi sử dụng lề và phần đệm cơ thể để tạo một "trang" màu trắng trên nền sáng, và nó in giống như nó trông.
Xem this fiddle cho một ví dụ đơn giản cho thấy cả hai có thể có các màu nền khác nhau.
CSS liên quan là như tôi nhận xét trong nomulous' câu trả lời:
html {
background-color: #ffffc0;
}
body {
padding: 2em;
margin: 2em;
background-color: white;
border: 1px solid black;
}
Ngoài ra còn có các yếu tố :root vì không phải tất cả các trình duyệt (cough.ie.cough) điều trị các yếu tố html như thư mục gốc của DOM .
Bạn cũng có thể đặt lề/đệm/đường viền trên' html', nếu bạn muốn. Tôi chắc rằng bạn biết điều đó, nhưng câu thứ hai của bạn có vẻ như nó nói rằng bạn không thể làm điều đó. – thirtydot
@thirtydot - vâng, làm rõ, cảm ơn. Tôi * không * làm điều đó nhưng tôi * có thể * làm điều đó. –
Ai đó đã viết ở đây luôn cao 100% nhưng không đúng!
Cố gắng làm (thử nghiệm trên FF4):
html{
background:yellow;
}
body{
background:red;
height:100px;
}
<body> màu ảnh hưởng đến <html> màu chỉ khi <html> không có bộ màu. Điều khó chịu nhất ở đây là khi <body> có màu và <html> không, một số phiên bản trình duyệt sẽ gặp sự cố với phần tử chặn con trực tiếp cuối cùng có lề. Màu sắc sẽ bị cắt sau khi phần tử và lề sẽ có màu là <html>. Điều này luôn đúng khi màu <html> được đặt.
Mặt khác, khi nền <html> được đặt, <body> có thể có lợi nhuận ví dụ. Điều này chỉ đơn giản là lộn xộn.
Thực tiễn tốt nhất cho đến nay là áp dụng màu nền, phông chữ, v.v. cho cả hai. Đơn giản chỉ cần mỗi khi bạn sẽ viết:
body{}
thay đổi nó để:
body,html{}
Không sử dụng bất kỳ CSS thuộc tính hộp mô hình trên <body> và <html> (hoặc để lại nó chưa sửa đổi ở tất cả, chỉ để có Yên tâm).Tạo phần tử bên trong (có thể có chiều rộng 100%) và làm việc với nó thay thế.
Có liên quan (với tiêu đề, dù sao): http://stackoverflow.com/questions/4565942/should-global-css-styles-be-set-on-the-html-element-or-the-body- phần tử – BoltClock