display模亿博电竞式

发布时间：2023-06-30 丨 浏览次数：

　　亿博电竞为了让大家观察到这两类模式的特点，在下面的例子中，我们为元素设置一个背景色以及外边距：

　　这是一个很长很长很长很长很长很长很长很长很长很长很长很长段落，整个段落就是一个块标记

　　这是一个很长很长很长很长很长很长很长很长很长很长很长很长段落，整个段落就是一个块标记

　　除了浏览器默认的模式外，在CSS中还可以通过设置display属性强制浏览器按其他模式来渲染元素。在设置display模式时亿博电竞，应该注意以下几点：

　　你可以通过在CSS中设置元素的display:block，来强制让元素以块模式渲染。设置为块以后，元素会独占一行，而且可以为其设置高度和宽度，也可以通过坐标精确地控制它们的位置。

　　你可以通过在CSS中设置元素的display:inline，来强制让元素以行内模式渲染。设置为行内后，你将无法为元素设置高度和宽度亿博电竞，也无法精确控制它们的位置，它们的位置由其所在的文本流状态决定。

　　有时为了需要，你可能希望元素既有块的特点（能设置高度宽度），又有行内的特点（能跟随文本流动）亿博电竞，这个时候，你需要把该元素的现实属性改成“行内块”，即display:inline-block。

　　上面几种只介绍了几种常见的模式，要进一步了解display属性亿博电竞，请参考MDN

　　试试通过CSS改变一个元素的display属性，然后看看会发生什么变化。注意亿博电竞，浏览器默认会按照block模式渲染div标记。

　　除了block与inline外，flex也是一种非常有用的模式。利用flex，可以控制一组元素标记的宽度保持一个固定的比例关系。先来看看下面的使用示例：

　　上例中，我们给父级容器div.flexbox设置了 display:flex后，其子级容器，就会按照flex模式显示。

　　使用css flex按照下面的设计稿制作水平排列的导航栏。设计稿源文件可在这里下载。

　　注意：请参考前一个导航栏的示例使用ul，li和a标签来构建导航栏的HTML结构；左侧的logo可以使用css background的方式来显示。