Question: Target unordered list elements within nav elements, and use Flexbox to evenly space the children. Answer: html < nav > < ul > < li >< a > INFO </ a ></ li > < li >< a > HTML </ a ></ li > < li >< a > CSS </ a ></ li > </ ul > </ nav > css: nav > ul { display: flex ; justify-content: space-evenly ; }
a viewport definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves SEO (search engine optimization). < meta name = "viewport" content = "width=device-width, initial-scale=1" > 尤其是对手机浏览器，这个viewport告诉浏览器如何排列页面。
clear元素用来清除左边或者右边或者两边的浮动元素(float) 比如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> img { float:left; border:1px solid red; } p.clear { clear:both; } </style> </head> <body> <img src="logocss.gif" width="95" height="84" /> <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p> </body> </html> 第一段p没有指定clear，因此左边会有图片，而第二段class是clear，clear: both，清除了两边的浮动元素，左右都不会出现浮动元素，所以它自己占单独的行，不和其他浮动元素占一行。
float元素的初心是为了图片的环绕样式，CSS可以设置元素(element)在容器(container)中的位置。 <div class="right">This will be placed in the right of the parent container.</div> .right { float: right ; }