/*1 元素的各边都有 10 像素的内边距  四个值上、右、下、左   两个上下,左右   三个值:上,左右,下*/
/*p {padding: 10%;}*/ h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
} /*下面这条规则把段落的内边距设置为父元素 width 的 10%:*/
p {padding: 10px 50px 100px 20px; background: red}

 内边框:

border-style:
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

等价:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
 border-color: blue red;

border-top-width

border-width: 15px 5px 15px 5px;

综合:宽度,样式,颜色

border: medium double rgb(250,0,255)

外边框:

margin: top right bottom left

定位:

static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative 相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute 绝对定位:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed 固定定位:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

}
/*fixed对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。*/

/*对象脱离正常文档流 绝对定位,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。*/

/*relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。*/

css内边距 边框的更多相关文章

  1. (转)css内边距与外边距的区别,精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  2. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

  3. CSS 内边距 padding 属性

    CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...

  4. CSS 内边距 外边距

    CSS 内边距 外边距 <html> <!-- style="margin: 0 auto" 将网页上方空白边距填满--> <body style=& ...

  5. CSS权威指南 - 内边距 边框 和 外边距

    九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...

  6. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  7. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  9. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. C++ template —— 动多态与静多态(六)

    前面的几篇博文介绍了模板的基础知识,并且也深入的讲解了模板的特性.接下来的博文中,将会针对模板与设计进行相关的介绍.------------------------------------------ ...

  2. .net页面生命周期【转】

    .Net 页面生命周期IIS 所收到的对某 Microsoft ASP.NET 页面的每个请求都被移交给 ASP.NET HTTP 管线.HTTP 管线由一系列托管对象组成,这些对象按顺序处理该请求, ...

  3. Mac下Intellij IDea发布JavaWeb项目 详解二 (新建Module)

    Step3 添加两个module 3.1 右键[WebWorkSpace]-[New]-[Module] 3.2 重复 准备工作1:新建第一个JavaWeb项目[1.6-1.11]的操作,建好一个名为 ...

  4. iOS - 布局NSLayoutConstraint动画的实现

    抛出问题:为何在用到用到constraint的动画时以下代码无法实现动画的功能 ,没有动画直接刷新UI跳到80 - (void)touchesBegan:(NSSet<UITouch *> ...

  5. php_admin_value open_basedir 引起的上传文件失败解决方法

    为了安全,我们通常会在虚拟主机设置中,加入这一行php_admin_value open_basedir "/usr/local/apache/htdocs/www"但这会导致mo ...

  6. Linux下添加FTP账号和服务器、增加密码和用户,更改FTP目录

    1. 启动VSFTP服务器 A:cenos下运行:yum  install  vsftpd B. 登录Linux主机后,运行命令:”service vsftpd start” C. 要让FTP每次开机 ...

  7. 如何安装win10和linux [ubuntu14]双系统

    https://jingyan.baidu.com/article/4d58d5411380dd9dd5e9c07e.html jpg 改 rar 

  8. Linux学习(二)

    Linux进程管理 每个 Linux 命令都与系统中的程序对应,输入命令,Linux 就会创建一个新的进程.例如使用 ls 命令遍历目录中的文件时,就创建了一个进程.简而言之,进程就是程序的实例. 创 ...

  9. Dropbox 在 Ubuntu 上需要认证授权的问题

    在 Ubuntu 上,通过 Ubuntu软件中心 搜索下载安装了 Dropbox . 运行时,弹出如下图的提示. 输入密码,点击 授权 后,没有出现 Dropbox 的运行界面. 再次点击运行,仍会出 ...

  10. SharpGL学习笔记(一) 平台构建与Opengl的hello World

    (一)平台构建与Opengl的hello World OpenGL就是3d绘图的API,微软针和它竞争推出D3D,也就是玩游戏时最常见的DirectorX组件中的3d功能. 所以不要指望windows ...