|
Содержащий элемент определяется следующим образом:
Для следующего примера содержащие блоки указаны в таблице
1. | <HTML> |
2. | <HEAD> |
3. | <TITLE>Содержащие блок</TITLE> |
4. | </HEAD> |
5. | <BODY id="body"> |
6. | <DIV id="div1"> |
7. | <P id="p1">This is text in the first paragraph...</P> |
8. | <P id="p2">This is text <EM id="em1"> in the |
9. | <STRONG id="strong1">second</STRONG> paragraph.</EM></P> |
10. | </DIV> |
11. | </BODY> |
12. | </HTML> |
Блок созданный | Исходный блок |
body | Зависит от браузера |
div1 | Body |
p1 | div1 |
p2 | div1 |
em1 | p2 |
strong1 | p2 |
Если мы изменим свойство position для элемента div1, например, так:
1. | div1 { position: absolute; left: 50px; top: 50px } |
2. |
Проверим остальные правила – измените свойство position для строчного элемента em, следующим образом:
1. | #div1 { position: absolute; left: 50px; top: 50px } |
2. | #em1 { position: absolute; left: 100px; top: 100px } |
3. |
1. | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
2. | <HTML> |
3. | <HEAD> |
4. | <TITLE>Содержащий элемент</TITLE> |
5. | <style type="text/css"> |
6. | BODY{ |
7. | border:2px solid red; |
8. | } |
9. | div{ |
10. | border:2px solid blue; |
11. | margin:10px; |
12. | } |
13. | p{ |
14. | border:2px solid green; |
15. | margin:10px; |
16. | } |
17. | em{ |
18. | border:2px solid yellow; |
19. | margin:10px; |
20. | } |
21. | |
22. | #div1 { position: absolute; left: 50px; top: 50px } |
23. | #em1 { position: absolute; left: 100px; top: 100px } |
24. | </style> |
25. | </HEAD> |
26. | <BODY id="body"> |
27. | <DIV id="div1"> |
28. | <P id="p1">This is text in the first paragraph...</P> |
29. | <P id="p2">This is text <EM id="em1"> in the |
30. | <STRONG id="strong1">second</STRONG> paragraph.</EM></P> |
31. | </DIV> |
32. | </BODY> |
33. | </HTML> |
34. |
Блок созданный | Исходный блок |
body | Зависит от браузера |
div1 | Зависит от браузера |
p1 | div1 |
p2 | div1 |
em1 | div1 |
strong1 | em1 |