Css盒模型属性详解(margin和padding)
Css盒模型属性详解(margin和padding)
大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识!
关于盒模型的属性详解及用法
盒模型基本属性有两个:padding和margin。
以边框border为界,边框里面是内边距,边框外面是外边距。
1.内边距padding:如上图,如果父元素设置了边框,内边距是指235*240大小的内容区与边框之间的距离,不管父元素是否设置边框,更准确地说,内边距可以控制父元素和子元素或者元素和内容之间的距离(元素相对于内容来说也是父元素),padding属性要加在父元素的css属性里。padding值会把元素原有大小撑大,如果想让元素维持原有大小,一定要在元素宽高上减去所加padding值。
padding的复合式写法:
padding:10px;(表示元素上下左右内边距都是10px)
padding:10px 10px;(表示元素上下内边距是10px,左右内边距是10px)
padding:10px 10px 10px;(表示元素上内边距是10px,左右内边距是10px,下内边距是10px)
padding:10px 10px 10px 10px;(表示元素上内边距是10px,右内边距是10px,下内
边距是10px,左内边距是10px)
padding的分开式写法:
padding-top: 10px;(表示元素上内边距是10px)
padding-right: 10px;(表示元素右内边距是10px)
padding-bottom: 10px;(表示元素下内边距是10px)
padding-left: 10px;(表示元素左内边距是10px)
2.外边距margin:如上图,如果父元素设置了边框,外边距是指边框以外与其他同辈元素之间的距离,不管父元素是否设置边框,更准确地说,外边距可以控制同辈元素之间的距离。
margin值不会撑大元素原有大小,但会增加它所占区域。上下两个元素之间的的margin值会重叠显示,取两个值中最大的值。左右margin值不会叠加。
margin的复合式写法:
margin:10px;(表示元素上下左右外边距都是10px)
margin:10px 10px;(表示元素上下外边距是10px,左右外边距是10px)
margin:10px 10px 10px;(表示元素上外边距是10px,左右外边距是10px,下外边距是10px)
margin:10px 10px 10px 10px;(表示元素上外边距是10px,右外边距是10px,下外
边距是10px,左外边距是10px)
margin的分开式写法:
margin-top: 10px;(表示元素上外边距是10px)
margin-right: 10px;(表示元素右外边距是10px)
margin-bottom: 10px;(表示元素下外边距是10px)
margin-left: 10px;(表示元素左外边距是10px)
Css盒模型属性详解(margin和padding)的更多相关文章
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...
- CSS盒模型属性详细介绍
一.概述 CSS盒模型是定义元素周围的间隔.尺寸.外边距.边框以及文本内容和边框之间内边距的一组属性的集合. 示例代码: <!DOCTYPE html> <html lang=&qu ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...
- css中border-sizing属性详解和应用
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...
- 详解CSS盒模型(转)
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
- 详解CSS盒模型
原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...
- css 11-CSS3属性详解(一)
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
随机推荐
- 使用Rancher pipeline搭建基于容器的CICD
CICD概述 CI-持续集成(Continuous Integration):频繁地将代码集成到主干的一种开发实践,每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错 ...
- IOC初始化销毁的2种实现方式
IOC初始化销毁的2种实现方式 1.bean内调用init-method 和destroy-method 2.通过注解实现@PostConstruct 和@PreDestroy ----------- ...
- ionic2踩坑之自定义插件开发及调用
关于ionic2自定义插件开发的文章,插件怎么调用的文章,好像网上都有,不过作为一个新手来说,从插件的开发到某个页面怎么调用,没有一个完整的过程的话,两篇没有关联的文章也容易看的迷糊.这里放到一起来方 ...
- string删除与查找erase,find
s.erase( 指针位置 , 删除长度 ) 返回值修改后的string对象引用 find(string, int):第一个参数用来指示要查找的字符,第二个参数用来表示从字符串的何处开始查找子串(默认 ...
- <JZOJ4726>种花
挺有意思的贪心 神奇的贪心 #include<cstdio> #include<iostream> #include<cstring> #include<al ...
- 奇异值分解SVD
在介绍奇异值分解(SVD)之前我们先来回顾一下关于矩阵的一些基础知识. 矩阵基础知识 方阵 给定一个$ n×m $的矩阵$ A $,若n和m相等也就是矩阵的行和列相等那矩阵$ A $就是一个方阵. 单 ...
- Ubuntu和window10 安装双系统
先安装window10,然后空出一部分储存空间,我空出来了103G. 然后安装ubuntu分区的时候注意: 刚开始安装的时候:出现安装类型的时候:选择其他选项: 在分区的时候:单击127117(这里是 ...
- 从一道网易面试题浅谈 Tagged Pointer - darcy_tang 的博客
前言 这篇博客九月就想写了,因为赶项目拖了到现在,抓住17年尾巴写吧~ 正文 上次看了一篇 <从一道网易面试题浅谈OC线程安全> 的博客,主要内容是: 作者去网易面试,面试官出了一道面试题 ...
- OpenStack入门
云计算优势 降低成本,安全稳定,易扩展. 云计算三种服务模式 IaaS:基础设施即服务 IaaS(Infrastructure-as-a- Service):基础设施即服务.消费者通过Internet ...
- 录音文件lame转换MP3相关配置
文件下载整个功能完成了,那么对应的文件上传也跑不了.So~ Look here~ 业务需求是录制音频然后上传到七牛并且Android可以读. 与安卓沟通了一下统一了mp3格式,大小质量都不错.由于AV ...