HTML学习第十一章------div和span 伪类和层叠

HTML学习第十一章------div和span

教材:Head First HTML与CSS


1. <div>元素

充当一系列相关元素的逻辑容器
通过将页面进行逻辑划分,将相关联的元素们归为一个逻辑部分,将页面分为几个逻辑部分。用<div>标记各部分, 可以为每个组设置一个id属性来添加一个唯一的标签。
在这里插入图片描述
这种逻辑划分可以便于他人理解分析网站结构并且便于自己后续的维护。

结构之间也可以进行嵌套
在这里插入图片描述
将cats和dogs放在pets结构中。

在这里插入图片描述
width属性来指定宽度,指定的是内容区的宽度。可通过像素或者百分数赋值,百分数表示的是相对于该元素所在容器(<body>, <div>等)的宽度的百分比。

无法直接定义整个元素的宽度,整个元素宽度通过内容区宽度,补白,边框和边界宽度相加组成。
不设置宽度时,块元素默认宽度为auto,会延伸到所有的空间,即浏览器的边界。auto使内容充满所有空间(除了补白,边框和边界)。

元素的高度默认使用auto,可以使得内容全部都能被看到,并随着宽度而自动调整,如果设置的高度太小会导致内容出现丢失,所以一般默认为auto。

text-align: center
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值