如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。...display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...padding: 用于控制内容与边框之间的距离; Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容,显示文本和图像。...absolute(绝对定位) 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。...这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left
定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。...display:”inline” 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...padding: 用于控制内容与边框之间的距离; Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容,显示文本和图像。...2、clear: left;对自身起作用,一旦左边有浮动元素,即切换到下一行来保证左边元素不是浮动的,依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...absolute(绝对定位) 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。
水平垂直居中主要包括三类:基本文本类,图像类,其他元素类 但,也是由一些方法可以实现的,下面就来谈谈了解到的10中方法。...三、把容器当作表格单元 table可以设置vertical-align,自然能实现居中,所以我们可以模拟出一个table 使用display:table和display:table-cell的方法,前者必须设置在父元素上...,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个元素: html,body,div {margin: 0;padding:...在Internet Explorer 6中对父元素进行定位后,如果再对子元素 进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的...绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。
最后,内边距、边框和外边框可以应用于元素的四边,也可以单独用于某一边。外边距甚至可以使用负值,从而使得元素在页面中移动。...所以外边距折叠是为了排版而生的。 最后,外边距折叠只会发生在常规文档流中块级盒子的垂直方向上。行内盒子、浮动盒子或绝对定位盒子的外边距都不会折叠。...3.2 可见格式化模型 3.2.1 包含块与定位 常规情况下,包含块是元素的最近块级父元素,但这并不是一定的。...如果找不到这样一个定位祖先,那么它就是相对于文档的根元素进行定位的,文档的根元素也叫做起始包含块。...浮动-文字环绕 浮动就是为了在网页上实现文本环绕图片的效果而引入的一种布局模型。所以比较推荐大家只有在这一用途的时候使用。
脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。 ...---部分无视和完全无视的区别?需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围(可以说是部分无视)。...如上面的例1:相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上,但内容不会照成覆盖现象,只有DIV形成覆盖现象。 ...但是为了计算方便:一般都会增加一个空div块,并使用clear:both来设定表示两侧都不允许有浮动元素。这样新的空div块会下移,达到撑开父元素的目的。...个人理解:相对定位后的元素则会叠加到新位置的上,覆盖原先新位置上的元素,但是在新位置上不实际占据空间)如下图所示,头像相对定位前在box1盒子下方,头像相对定位后,头像原来的位置空着,但是下方的带有文本的盒子并没有移动上来
1.8.2清除浮动带来的影响 解决浮动带来的父标签塌陷问题。...1.10定位(position) 1.10.1static static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。...注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。 1.10.3absolute(绝对定位,重要) 定义:相对于已经定位过得父标签再做定位。...这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left...z-index 值表示谁压着谁,数值大的压盖住数值小的, 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
的区别 为什么 XML 资源文件要从文本格式编译成二进制格式 Android 资源管理框架又是如何快速定位到最匹配资源的 LinearLayout(线性布局) 线性布局是程序中最常见的布局方式之一,线性布局可以分为水平线性布局和垂直线性布局两种...--是本元素所有子元素的对齐方式,设置在父元素上,多个值用|隔开--> android:padding="10dp" android:layout_marginLeft="10dp" <!...,简单直接就可以定位,但是手机的屏幕不一样大,适配性差; 可以直接用Android:layout_x和android:layout_y来定义组件的位置(两个属性只能在绝对布局中使用,在相对布局中都不会显示的...:layout_alignParentTop 贴紧父元素的上边缘 android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物 // 值必须为
垂直居中的问题 问题: 在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。...解决: 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !...IE6 width为奇数,右边多出1px的问题 问题: 父级元素采用相对定位,且宽度设置为奇数时,子元素采用绝对定位,在ie6中会出现右侧多出1像素 解决: 将宽度的奇数值改成偶数 12....IE6 子元素绝对定位的问题 问题: 父级元素使用padding后,子元素使用绝对定位,不能精确定位 解决: 在子元素中设置 _left:-20px; _top:-1px;...41. ff、chrome绝对定位无效 问题: 在IE给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF和Chrome下却不可以
CSS的float 属性允许开发者 在不使用table的前提下 在网页的布局中 融入类似表格的 column。如果不是因为CSS的float属性,不使用绝对和相对定位,CSS的布局是不可能实现的。...采用 相对定位和绝对定位 实现的布局 会非常凌乱 并且 这样的布局是不可维护的。 在这篇文章中,我们将会具体讨论:float属性是什么;float属性 在具体的上下文中 是如何影响元素的。...这个概念类似于:你每天在印刷媒体上所看到的内容(图片或其它图像元素 对齐于左边或者右边,其它的内容 通常是一些文本 会环绕在 左对齐或右对齐的 图片元素 周围)。如下图所示: ?...所有没有浮起来的块元素都有类似的行为。 p元素内的文本是inline元素,所以文本会围绕浮动元素。浮动元素之所以有外边距,是想让它偏离p元素:使得p元素忽略浮动元素在视觉上更清晰。...在任何浏览器中 使用overflow方法的唯一缺点是:父元素会有滚动条 或者 隐藏的内容。如果父元素中的任意的子元素 使用了负的外边距 或者 绝对定位,并且它们超过了父元素的边框,它们会被遮挡。
但事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)...但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。...在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图: ? 上图可知,文本流中的内容会顶替绝对定位无素的位置,一点都不会客气。...而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。 这是一种很特别并且也是非常实用的应用方式。...绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接 近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性
postision:static;始终处于文档流给予的位置。看起来好像没有用,但它可以快速取消定位,让 top,right,bottom,left 的值失效。在切换的时候可以尝试这个方法。...除了 static 值,在其他三个值的设置下,z-index 才会起作用。确切地说 z-index 只在定位元素上有效。...Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后,不能使用脚本和 CSS 对它进行修改。...jpg 是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在 www 上,被用来储存和传输照片的格式。 gif 是一种位图文件格式,以 8 位色重现真色彩的图像。...但实际上这个方法有个很老火的限制——html 中 sidebar 必须在 main 之前!但我需要 sidebar 在 main 之后!
12个HTML和CSS必须知道的重点难点问题 这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?...注意 relative 移动后的元素在原来的位置仍占据空间。 **absolute:绝对定位。...right:元素向右浮动。 none:默认值。元素不浮动,并会显示在其在文本中出现的位置。 浮动的特性: 浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。...浮动元素的展示在不同情况下会有不同的规则: 浮动元素在浮动的时候,其margin不会超过包含块的padding。...在IE6中还需要触发 hasLayout(zoom:1) 优点:代码简介,不存在结构和语义化问题 缺点:无法显示需要溢出的元素(亦不太推荐使用) 方法六:父级div定义 伪类:after 和 zoom
(想同时垂直居中多个元素时,可以用padding) vertical-align: middle;(用于垂直对齐inline元素) 只对内联元素或行内块元素有效 主要用在文本和与文本相邻元素的垂直方向上的对齐问题...使用vertical-align需要了解文字的baseline和line-box等知识 水平垂直居中 浮动元素 使用position:relative; 具体方法与绝对定位的第1个和第2个方法类似,只不过把...相对定位relative可以和float叠加,在float后的位置上再相对定位。 缺点就是float元素居中后仍会占据原来的位置。...需要注意的几个问题 元素浮动后仍可以设置margin属性,但auto不会起作用。...图片居中的问题 注意:如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: center;让图片居中 如果图片的宽度大于父元素的宽度, 可以绝对定位中的居中方式让图片居中
开头,后面的名字需要自己定义,类定义后需要在需要使用的元素上使用class="类名"加以调用。(注:可以同时给一个元素加多个类,类之间用空格隔开。类和id都不要以数据开头)。 ...2.CSS选择符控制页面所有的html元素(包括哪些本身有默认值的元素),使用通配符"*",但效率较低,不建议使用。 语法:*{属性:值} 3.选择符的嵌套(包含/派生)使用。...background-attachment:[scroll ,fixed] 注:背景图像,默认情况下是进行水平和垂直位置上的平铺,默认在盒子的左上方显示。...九、CSS元素分类 [1].块状元素:{display:block}一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)和高度(height)起作用...[2].内联元素:{display:inline}内联元素只能容忍文本和其他内联元素,它允许其他元素与其同一行,但宽度和高度变得不起作用,常见内联元素有:em、span、a等(不能设置宽和高,不影响换行
定义标准的文本 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 inherit 继承父元素的text-decoration...border(边框):围绕在内边距和内容外的边框。 content(内容):盒子的内容,显示文本和图像。 盒子模型: ?...) 6.1 static static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的。...6.3 absolute(绝对定位) 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有以定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。...这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute; 父元素设置 position:relative; 然后top、right、bottom
背景图像的某些部分也许无法显示在背景定位区域中。) ...就像一个房间里的人,虽然规定了其同天花板的距离必须小于1米,但很可能这个规定没有起作用,就是这个道理。 ... 2.2.2 margin叠压问题,见2.1 2.2.3 margin-bottom 无效问题,有时候需要设置某块级元素在该父类的底部显示...使用bottom(以及top、left和right)属性,但这要求该节点的position属性是absolute(绝对定位),且其父节点的position属性为relative(相对定位),则该节点即可相对其父节点定位...如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 二、span标签:行内区分样式时使用。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size 和font-family属性,否则font属性将不起作用。...行内元素的特点: (1)和相邻行内元素在一行上。 (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。...行内元素的特点: (1)和相邻行内元素在一行上。 (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。...父级没有定位 若所有父元素都没有定位,以浏览器为准对齐(document文档)。 父级有定位 绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。...首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。
color: green; } 分组和嵌套 分组 当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。...padding: 用于控制内容与边框之间的距离; Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容,显示文本和图像。...(position) static static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。...absolute(绝对定位) 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。...这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left
(2)继承性 所谓继承性是指写css样式表时,子标记会继承父标记的某些样式,例如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父元素即可。 ...行内元素:行内元素不会占有独立的区域,仅仅依靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。...(5)嵌套块元素垂直外边距的合并 当块级元素进行嵌套时,如果父盒子没有设置上边框和上内边距的话,子盒子的上外边距和父盒子的上外边距会进行合并。...如下图所示,这就是一个相对定位的效果展示: (5)绝对定位 绝对定位是将元素根据最近的已经定位(绝对、固定或相对定位)的父元素进行定位,若所有父元素都没有定位,则依据body根元素进行定位。...z-index的默认属性是0,取值越大,定位元素在层叠元素中越居上。 定义靠后的,默认在之前的元素之上,但切记不要滥用z-index。同时,父容器的z-index会影响子元素的层级级别。 <!
(2)继承性 所谓继承性是指写css样式表时,子标记会继承父标记的某些样式,例如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父元素即可。 ...行内元素:行内元素不会占有独立的区域,仅仅依靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。...(5)嵌套块元素垂直外边距的合并 当块级元素进行嵌套时,如果父盒子没有设置上边框和上内边距的话,子盒子的上外边距和父盒子的上外边距会进行合并。...(5)绝对定位 绝对定位是将元素根据最近的已经定位(绝对、固定或相对定位)的父元素进行定位,若所有父元素都没有定位,则依据body根元素进行定位。...z-index的默认属性是0,取值越大,定位元素在层叠元素中越居上。 定义靠后的,默认在之前的元素之上,但切记不要滥用z-index。同时,父容器的z-index会影响子元素的层级级别。 ? <!
领取专属 10元无门槛券
手把手带您无忧上云