css内边距 边框

/*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属性定义。*/

时间: 2024-10-12 23:02:00

css内边距 边框的相关文章

css内边距与外边距的区别

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性

CSS 内边距 padding 属性

CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 padding 属性可以改变上下左右的填充.   ⑶可能的值: ⑴length    定义一个固定的填充(像素, pt, em,等) ⑵%          使用百分比值定义一个填充 注意:padding 属性接受长度值或百分比值,但不允许使用负值.   ⑷示例1:如果你希望所有 h1 元素的各边都有

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

九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框出现在文档布局中,影响其他元素的框.比如一个高1inch的元素框出现在文档的开头,那么下面的元素框将至少从文档1 inch以下的位置出现. * 宽度和高度 如下图最暗一个矩形框(内容区)的高度和宽度. 一个重要问题:高度和宽度属性不能应用在行内非替换元素上.比如你应用一个高度在链接上不会影响布局.

CSS 内边距与外边距

写项目的时候一直用到边距,今天用了一下午的时间好好研究了一下边距,发现CSS边距并非那么简单.这里就和大家分享一下: 一.内边距 如下面代码 html: <div class="test"><div> css: .test{ width:100px; height:100px; background-color:#fbc; padding:10px 20px 30px 40px; } 这时候在这个div中会形成一个内容框它里顶部边框距离为10px,右边20px,

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

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

CSS边距---盒子模型

CSS盒子模型 盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所见的盒子也就是装东西的箱子,也具有这些属性,所以叫它盒子模型 其中content(内容)又可以有两个元素width(宽)和height(高) CSS边框样式 可以使用border-style来设置边框的样式,也可以分别来设置上下左右的样式: border-top-style border-left-

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框

css 尺寸、边框、内边距、背景以及css Sprite

上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> 强调 倾斜 双<ruby></ruby> 加拼音 <rt></rt> <strong> 加粗 强调 双<mark></mark> 标记 选中 双<sub></sub> 下标<sup><