The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)
198 Chapter 15 Summary Although it introduces a number of unfamiliar new terms and concepts to CSS, Flexbox is an elegant and lo ...
16 Values and sizing Much of CSS3, from its many new selectors to layout and font properties, is designed to give you more granu ...
200 Chapter 16 Root-Relative Units The first new unit introduced in CSS3 is the rem, or root em. It behaves like the em unit fro ...
Values and Sizing 201 This code illustrates the problem: ... Now, imagine that .parent is 75 percent of the viewport width, an ...
202 Chapter 16 Internet Explorer 9 implemented vmin as the vm unit, but neither it nor IE10 supports vmax (support was added in ...
Values and Sizing 203 The expression first multiplies 10 percent by 5, and then adds it to the result of 15 percent multiplied b ...
204 Chapter 16 Although the standard model is more logical, at times the IE model is more convenient to use. In CSS3, you can op ...
Values and Sizing 205 All of the intrinsic and extrinsic sizing models are applied using a keyword value on the width or height ...
206 Chapter 16 fit-content The next intrinsic keyword value is potentially the most useful. Called fit-content, it sizes an elem ...
Values and Sizing 207 As you know, however, an element’s “real” width also includes padding and border, so, in this case, the p ...
208 Chapter 16 Browser Support and Legacy Syntaxes Chrome firefox safari ie Root-relative units Yes Yes Yes Yes Viewport-relativ ...
17 Gr id L ayou t Grids are a fundamental design technique. Simple grids have been used by calligra- phers since medieval times, ...
210 Chapter 17 grid layouT Before introducing the new CSS grid syntax, I’ll explain some of the termi- nology used in the Grid L ...
Grid Layout 211 Declaring and Defining the Grid The first step in creating a grid is to declare the grid container, the element ...
212 Chapter 17 And making one of those columns 3fr in width means the remaining width is divided into four equal portions of 50p ...
Grid Layout 213 Figure 17-3: A 3×3 explicit grid (lines and numbers added for clarity) frACTionS vS. PerCenTAGeS When used on th ...
214 Chapter 17 Placing Items in an Explicit Grid Every immediate child of a grid container becomes a grid item and should be pla ...
Grid Layout 215 By default, the item is fitted into the designated cell only, with any con tent that doesn’t fit overflowing the ...
216 Chapter 17 I’ll illustrate how to use them. Take a look at all of the individual prop- erties applied to the same element: F ...
Grid Layout 217 as in the previous example, but much more concisely; it defines one track that is 1fr wide and then uses repeat( ...
«
7
8
9
10
11
12
13
14
15
16
»
Free download pdf