Nếu thiết kế của bạn yêu cầu theo chiều ngang lát gạch đồ họa, bạn có thể sử dụng lặp lại-x Bởi vì CSS cho phép bạn áp dụng một màu hex và một hình ảnh đến một yếu tố duy nhất, bạn có thể (với một chút kế hoạch) cạo râu một vài byte từ kích thước tập tin của bạn bằng cách sử dụng CSS để vẽ các khu vực của màu sắc phù hợp (được biết đến | Chapter 7 Yes that s right red on blue. We never said we were discriminating when tossing together code examples. But before you slam this book shut in a fit of palette-driven indignation let s examine how these two elements appear on the page. As you can see in Figure 7-3 we ve taken the liberty of applying some basic type information to our document as well Times New Roman is so 1995 . But with our somewhat garish we ll admit colors and borders activated we can see that the two divs are placed in the normal document flow the inner block is a child of the outer block and the page s current display reflects that. Figure 7-3 Our bland-looking elements in the normal document flow However by using CSS to change the value of the inner element s position property our design doesn t have to be reflect this parent-child relationship. We can add three brief lines to our tinner selector inner background FDC border 4px solid 930 position absolute right 20px top 20px 248 Building a Flexible Three-Column Layout The difference is rather marked as Figure 7-4 shows. We ve visually broken the parent-child relationship between the two divs. While the inner block is still a child of the outer one in the markup we ve used CSS to override the former s position in the normal document flow. Instead we ve positioned it absolutely offsetting it 20 pixels from the topmost and rightmost edges of the body of our document. Figure 7-4 In the markup the topmost block is a child of the bottom one. However using position absolute removes the block from the document flow and positions it relative to the viewport. The inner block typically appears in the normal flow of the document in the context established by the other block-level elements that surround it in the markup. Our rule has redefined that context and placed it in one that is relative to the boundaries of the browser window. This is why the body root of our docu-ment the html element is also known as the initial .
