热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css盒模型有哪些属性

css盒模型的属性有:1、margin属性;2、border属性;3、transparent属性;4、padding属性。

css盒模型的属性有:1、margin属性;2、border属性;3、transparent属性;4、padding属性。

CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。

(学习视频推荐:css视频教程)

示例代码:



    
    
    


    

效果图:

由此可见:外边距margin是不可见的,如果设置了父元素的背景,就可以看到;背景色在边框区域设置一个不同的背景,就可以看到内边距(padding)区域。并且盒模型是由margin(外边界)+border(边框)+padding(内边距)+content(内容)构成的。

二、属性介绍

1、margin属性

概念:margin属性应用于盒子外面的空间,或者是位于盒子与文档中其他元素之间的区域,或者是盒子与浏览器窗口之间的区域。margin长在盒子外围的,不会对盒子本身的大小造成影响。

属性:margin-top(上外边界)、margin-right(右外边界)、margin-bottom(下外边界)、margin-left(左外边界)

值:支持length、百分比、auto

用法:

margin:10px 四周(上,右,下,左)
margin:10px 20px 上下 左右
margin:10px 20px 30px 上 左右 下
margin:10px 20px 30px 40px 上右下左
margin支持负值!!
让子元素在父元素里面左右居中:margin:0 auto;

margin常见的bug:

a:当父元素和子元素都没有浮动的情况下:给第一个子元素添加margin-top:会错误的把margin值加在父元素上面

实例代码:



    
    
    


    

效果图:

示例代码:

.boxInner{
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            background: skyblue;
        }
        .other{
            width: 50px;
            height: 50px;
            background: #999;
            margin-top: 20px;
        }
    


    

效果图:

可以看出外边距折叠。当boxInner的下外边距和other元素的上外边距接触时,外边距发生了折叠!,他们之间只有20px,而不是40px;

2、边框

border属性:用来控制盒边框的宽度,样式,颜色。

属性:值(不支持百分比)常用px

border:10px solid red;
border-width:10px;      
border-style:solid;      
border-color:red;

线性: solid(实线) dashed(虚线) dotted(点状线) double(双线) none/0(没有边框)

给单一一个方向添加边框:

border-left/right/top/bottom:10px solid yellow;

边框设置方法; 

border:solid red;
border-width:;
一个值:四周
两个值:上下 左右
三个值:上 左右 下
四个值:上右下左

3、transparent; 代替颜色值 为 透明

4、padding属性:内边距是元素的内容和边框之间的区域

用法:

 1:padding是添加在父元素(盒子)上的      
 2:padding 调整子元素在父元素里面的位置关系      
 3:padding会把盒子撑大。      
 4:想让盒子保持原有的大小:在宽高的基础上减掉padding值。      
 5:给单一一个方向添加padding值: padding-top/bottom/left/right:      
 6:padding设置方法:      
 padding:10px 四周      
 padding:10px 20px 上下 左右      
 padding:10px 20px 30px 上 左右 下      
 padding:10px 20px 30px 40px 上右下左
7:padding不会对背景图造成影响      
8:padding的值不能为负值!!!

对比padding和margin

1.padding区域是边框内边缘和内容外边缘之间的区域。
2.auto关键字对padding属性不起作用。
3.padding属性不可以接受复制。
4.padding不存在内边距折叠,只有外边距折叠。


推荐阅读
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • 本文介绍了JSP的基本概念、常用标签及其功能,并通过示例详细说明了如何在JSP页面中使用Java代码。 ... [详细]
  • 使用JavaScript实现随机抽号功能
    本文介绍了如何利用JavaScript来实现一个简单的随机抽号系统。用户可以设置数字范围,系统将从该范围内随机抽取数字,并在每次抽取后自动从候选列表中移除已抽取的数字,确保每个数字仅被抽取一次。文章还提供了HTML和CSS的示例代码,以帮助读者更好地理解和实现这一功能。 ... [详细]
  • CSS技巧:创建带有背景图的按钮
    本文详细探讨了使用CSS创建带有背景图片的按钮的方法,并提供了具体的实例代码,帮助开发者解决实际开发中的相关问题。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 本文介绍了如何在Windows操作系统中安装FFTW库,并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换(FFT)的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细]
  • LIN总线技术详解
    LIN(Local Interconnect Network)总线是一种基于UART/SCI(通用异步收发器/串行接口)的低成本串行通信协议,主要用于汽车车身网络中智能传感器和执行器之间的通信。 ... [详细]
  • 在使用KVM虚拟化技术通过NAT模式启动虚拟机时,可能会遇到qemu-ifup-nat脚本执行失败的错误。本文将详细介绍如何诊断和解决这一问题。 ... [详细]
  • CSS模块化命名 ... [详细]
author-avatar
a5365258784
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有