boostrap3使用2,记录学习笔记

本文介绍了HTML中的文本对齐方式,包括左对齐、居中、右对齐和两端对齐,并展示了如何使用class属性实现。此外,还探讨了内联列表的创建方法,通过class='list-inline'实现元素在同一行的排列。同时,详细阐述了块级元素与内联元素的区别,如行内元素无法设置宽高,而块级元素可以。最后,讨论了如何通过display属性转换元素的行为,如从内联到块级。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 新增的值)

记录学习的笔记

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值