1.排版之文本对齐样式
常用文本居中,添加class=’'text-center"
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
2.排版之内联列表
- 常用class="list-inline"添加。就是把元素放在同一行。
- 官方解释通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。
3.块级元素和内联元素
-
块级元素就是自占1行前后自带换行,相邻的块级元素将会在不同行显示。比如div,h1-h6,p标签。
-
内联元素 相邻标签会在同一行显示,不换行,比如a, i - 斜体,img - 图片,input - 输入框。
特点与区别
1.行内元素:不独占一行,不能设置宽(width)高(height)
2.块级元素:独占一行,能设置宽高
3.行内块元素:不独占一行,但可以设置宽高
- 可通过display属性转换。
display:可能的值。
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)