CSS盒模型( CSS margin 属性)

常见的图片

怎样理解呢看下面例如

'

设置的属性如下

.mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;}.main_two{width: 200rpx;height: 200rpx;background: red;
}

现在设置给红色的方块设置padding-tap 属性

代码如下


.mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;}.main_two{width: 200rpx;height: 200rpx;background: red;padding-top: 20rpx;
}

效果图

那相对第一张图片距离顶部有20rpx, 红色方块相对大方块并没有移动,但是文字却向下移动了

在设置padding-left 看看

代码如下


.mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;}.main_two{width: 200rpx;height: 200rpx;background: red;padding-top: 20rpx;padding-left: 20rpx;
}

效果图

红色方块变大了,因为设置的他的padding

在看看盒模型

padding增加要设置的content的距离

padding 里面有四个属性

padding-top: 100rpx;

padding-left: 100rpx;

padding-bottom: 20rpx;

padding-right: 20rpx;

这四个分别是上下左右

如果是padding : 20rpx 则是上下左右的距离

以上就是padding的使用,设置text 只是方便对比查看.

在看下盒模型上boder 这个也就是边框

先设置一下border-top看看


.mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;}.main_two{width: 200rpx;height: 200rpx;background: red;border-top: 20rpx solid slateblue;
}

效果图

border 就是给红色方块设置一个边框 ,使用solid 设置边框为实线,

(当然还可以设置其他的属相 dotted 点状 solid 实线 double 双实线 dashed虚线)

border 使用和padding类似有上下左右, 可以设置全部的可以单独设置

在看盒模型上的margin

设置了margin-left 和margin-top

设置下

 .mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;
}.main_two{width: 200rpx;height: 200rpx;background: red;display:inline-block;margin-left: 30rpx;margin-top: 30rpx;}

效果图

margin 是距离使用的时候和padding一样有上下左右,

如果使用margin 指的就是四个面的距离,

margin 使用的时候需要注意的点就是父类控件有没有padding ,这样会导致距离出现误差

例如父类控件设置了padding-top

代码如下

 .mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;padding-top: 30rpx;
}.main_two{width: 200rpx;height: 200rpx;background: red;display:inline-block;margin-left: 30rpx;margin-top: 30rpx;}

效果图

距离顶部变的很大了......

margin 使用还需要注意的是

1 margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

2 margin:10px 5px 15px;

上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

3 margin:10px 5px;

上外边距和下外边距是 10px
右外边距和左外边距是 5px

4 margin:10px;

所有 4 个外边距都是 10px

CSS盒模型( CSS margin 属性)相关推荐

css盒模型中margin很牛逼
css盒子模型,说简单也简单,用的时候也有不简单的. 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding.border.甚至定位.这在布局上很有用,要注意. ----- ...
css盒模型(css盒模型包括)
威龙模型1:35系列还有白盒.橙盒.p版.z版.sk版各是什么意? 白盒是限量版,价格都相对较贵;橙盒都是老货,虽然价格便宜,但是有些老板件不如新货给力;P版是精装版,Z版是防磁版,就是比普通版多一个 ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
CSS盒模型（详解）
目录前言一.什么是CSS盒模型二.标准模型+IE模型的区别 1.CSS如何设置两种盒模型 2.JS如何设置/获取盒模型对应宽高: 前言什么是css,css有几种,让我带你来了解一下一.什么是 ...
简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS字体、文本属性、CSS 盒模型
1.css字体 1.1 font-family 作用:设置文本的字体系列语法:font-family:字体名称: 常用值一个字体名称或系列名称(介绍常用字体名称.字体系列) 1.楷体 KaiTi ...
css盒模型和元素绘制
转自:http://www.mysjtu.com/page/M0/S438/438952.html 一.什么是css盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过 ...

CSS盒模型( CSS margin 属性)

常见的图片

怎样理解呢看下面例如

'

设置的属性如下

现在设置给红色的方块设置padding-tap 属性

代码如下

效果图

那相对第一张图片 距离顶部有20rpx, 红色方块相对大方块并没有移动,但是文字却向下移动了

在设置padding-left 看看

代码如下

效果图

红色方块变大了,因为设置的他的padding

在看看盒模型

padding增加要设置的content的距离

padding 里面有四个属性

padding-top: 100rpx;

padding-left: 100rpx;

padding-bottom: 20rpx;

padding-right: 20rpx;

这四个分别是上下左右

如果是padding : 20rpx 则是上下左右的距离

以上就是padding的使用,设置text 只是方便对比查看.

在看下盒模型上boder 这个也就是边框

先设置一下border-top看看

效果图

border 就是给红色方块设置一个边框 ,使用solid 设置边框为实线,

(当然还可以设置其他的属相 dotted 点状 solid 实线 double 双实线 dashed虚线)

border 使用和padding类似有上下左右, 可以设置全部的可以单独设置

在看盒模型上的margin

设置了margin-left 和margin-top

设置下

效果图

margin 是距离 使用的时候和padding一样有上下左右,

如果使用margin 指的就是四个面的距离,

margin 使用的时候需要注意的点就是父类控件有没有padding ,这样会导致距离出现误差

例如父类控件设置了padding-top

代码如下

效果图

距离顶部变的很大了......

margin 使用还需要注意的是

1 margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

2 margin:10px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

3 margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

4 margin:10px;

所有 4 个外边距都是 10px

CSS盒模型( CSS margin 属性)相关推荐

最新文章

热门文章

那相对第一张图片距离顶部有20rpx, 红色方块相对大方块并没有移动,但是文字却向下移动了

margin 是距离使用的时候和padding一样有上下左右,