CSS padding（填充）position （定位）

最新推荐文章于 2023-06-26 17:20:51 发布
最新推荐文章于 2023-06-26 17:20:51 发布
阅读量2k 收藏 1
点赞数
分类专栏： css js web前端学习 文章标签： css

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

可能的值

值说明
length定义一个固定的填充(像素, pt, em,等)
%使用百分比值定义一个填充

 

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

实例

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

  • 上内边距是 25px
  • 右内边距是 50px
  • 下内边距是 25px
  • 左内边距是 50px

 

填充 - 简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

这就是所谓的简写属性。所有的填充属性的简写属性是 padding :

实例

Padding属性，可以有一到四个值。

  padding:25px 50px 75px 100px;

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

  padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

  padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

  padding:25px;

  • 所有的填充都是25px

 

更多实例

在一个声明中的所有填充属性
这个例子演示了使用简写属性设置在一个声明中的所有填充属性，可以有一到四个值。

设置左部填充
这个例子演示了如何设置元素左填充。

设置右部填充
这个例子演示了如何设置元素右填充。.

设置上部填充
这个例子演示了如何设置元素上填充。

设置下部填充
这个例子演示了如何设置元素下填充。

所有的CSS填充属性

属性说明
padding使用简写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

 

position 属性指定了元素的定位类型。

position 属性的五个值：

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

实例

div.static { position: static; border: 3px solid #73AD21; }

 

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

实例

p.pos_fixed { position:fixed; top:30px; right:5px; }

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

relative 定位

相对定位元素的定位是相对其正常位置。

实例

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

移动相对定位元素，但它原本所占的空间不会改变。

实例

h2.pos_top { position:relative; top:-50px; }

相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

实例

h2 { position:absolute; left:100px; top:150px; }

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

sereasuesue
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端-2-样式布局（margin、padding、position）
qq_38328762的博客
08-15 586
ps:因为涉及布局的标签，调整布局一直很迷（不是说难，就是有些时候影响因素太多，不一定哪里就影响到了，这里简单先总结一下涉及到布局的css样式属性） style=“text-align:center” 使里面内容居中 margin:auto padding:30px 内边距 ...
绝对定位、相对定位 position padding内边距、margin外边距
weixin_36927767的博客
02-09 3298
值 描述 absolute 绝对定位，相对于static定位以外的最近的一个祖先元素。 left、top、right、bottom relative 相对定位，相对于自己的正常位置 fixed 绝对定位，相对于浏览器窗口。 left、top、right、bottom static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, rig...
web前端之CSS盒子模型
weixin_46820017的博客
05-06 1317
盒子模型 前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 盒子模型的示意图： 代码演示
CSS中Position详解
weixin_44586318的博客
10-10 214
CSS中的position的四个属性值： static（默认）：按照正常文档流进行排列； relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位； absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位； fixed(固定定位)：所固定的参照对像是可视窗口。...
sanlyShi的前端之路三：css中position，margin、padding细节理解
sanlyshi's front-end road
08-17 358
position: 1.absolute：生产绝对定位的元素，相对于第一个有明确的定位的元素进行定位； （比如，如果父元素没有确定的position定位，那么就去找父元素的父元素，一直找到有明确定位的元素为止，body属于最高级明确定位） ；  可以使用top，bottom，left，right； 脱离文档流，原位置由后面的元素填充 2.relative：相对于正常位置（直接父元素）
css基本属性（display、padding、position、浮动：float、box-sizing）
polar_night_down的博客
10-24 2590
display display 属性规定元素应该生成的框的类型。 none ：此元素不会被显示。 block ：此元素将显示为块级元素，此元素前后会带有换行符。 inline ：默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block ：行内块元素。（CSS2.1 新增的值） JavaScript 语法： object.style.display=“inline” 例：document.getElementById(“p1”).style.display=“none”; 例
CSS Position(定位)
Zz1173的博客
03-11 81
设置html元素应当显示在浏览器的指定位置。 position 属性的五个值：static absolute relative fixed sticky static:HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 正常的文档流对象：按照从左向右排列，一行排列满了以后自动换到第二行，以此类推。 块级元素前后自动换行absolute[绝对定位]:相对 【最近的】【已定位】【父元素】 如果元素没有已定位的父元素，那么它的位置相对于<html> ...
CSS定位(position)
weixin_68531139的博客
07-27 352
定位模式是否脱标占有位置是否可以使用边偏移移动位置基准静态static不脱标，正常模式不可以正常模式相对定位relative脱标，占有位置可以相对自身位置移动绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置。......
CSS盒子模型及定位属性（position)
Chico_D的博客
06-01 873
CSS盒子模型之定位属性（position) #CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： emmm…把它想象成一幅画可能好理解一点，画框和画。 不同部分的说明： • Margin(外边距) - 清除边框外的区域
前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法
qq_41363062的博客
01-05 1865
一、 background背景元素 1. background-color背景颜色 可以简写 background；默认值是transparent。（透明） 不能继承 2. background-image背景图片 可以简写background url（“图像的url路径地址”）图像的URL； none 表示背景上没有设置任何图像，这是默认值； inherit 指定背景图像应该从父元素继承 b...
CSS教程:容器定位
09-27
【CSS容器定位】在网页设计中，容器定位是一项至关重要的技术，它决定了页面元素的布局和展示效果。在本文中，我们将深入探讨CSS容器定位及其可能导致的问题，特别是针对Internet Explorer (IE) 浏览器的一些特定...
css笔记2-position 定位
weixin_45145722的博客
03-18 161
又来了一个新比喻：HTML就像是我们买的毛坯房，把一个房子分成卧室，卫生间，客厅，厨房这些不同的结构部分，css就是做装饰，把一个灰秃秃的空房子，装饰成一个漂亮的，温馨的家 在css出现之前，咱们的网页搞纯html来构建，常用表格来构建网页（见到过了） 在书写css的时候，还要引入其他css文件，可以用@import来引入 /* 当然是一个css文件 它依赖其他的css文件 */ @import url('other.css'); 标签选择器：对元素进行选择 所以标签选择器的作用范围非常广啦，因为
CSS 固定定位 position fixed
热门推荐
cvper's world !
01-28 6万+
简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；                 注意：固定定位的位置是  相对当前浏览器窗口  的； 代码示例： 1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；  代码： *{margin:0;
IE6 下父级(relative)使用padding后,子元素绝对定位(absolute)的bug
zzc1684的博客
06-12 316
在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但 ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等貌似有些不一致。 在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，...
在父元素有padding时，子元素absolute相对于父元素的定位点。
qq_41064446的博客
11-24 7400
最初的问题是：在父元素有padding时，子元素absolute相对于父元素的定位初始点在哪里？ 由这个问题，我们再引申出来其他三种情况来一起进行讨论。 如下： 注：蓝色为实验组，黄色为参照组 1，padding--absolute 2，padding--relative 3，margin--absolute 4，margin--rel
关于使用position:fixed之后附加margin/padding的一些影响细节
FuChenRenShen的博客
01-02 5751
① 未设置（left/right/top/bottom属性）方位   -&gt;    该元素表现为包裹性（与内联元素的效果相似，目前来说margin和padding与内联元素中的margin/padding的表现是一样的）               1.能由包裹的span撑开               2.未设置方位时，margin无效，padding却是有效的,且其百分比是按照bo...
CSS3 box-sizing
weixin_34088598的博客
05-11 225
参考： http://www.w3school.com.cn/cssref/pr_box-sizing.asp 定义和用法 默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="border-box" 语法 box-sizing: content-box|borde...
定位（定位模式和边偏移）
qq_52301431的博客
03-31 2865
定位 （1）为什么要定位？ 第一幅图：红色的小方块可以在图片上移动。 第二幅图：左右箭头可以切换图片 （3）头部悬浮不动 （2）元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分 边偏移 边偏移属性 描述 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 top 顶端偏移量，定义元素相对于其父元素上边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧.
CSS盒子模型之元素的定位position
最新发布
m0_59717262的博客
06-26 884
在CSS页面布局时，通过position属性定义来设置元素的定位模式。语法格式：position:static|relative|absolute|fixed;
CSS background-position详解及实战应用
CSS背景定位属性`background-position`是前端开发者在实现各种视觉效果时的重要工具。它允许设计师精确控制网页背景图片在容器中的位置，从而创建出丰富的布局和设计。此属性通过两种语法形式接受值：长度值或相对于...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值