您现在的位置是:首页 > Javascript
当前栏目
css内联样式的盒子模型
2023-03-15 23:13:14 时间
1、内联样式是不能设置width和height的。
2、它可以设置水平内边距,会影响页面布局,会将水平方向其他元素挤开。
但是垂直内边距则不会影响页面布局,它是选择覆盖其他元素。
3、它可以设置边框,垂直边框不会影响页面布局。
但是水平边框会(可以理解为跟水平内边距一样)
同时,内联元素支持水平方向的外边距,相邻元素外边距不会重叠而是求和。
内联元素不支持垂直外边框。
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: #bfa; } .box1{ width: 100px; height: 100px; background-color: red; } .s1{ /* 内容区、内边距 、边框 、外边距 * */ /* * 内联元素不能设置width和height */ /*width: 200px; height: 200px;*/ /* * 设置水平内边距,内联元素可以设置水平方向的内边距 */ padding-left: 100px ; padding-right: 100px ; /* * 垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局 */ padding-top: 50px; padding-bottom: 50px; /* * 为元素设置边框, * 内联元素可以设置边框,但是垂直的边框不会影响到页面的布局 */ border: 1px blue solid; /* * 水平外边距 * 内联元素支持水平方向的外边距 */ /* margin-left:100px ; margin-right: 100px; */ /* * 内联元素不支持垂直外边距 */ margin-top: 200px; margin-bottom: 200px; } .s2{ /* * 为右边的元素设置一个左外边距 * 水平方向的相邻外边距不会重叠,而是求和 */ /* margin-left: 100px; */ } </style> </head> <body> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <div></div> </body> </html>
以上就是css内联样式的盒子模型,希望对大家有所帮助。更多css学习指路:css教程
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件