css重点17：background-position和清除默认的margin和padding

最新推荐文章于 2021-08-22 20:16:44 发布
最新推荐文章于 2021-08-22 20:16:44 发布
阅读量392 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/108388574
版权
css 专栏收录该内容
41 篇文章 3 订阅 ¥19.90 ¥99.00
订阅专栏

1、background-position

分两种情况:

重复【是整体位置的变化】

background:url('images/mess.png') repeat left center;

在这里插入图片描述

不重复【就是这个背景图在这个盒子里的位置】

 background:url('images/mess.png') no-repeat left center;

了解本专栏 订阅专栏 解锁全文
小黄呀呀呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
深入浅出CSS3 background-clip,background-origin和border-image教程
12-01
　最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。...
CSS实例:三列等高布局
12-29
三列等高CSS布局的一个实例，　修改国外的一个demo，　兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。　不过hack太多，不是很喜欢这样做。全部代码如下： <?xmlversion=1.0encoding=gb2312?><!...
margin background_技术分享：margin自述
weixin_39524574的博客
11-22 121
hello，大家好我是margin，经常有小伙伴把我跟我的兄弟padding搞混，下面我就详细的说一下我的主要工作，让大家能够明白我到底是做什么的。通常情况下，我会帮助一些元素让他们之间产生距离，先来看一段代码：ab /* css修饰 */ div{width: 200px;height: 200px;} .boxA{background: palevioletred;} ...
margin background_margin（外边距）合并
weixin_39815310的博客
11-28 97
外边距合并外边距合并的两种情况：兄弟合并、父子合并一、兄弟合并（符合预期）举个 ：<body> <div class="parent"> <div class="child1">第一个</div> <div class="child2">第二个</div> </div> ...
要清除margin和padding的元素
qq_16547699的博客
03-10 669
网页中，用到什么要清的，就写一下 blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul
margin background_CSS之margin「收藏」
weixin_39883433的博客
11-28 118
0 前言当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。margin看起来是一...
html消除自带边距,CSS3中清除外边距、内边距margin,padding使用方法
weixin_35407400的博客
06-03 1万+
CSS3 margin,padding几个命令做开的的都知道了，我们今天一起来看一篇关于CSS3中清除外边距、内边距margin,padding使用方法，希望例子能够给大家带来帮助。建议给html页面创建样式时，首先添加如下CSS样式，将所有的元素内外间距都设为0：{margin: 0px;padding: 0px;}因为如果我们不明确定义，由于不同浏览器处理策略不同，有的默认间距就设为0，而有的...
transition-live-background:仅使用 javascript 和 css 创建的简单而漂亮的实时背景
06-05
仅使用 javascript 和 css 创建的简单而漂亮的实时背景。 ##Instalation 您可以使用 bower 安装它： bower install --save live_background 或者只是复制项目中的background.js文件。 ＃＃如何使用？ 现在，要...
zTree v3.5 Css分解与dom结构说明
12-13
这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突 马上要开始研究新版本的 zTree 结构了，所以要先把现在的情况再多分析一下，做了 v3.x 版本后也一直没有制作 css 的文档，特在此进行整理一下，...
CSS 使用规则总结
12-13
缩写规则 关于边距 margin（4边）： 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px （省略的左等于右） 1px 2px (省略的上等于下) 1px （四边都相同） 简化所有： */ body{margin:0}————表示网页内所有元素的...
css问题-设置子元素的margin background也跟着移动
yingzizizizizizzz的专栏
07-17 731
转自这里 一般就是给父元素设置overflow: hidden;即可解决问题，之所以出现这种情况的原因是：普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。...
HTML,CSS去除块级元素默认边距
热门推荐
z轴的博客
09-10 1万+
HTML内外边距通常让不同浏览器展现出来的效果不同，所以一般会清除HTML默认内外边距：*{margin: 0px;padding: 0px;border: 0px} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,butto
【css】我的 css 框架——base.css
dengrongshou5105的博客
11-05 266
今天发下我自己的 css 框架——base.css，作用是重设浏览器默认样式和提供通用原子类。 @charset "utf-8"; /*! * @名称：base.css * @功能：1、重设浏览器默认样式 * 2、设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { backgrou...
使用CSS中margin和padding的基础和注意事项
weixin_34187822的博客
08-14 181
在CSS中，margin和padding是页面布局的主要属性，如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的，笔者经常使用且经常误使用，所以根据经验和网上资料整理出切合自己的内容，以备以后使用。 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin、padding和Border.。　　 W3C定义的盒模式如下： 　width和h...
background复合属性顺序_49 margin属性详解
weixin_31014025的博客
12-28 297
成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。margin属性margin是盒子的外边距，是盒子和其他盒子之间的距离。margin也有四个方向。以margin开头，接着跟一个小短横，然后跟表示方向的单词，就是margin的四个方向的小属性。margin的塌陷所谓的margin的塌陷，就是竖直方向的margin，有塌陷现象。这个现象是：小的marg...
background-position属性和清除浮动的方法
qq_41856605的博客
03-17 570
background-position属性如何定位背景图像：body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 10...
3、小兔鲜项目-设置base.css文件初始化
绿色水杯
08-22 944
场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式 作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发 要求： • 已经准备好base.css代码，同学们需要认识，项目中可以直接引入使用 /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input { margin: 0; padding: 0;
关于ul中出现默认的margin和padding值及解决办法
qq_45794542的博客
07-06 7181
在浏览器中ul会有默认的margin和padding值 <style> .top { width: 500px; height: 400px; border: solid black 1px; } .top li { width: 50px; height: 30px; border: black solid 1px; /* float: left; */ }
css中margin和padding
最新发布
03-17
在CSS中，margin和padding都是用来控制元素与其他元素之间的间距。 Margin是设置元素外边距，它可以设置上下左右四个方向的外边距。例如：margin: 10px 20px 30px 40px; 分别表示上右下左的外边距。 Padding是设置元素内边距，它也可以设置上下左右四个方向的内边距。例如：padding: 10px 20px 30px 40px; 分别表示上右下左的内边距。 总结下来： margin是外边距，padding是内边距。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值