HTML+CSS兼容问题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
HTML+CSS兼容问题
上传于||文档简介
&&集​经​验​型​交​流​文​档
大小：32.39KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢HTML/CSS 问题：如何在不修改 HTML 代码的情况下给文字左右加间距？ - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
HTML/CSS 问题：如何在不修改 HTML 代码的情况下给文字左右加间距？
13:44:36 +08:00 · 608 次点击
约束：不修改 HTML 部分、不扩大 div.m 的宽度（container限制在228px）
问题：如何仅让文字部分与其左右的红色边框增加一个 10px 的空白间距？
4 回复 &| &直到
22:26:12 +08:00
& & 13:52:38 +08:00
& & 13:52:58 +08:00
padding属性啊
& & 14:06:23 +08:00
@ 谢谢，好像给所有的图片加 margin:0 -11 感觉不太好，比如有些嵌入在文字中的表情图片怎么处理
@ padding 会同时影响到图片
& & 22:26:12 +08:00
width: 228
font-size: 12
padding: 10
box-sizing: border-
}
.m img {
width: 226
margin: 10px 0;
}
& · & 1020 人在线 & 最高记录 2011 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.7.3 · 51ms · UTC 12:09 · PVG 20:09 · LAX 05:09 · JFK 08:09? Do have faith in what you're doing.珍爱网（） 是国内最知名的婚恋服务网站之一。以“成就天下姻缘”为己任，服务于有婚恋需求的广大单身男女人士。珍爱总部位于中国深圳，同时在北京、上海、广州、成都、武汉等主要城市均设有分公司。目前网站注册用户已达到90...
HTML/CSS阅读(17919)评论()自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会...阅读(17256)评论()今天浏览这个站时，因为好奇看了下人家写的代码，结果发现了这行代码， 于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计...阅读(24858)评论()如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: text-overflow:ellipsis...阅读(11427)评论()这次我们使用transform的translateY值来做一个鼠标经过图片上拉，出现文字解释效果： 查看效果 &div class="main"& &div class="view view-tenth"& &...阅读(17939)评论()关于linear-gradient的语法就不多做介绍了网上到处都是，下面看个小例 我们先做一个渐变，使其让他旋转， &div class="example"& &/div& .example{ height:150p...阅读(16795)评论()当我们让一个模块水平居中首先想到的肯定是margin:0有木有？那么今天给大家介绍一个fit-content属性，不知道有没有同学用过，如果用过那么你可以略过这篇文章，没用过的同学就继续了，我也是第一次看到这个属性，之前不知道这...阅读(13555)评论()查看效果 &div class="main"& &div class="view view-tenth"& &figure& &div class="thumb"&&img src="h...阅读(14514)评论()不多说直接上效果 查看效果 & html代码： &div class="main"& &div class="view view-tenth"& &img src="http://t-1.tuzhan...阅读(22533)评论()在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘，嗯，有这样想过，如今css3技术这么先进再用背景做平铺是不是已经out了...阅读(20436)评论()最近在做一个H5手机页面项目遇到了一个小小的问题，就是边框描边1像素的问题。 例：网易 & 一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以...1 ... 共 13 页html/css教程：背景图片的定位问题详解
html/css教程：背景图片的定位问题详解,阅读html/css教程：背景图片的定位问题详解,我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含
   
我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片，比如：
这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的图片的定位问题。这个问题相信很多人都郁闷过，也经常有朋友问我，所以今天就系统的说一下：
我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。
div{ background:#FFF url(image) no-}
这里的background的属性值依次为：
#FFF 背景色：（颜色值，背景图片没有覆盖的地方，或者没有背景图片时表现的背景色）image 背景图片：（这里是图片的地址）no-repeat 是否重复：（图片小于容器的大小时，默认会重复排列图片以填满容器，no-repeat表示不重复，只有这个时候后面的定位坐标才有用。）fixed 背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认是scroll）x y 背景图像的定位：（注意，只有在no-repeat下定位才有意义。这个就是今天要讲的重点）
背景图像定位中我们要明确的几点：
1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。2、坐标轴的原点就是对应容器的左顶点。3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。5、x y的值可以用百分比或者px来表示。6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示，但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
下面我用几个图示来说明一下几种情况，蓝色块表示图片，虚线框表示容器（可以div，td，或者直接就是body），注意只有背景图片在容器内我们才能看见，我用白色表示可见部分，而且超出容器范围的是看不见的，我用灰色表示。容器的左定点的坐标就是（0，0）。
第一张，背景图片和容的左上对齐，0px 0px 也可以写成left top
第二张，背景图在容器中间，定点坐标为正值
第三张，背景图部分在容器左上，定点坐标为负值
--------------------------------------------------------------------------- 到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片，返回去我们看一下开始的时候介绍的两个图片，我们就是可以用：背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。
但是我们为了调用方便，在排列这些小图片的时候要讲究一点规则，比如：小图之间的距离通常是调用小图的容器的大小，或者距离更大一点，这样就可以避免在容器内显示出我们不愿意显示的图片！
补充一点，如果定位用的是百分比话，算法比较特殊。我举个例子：
background:#FFF url(image) no-repeat fixed 50% -30%;
这个时候图片应该在容器的什么位置呢,算法公式如下：
图片左顶点距容器左顶点的坐标位置为 x：（容器的宽度-图片的宽度）x50% y：（容器的高度-图片的高度）x（-30%） 得到的结果应用坐标法则，差值如果为负数，百分比为正那么运算结果是负值。如果差值为负数，百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。 比如：容器是width：600px；height：600px；而图片是width：200px；height：200px； 我们用上面的样式，可以得到图片位置为： x：(600px-200px)*50% y：(600px-200px)*(-30%) 如下图：
（责任编辑：）
本文关键字：
广告赞助商
最新视频推荐
Copyright (C) 2007-, All Rights Reserved 版权所有 . 沪ICP备号
地址:上海徐汇区零陵路585号 爱邦大厦26H座
传真(FAX):021-
电话(Tel):021-
PHP100 Website Powered by PHPCMS. For PHP100. 服务器维护：阿里巴巴-阿里云