0

0

css 盒模型相关样式_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:40:54

|

1103人浏览过

|

来源于php中文网

原创

  话不多说,一切还是从最基础的说起。

 盒的类型

 1.盒的基本类型

  在css中,用display定义盒的类型,一般分为block类型与inline类型。

  例如div属于block类型,span属于inline类型

立即学习前端免费学习笔记(深入)”;

  

               
我是div
我是span 我也是span

MiroThinker
MiroThinker

MiroMind团队推出的研究型开源智能体,专为深度研究与复杂工具使用场景设计

下载

  通过运行这段代码,我们可以清楚的可以看到block类型的宽度占满整个浏览器,而inline元素的宽度等于其内容的宽度

  每一行只允许容纳一个block元素,但是可以容纳多个inline元素。

  下来我们可以通过display属性把div改成block类型,把span改成inline属性,看下其运行效果。

  

               
我是div
我是span 我也是span

  2.inline-block类型

  inline-block属于block盒的一种,把元素的display属性设置成inline-block,其显示和设置

  成inline一样,但是元素的width、height属性只能作用于block元素上。

  

               
我是div
我是div2

 

 

 

  3.inline-table类型

  先看下列子

  

               大家好   
1
2
大家好

  table属于block类型,要想文字和table同行显示,需要把table的display属性设置成inline-table,但是各个浏览器

  对于文字和表格的对齐方式有所差别,一般情况下要设置其对齐方式。

  4.list-item类型

  可以将多个元素当做列表来显示,并在其前加上列表标记。

  

               
list1
list2
list3
list4
list5

 

  5.none类型

  把元素设置成none类型,该元素将不会被显示。

  6.overflow属性

  overflow属于用于对盒中内容显示不下时显示方法。

  

               
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

  同时还有overflow-x,overflow-y两个属性,可以单独给水平或者垂直方向超出盒范围的内容的显示

  显示方式进行设置。

   7.box-sizing属性

  box-sizing属性是css3中新增的盒模型属性。

  在css中使用width和height可以设置元素的宽度和高度,但是可以使用box-siziing属性,可以指定

  用width与height属性设置的宽度与高度是否包含元素内部的补白区域,以及边框的宽度和高度。

  box-sizing属性值为content-box,及border-box。content-box表示元素的宽度与高度不包括内部的补白区域

  及边框的宽度高度,border-box表示元素的宽度与高度包括内部补白区域及边框的宽度及高度。

               
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

25

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

8

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

622

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号