365bet官网

当前位置: > 日博365体育在线投注 >

不要告诉我你懂日博365体育在线投注

时间:2018-07-18 14:44来源:网络整理 作者:admin 点击:

分类: Html/CSS | 请注明转载 出自 海玉博客
本文地址

你真的了解日博365体育在线投注吗?你知道日博365体育在线投注有什么特性吗?你知道什么是纵向外边缘合并?日博365体育在线投注在块元素、内联元素的差异?什么时候该用padding而不是日博365体育在线投注?你知道负日博365体育在线投注吗?你知道负日博365体育在线投注在在实际工作中的用途吗?常见的浏览器下日博365体育在线投注出现的bug有哪些?……

写CSS,你少不了与日博365体育在线投注打交道,我们对CSS属性知之甚少,这是我们通常使用最多的。。我要写这篇文章。,一个是我的工作总结。,它也是你知识的一种梳理。。

什么是Margin

CSS 边距属性定义元素周围的空间。。通过使用单独的属性,可以在上面、右、下、左外部距离被设置。还可以使用缩短的外边距属性来更改所有OUTE。。——W3School

边界,元素周围生成一个额外的空白区域。。空白区通常指的是其他元素不能出现的区域。。权威指南

我比较喜欢使用“外边距”这个词来解释日博365体育在线投注(同理padding可以称之为“内边距”,但我只想把填充词称为白色或空白。,我们可以很清楚的了解到日博365体育在线投注的最基本用途就是控制元素周围空间的间隔,从视角分离的目的。

保证金的特点

日博365体育在线投注始终是透明的。

日博365体育在线投注通过使用单独的属性,可以在上面、右、下、左外部距离被设置。即:日博365体育在线投注-top、日博365体育在线投注-right、日博365体育在线投注-bottom、日博365体育在线投注-left。

外边距的 日博365体育在线投注-width 值类型是:auto | length | percentage

还可以使用缩短的外边距属性来更改所有OUTE。:日博365体育在线投注: top right bottom 左方; 日博365体育在线投注:10px 20px 30px 40px) 记忆是元素的顺时针上、右、左、左的记忆。。

并且该规范也提供了数值方法的省略。,基本如下:

1、如果日博365体育在线投注只有一个值,表示上右下左的日博365体育在线投注同为这个值。例如:日博365体育在线投注:10px; 就等于 日博365体育在线投注:10px 10px 10px 10px;

2、如果 日博365体育在线投注 只有两个值,第一个值表示上下日博365体育在线投注值,第二个值为左右日博365体育在线投注的值。例如:日博365体育在线投注:10px 20px; 就等于 日博365体育在线投注:10px 20px 10px 20px;

3、如果日博365体育在线投注有三个值,第一个值表示上日博365体育在线投注值,第二个值表示左右日博365体育在线投注的值,第三个值表示下日博365体育在线投注的值。例如:日博365体育在线投注:10px 20px 30px; 就等于 日博365体育在线投注:10px 20px 30px 20px;

4、如果日博365体育在线投注有四个值,那这四个值分别对应上右下左这四个日博365体育在线投注值。例如:日博365体育在线投注:10px 20px 30px 40px;

在实际应用中,个人不推荐使用三个值的日博365体育在线投注,一个是容易记住的。,二是以后不容易修改,一开始如果写成日博365体育在线投注:10px 20px 30px;对上10px的未来要求的变化,右30px,下30px,左20px,你不得不还是得把这个日博365体育在线投注拆开为日博365体育在线投注:10px 30px 30px 20PX;费力和不愉快,不如一开始就老老实实的写成日博365体育在线投注:10px 20px 30px 20px;成真,不要节省两个字节,以节省以后重新开发的成本。。

纵向外边缘合并问题

不要被上面的名词吓坏,简单地说,外距合并指的是,当两个垂直的外边缘相遇时,它们将形成一个外边缘。。合并后的外缘高度等于。你可以看看W3SUOL CSS外缘合并来理解这个基本知识。

在实际工作中,纵向外边缘合并问题常见于第一个子元素的日博365体育在线投注-top会顶开父元素与父元素相邻元素的间距,只在标准浏览器下(Fiffox)、Chrome、Opera、Sarfi)问题生成,相反,他表现得很好。。例如,您可以查看下面的代码(即正常)。,标准浏览器下bug的出现:



纵向外边缘合并




我只想远离我成为父亲的角色。。

如果根据CSS规范,IE的良好表现实际上是一个错误的表现。,因为IE布局渲染IE导致了这种好的表现出现。。其他标准浏览器将显示有问题的外观。。好了,如果您已经阅读了W3SCOLSS CSS外部保证金合并文章,,讨论这个问题很容易。。这个问题的原因是根据规格,一个盒子如果没有上补白(padding-top)和上边框(border-top),该盒的上缘与第一子元素的上边缘重叠。

这就是白点。:父元素的第一个子元素的上边距日博365体育在线投注-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先的麻烦。只要领导有效 border或者padding就可以有效的管制这个目无领导的日博365体育在线投注防止它越级,假传圣旨,把自己的日博365体育在线投注当领导的日博365体育在线投注执行。
对于纵向外边缘合并的解决方案上面已经解释了,为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

一般来说,这个问题在这里被解释。,大部分文章不会深入下去。,但作为一个真正的开发者,最好的事情是知道什么是知道的。,原本使用日博365体育在线投注-top就是为了与父元素隔开距离,根据你的解决方案,它实际上是一个修理,为了“弥补修复”这个父子纵向外边缘合并这个CSS规范“Bug”,在父元素上强制使用边框顶部和填充顶部,不舒服,这不容易记住。,下次发生这种情况时,我们会忘记这个规则。,而且在页面设计稿里如果不需要border-top加个上边框,这么一加反而画蛇添足,为以后的修改留下隐患。

为什么要使用边框?,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢?答案你可以参考另外一篇文章使用边距或填充里找到答案。

使用边距或填充

何时应当使用日博365体育在线投注:
当需要向边界外部添加空白时。
空白不需要背景(颜色)。。
上下两盒之间的缝隙,需要互相抵消。如15PX + 20px的日博365体育在线投注,你将得到20px的空白。。

我们应该何时使用填充物:
您需要在边框内部测试中添加空白。
当空白需要背景(颜色)。
上下两盒之间的缝隙,希望等于二者之和。。如15PX + 20px的padding,你会得到一个35px的空白。

个人认为:日博365体育在线投注是用来隔开元素与元素的间距;填充是元素和内容之间的间隔。。日博365体育在线投注用于布局分开元素使元素与元素互不相干;填充用于元素和内容之间的间隔。,内容(文本)和(包)之间存在呼吸距离。。

这里我截取了其他一些文章。,详细内容请见使用边距或填充

日博365体育在线投注在块元素、内联元素的差异

HTML(这里是HTML标准),在XHTML中,有两个基本元素。,即,块和内联。顾名思义,块元素是由块表示的元素(块状)。 元素),内联元素是由行(字符)表示的元素。 level elements and text 字符串)。这两种表演的主要区别是,在页文档中,块元素开始另一行。,一条线。内联元素与一行中的其他内联元素协作。。

块元素(块元素)大致相同。:pH1、H2、H3、H4、H5、H6·L·L·L DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | 地址(随着HTML5标准的进步),某些要素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,显示元素:表式表也是块元素。。

内联元素(内联元素)大致相同。:PCDATA(即文本) TT | I | B | BIG | 小额信贷 | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | 首字母缩略词 | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO输入 | SELECT | TEXTAREA | LABEL | BUTTON

里面有特殊的元素:如img|input|select|textarea|button|label等,它们被称为可替换的元素(被替换)。 元素)。它们区分一般的内联元素(相对而言)。,称non-replaced 元素)是:这些元素具有内在的大小(内在的)。 尺寸),它们可以设置宽度/高度属性。。它们与显示的性质相同:内嵌块。。

不更换元素可能有朋友(未替换) 元素)有点疑惑,帮助你理解一点点。非置换元素,W3C 没有明确的定义。,但我们可以从字面上理解它。,非置换元素对应着更换元件(更换) 元素),也就是说,我们已经理解了替换元素的含义。,理解非替代元素。置换元素,定义在W3C中给出:

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从我们可以理解的定义,更换元件(更换) 元素)主要是指 img, input, textarea, select, object 这样的默认 CSS 格式化外观范围的元素。然后我们可以看到,不更换元件(未更换) 元素)就是除了 img, input, textarea, select, object 替代元素以外的元素。

日博365体育在线投注在块级元素下,他的表现可以充分体现出来。,你设置和向下。。且记住块级元素的日博365体育在线投注的参照基准是前一个元素即相对于自身之前的元素有日博365体育在线投注距离。如果元素是第一个元素,则就是相对于父元素的日博365体育在线投注距离(但第一个元素相对于父元素日博365体育在线投注-top而父元素又没有设定padding-top/border-top的话要需要印证上面的纵向外边缘合并的知识)

日博365体育在线投注也能用于内联元素,这是常态。,但是日博365体育在线投注-top和日博365体育在线投注-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(日博365体育在线投注效果)是透明的,他没有任何视觉影响。。

这是因为边界不会改变元素的高度。,如果要更改内联元素的行高,即行sp,所以你只能使用这三个属性:line-height,fong-size,vertical-align。请记住,这影响内联元素的高度是线高而不是高度。,因为内联元素是一行,一个身高的单词,那这到底是整段inline元素的高呢?还是inline元素一行的高呢?这都说不准,所以统一使每一条线都很高。,它只能是线高。

日博365体育在线投注-top/日博365体育在线投注-bottom对内联元素没有多大实际效果,不过日博365体育在线投注-left/日博365体育在线投注-right还是能够对内联元素产生影响的。应用日博365体育在线投注:10px 20px 30px 40px;,左边的CSS写在内联元素上。,他的影响大致相同。,上下无影响,元素的左侧或文本的距离为40px。,离他相邻的元素或文本的距离为20。。你可以自己试一试。

最后在内联元素中还有上文我们提到的非可置换inline元素(non-replaced 元素),这些个元素img|input|select|textarea|button|label虽然是内联元素,但日博365体育在线投注依旧可以影响到他的上下左右!

总结下来日博365体育在线投注 属性可以应用于几乎所有元素。,除了表单显示类型(不包括 table-caption, table and 内联表的元素),此外,垂直外缘是非替换元素(非复制元素)。 inline 元素)不起作用。

负日博365体育在线投注技术及其应用

在日博365体育在线投注所有的实际应用中,负日博365体育在线投注技术是我学习css路上最重要一课之一,许多高级应用和页面上的疑难杂症都可以用负日博365体育在线投注技术来实现。日博365体育在线投注技术是那么的有用,我不想长篇大论。,所以我决定给他写一篇文章。,详细解释他的影响、原理、及其应用。在此之前你可以先阅读怿飞写的由浅入深漫谈日博365体育在线投注属性这篇文章,大致了解“日博365体育在线投注参考线”的概念,之后再来查看负日博365体育在线投注技术及其应用这篇文章。

常见的浏览器下日博365体育在线投注出现的bug

森林总是写这么多,最后总结一些浏览器中常见的日博365体育在线投注 Bug吧,以后遇到日博365体育在线投注下的布局问题可以查看这里找到解决的方案,如果你还发现其他关于浏览器下日博365体育在线投注的Bug你可以发表留言,检查后我会及时加上,谢谢分享:

IE6中的双边距离错误:
发生场合:当给父元素内第一个浮动元素设置日博365体育在线投注-left(元素float:left)或日博365体育在线投注-right(元素float:right)时日博365体育在线投注加倍。
解决方法:它是添加显示:内嵌到浮动元素;CSS属性;或者用padding-left代替日博365体育在线投注-left。
原理分析:块级对象的默认显示属性值是块。,当浮动设置,当设置外部距离时就会发生这种情况。。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?因为浮动都有其相对应的对象,这是浮动对象相对于父对象的唯一问题。。第一个对象是相对父对象。,然后对象相对于第一对象,因此,设置后的对象不会有问题。。为什么能显示:内联解决这个双边错误?,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,它使内联元素的行为类似于内嵌的块元素。,高宽支撑,垂直日博365体育在线投注和padding等,所以div 该类中的所有样式可用于此显示。 关于内联元素。

IE6中浮动元素3px的间隔错误:
发生场合:在元素浮动中发生,然后浮动元素将浮动到出现的3px的bug。。
解决方法:右边的元素也漂浮在一起。;或者将IE6添加到正确的元素中 Hack _日博365体育在线投注-left:-3px;从而消除3px间距。
原理分析:IE6浏览器缺陷缺陷。

IE6/7负日博365体育在线投注隐藏Bug:
发生场合:当给一个有hasLayout的父元素内的非hasLayout元素设置负日博365体育在线投注时,父元素的一部分不可见。。
解决方法:移除父元素的HasFayStay.;或将HasDead分配给子元素,添加位置:相对
原理分析:IE6/7独特的布局布局问题。

IE6/7下UL/OL标记消失的bug:
发生场合:当ul/ol触发了haslayout并且是在ul/ol上写日博365体育在线投注-left,默认的UL/OL标签消失。。
解决方法:给li设置日博365体育在线投注-left,而不是给ul/ol设置日博365体育在线投注-left。
原理分析:IE6/7浏览器错误

IE6/7下日博365体育在线投注与absolute元素重叠bug:
发生场合:双列自适应布局,左元绝对值的绝对定位,右侧的日博365体育在线投注撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法:将左侧块级元素更改为内联元素,例如,改变div到跨度。
原理分析:这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器来渲染bug。

IE6/7/8下auto 日博365体育在线投注居中bug:
发生场合:给block元素设置日博365体育在线投注 汽车不能在中间
解决方法:这个bug的原因通常不是DOCTYPE。,然后IE的怪癖被触发 mode,有了DOCTYPE声明,就可以了。。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决,但是根据我的专业测试,此方法无效。,如果没有Doctype即使给元素添加width也无法让block元素居中。
原理分析:缺少DOCTYPE声明。

IE8下input[button | 提交 设置日博365体育在线投注:汽车不能在中间
发生场合:ie8下,如果给定一个标签,如按钮(如按钮) 输入[类型] =按钮 input[type="submit"])设置{ display: block; 日博365体育在线投注:0 auto; 如果你不设置宽度,你不能停留在中间。。
解决方法:输入的宽度可以增加到宽度。
原理分析:IE8浏览器错误。

IE8百分比padding垂直日博365体育在线投注 bug:
发生场合:当父元素设置填充百分比时,子元素有垂直的日博365体育在线投注的时候,就好像父元素被设置了日博365体育在线投注一样。
解决方法:向父元素添加溢出:隐藏/自动。
原理分析:IE8浏览器错误。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
推荐内容