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

最新推荐文章于 2021-08-23 15:19:07 发布
最新推荐文章于 2021-08-23 15:19:07 发布
阅读量418 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/108388574
版权
css 专栏收录该内容
41 篇文章 3 订阅 ¥19.90 ¥99.00
订阅专栏
本文主要介绍了CSS中`background-position`属性的使用，包括重复和非重复情况下的背景定位。同时强调了在编写CSS时，清除元素默认的margin和padding的重要性，以确保样式的一致性。
摘要由CSDN通过智能技术生成

1、background-position

分两种情况:

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

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

在这里插入图片描述

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

 background:url('images/mess.png') no-repeat left center
了解本专栏 订阅专栏 解锁全文
小黄呀呀呀
关注
专栏目录
订阅专栏
html内外边距区别,CSS中的background属性与margin和padding内外边距的关系总结
weixin_31940835的博客
06-04 1151
最近在写一个系统页面，涉及到background背景和背景图、渐变等属性，经过查阅资料发现background有各种子属性，特此整理一下。浏览器兼容性支持：PC端：移动端：为了后面的介绍，我们首先了解一下【盒模型】background常用属性：background-image：定义背景图像。需要用 url('...') 引入图片。.box{background-image:url('images/...
margin background_技术分享：margin自述
weixin_39524574的博客
11-22 159
hello，大家好我是margin，经常有小伙伴把我跟我的兄弟padding搞混，下面我就详细的说一下我的主要工作，让大家能够明白我到底是做什么的。通常情况下，我会帮助一些元素让他们之间产生距离，先来看一段代码：ab /* css修饰 */ div{width: 200px;height: 200px;} .boxA{background: palevioletred;} ...
margin background_margin（外边距）合并
weixin_39815310的博客
11-28 109
外边距合并外边距合并的两种情况：兄弟合并、父子合并一、兄弟合并（符合预期）举个 ：<body> <div class="parent"> <div class="child1">第一个</div> <div class="child2">第二个</div> </div> ...
要清除margin和padding的元素
qq_16547699的博客
03-10 689
网页中，用到什么要清的，就写一下 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 125
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，而有的...
css中background-origin属性的使用解析
12-02
`background-origin`的默认值是`padding-box`，这意味着在没有指定`background-origin`的情况下，背景图像默认从内边距区域开始定位。这个属性不具有继承性，即子元素不会从父元素继承`background-origin`的设置。 ...
详解css中background-clip属性的作用
12-12
在CSS中，`background-clip`属性是一个非常实用的样式规则，它决定了元素背景的绘制范围，即背景...在实际项目中，可以结合其他CSS属性，如`background-image`、`background-position`等，创造出丰富的背景展示效果。
css问题-设置子元素的margin background也跟着移动
yingzizizizizizzz的专栏
07-17 747
转自这里 一般就是给父元素设置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 286
今天发下我自己的 css 框架——base.css，作用是重设浏览器默认样式和提供通用原子类。 @charset "utf-8"; /*! * @名称：base.css * @功能：1、重设浏览器默认样式 * 2、设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { backgrou...
使用CSS中margin和padding的基础和注意事项
weixin_34187822的博客
08-14 186
在CSS中，margin和padding是页面布局的主要属性，如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的，笔者经常使用且经常误使用，所以根据经验和网上资料整理出切合自己的内容，以备以后使用。 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin、padding和Border.。　　 W3C定义的盒模式如下： 　width和h...
background复合属性顺序_49 margin属性详解
weixin_31014025的博客
12-28 312
成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。margin属性margin是盒子的外边距，是盒子和其他盒子之间的距离。margin也有四个方向。以margin开头，接着跟一个小短横，然后跟表示方向的单词，就是margin的四个方向的小属性。margin的塌陷所谓的margin的塌陷，就是竖直方向的margin，有塌陷现象。这个现象是：小的marg...
background-position属性和清除浮动的方法
qq_41856605的博客
03-17 580
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 989
场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式 作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发 要求： • 已经准备好base.css代码，同学们需要认识，项目中可以直接引入使用 /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input { margin: 0; padding: 0;
css去除padding部分的背景颜色的方法
meteoite的博客
08-23 8018
css除去padding部分的背景颜色  在网页中，如果给一个元素设置一个背景颜色，其背景会默认铺满整个元素（包括border和padding），这时我们可以使用background-clip来控制背景的蔓延。 1.background-clip：border-box  border-box是默认的显示状态，如图所示，border和padding下都被背景颜色所填充 2.background-clip：padding-box  padding-box控制背景延伸至padding外沿。如图，border下没
关于ul中出现默认的margin和padding值及解决办法
qq_45794542的博客
07-06 7517
在浏览器中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; */ }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小黄呀呀呀

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

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

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

打赏作者

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

抵扣说明：

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

余额充值