，以使背景图像完全覆盖背景区域。...背景图像的某些部分也许无法显示在背景定位区域中。) ...就像一个房间里的人，虽然规定了其同天花板的距离必须小于1米，但很可能这个规定没有起作用，就是这个道理。 ...--》 2.2.3.1 理解错了这个属性的含义，它指的是你所设置的元素的下外边距，但不代表它在父元素的底部，也不代表它的子元素都会在它的底部显示。...使用bottom（以及top、left和right）属性，但这要求该节点的position属性是absolute（绝对定位），且其父节点的position属性为relative（相对定位），则该节点即可相对其父节点定位
行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...| url (url) 参数： none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景...（默认的） no-repeat : 背景图像不平铺 repeat-x : 背景图像在横向上平铺 repeat-y : 背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素...背景附着 语法： background-attachment : scroll | fixed 参数： scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定 说明： 设置或检索背景图像是随对象内容滚动还是固定的
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用...（默认的） no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeat-y 背景图像在纵向平铺 「4....样式不冲突，不会层叠。 「2. CSS 继承性」 -概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性，只需将它应用于父元素即可。...所以说， 一个行内的盒子，如果加了「浮动」、「固定定位」和「绝对定位」，不用转换，就可以给这个盒子直接设置宽度和高度等。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
（继承了但是不显示） （h1显示的是：你设置的font-size * 2 h2显示的是：你设置的font-size * 1.5 .......）...至于设置了上下内边距的话是会撑大子盒子的。...2.不脱标，其他的元素不能占有其原来的位置。 3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。 4.行内元素使用相对定位不能转行内块元素。...2：然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。 简单地说，CSS精灵是一种处理网页背景图像的方式。
display:”inline” 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实线中，发现不写link、visited浏览器也挺兼容，所以把a标签简化了。...images/wuyifan.jpg 就是相对路径。 背景天生就是被平铺满的。 3.3 background-repeat属性 设置背景图片是否重复，重复方式为：repeat表示“重复”。...是一种CSS图像合并技术，该方法时将小图标和背景图像合并到一张图片上，然后利用css的背景定位技术来显示需要显示的图片部分。 CSS精灵有什么优点，就是减少了http请求。...绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽高： span{ position: absolute; top...可以使用如下设置使其水平居中： left:50%; margin-left:负的宽度的一半 6 固定定位 固定定位，就是相对于浏览器窗口的定位。无论页面如何滚动，这个盒子显示的位置不变。
像、、 等 HTML 标签就是内联元素的好例子，我们无法控制它们的宽度和高度。...inline-block：你可以将其视为块元素和内联元素的组合值，你可以在其中设置它们的宽度和高度，并且元素可以毫无问题地出现在同一水平线上。 none：使用此值可以从网页中隐藏元素。...例如， Float 属性接受多个属性，但你将使用其中的 3 个，分别是 right、left 和 none。 3、Background 为元素添加背景效果。...background-image：将图像应用为背景，并使用路径 URI 或 URL 来访问图像资源。...大多数情况下，你将使用以下 3 个值： 绝对：绝对定位的元素查找本身具有相对、绝对或固定位置的父后代元素。 相对：具有相对位置的元素将相对于其正常位置进行定位。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。...标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。...我一样重要 行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...| url (url) 参数： none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景...（默认的） no-repeat : 背景图像不平铺 repeat-x : 背景图像在横向上平铺 repeat-y : 背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素
一行上可以显示多个，可以设置有效的宽高，代表img，input 我们可以通过display属性来重新设置标签属性 4，display：none和visibility：hidden的区别 两者都有隐藏的作用...border：边框 content：盒子的内容，显示文本和图像 margin和padding一样，可以为四边同时设置： margin：2px 四边都是2px margin：2px 3px...的某一条边单独设置top，bottom，left，right margin-top：2px 十三、float浮动属性 float可以让块级标签并排在一行，但如果设定了float，浮动框就不在文档的普通流...top，left等值都没作用的 2，relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，在这种情况下，虽然原来的位置没有了内容，但依然占据位置，即占据文档流空间 ?...3，absolute（绝对定位） 设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的
常用属性 color:定义文本颜色 text-align:定义文本对齐方式 letter-spacing:定义字符间隔 5.3 背景 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。...定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。...常用属性: position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。...相对定位是一个非常容易掌握的概念。如对一个元素进行相对定位，它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动 ? 绝对定位 ?...5.9 分类 CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...border（边框）：围绕在内边距和内容外的边框。 content（内容）：盒子的内容，显示文本和图像。 盒子模型： ?...） 6.1 static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。...6.2 relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...6.3 absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
Integrate CSS into HTML 内联样式 在 HTML 标签上通过 style 属性来引用 CSS 代码。简单方便，但只能对一个标签进行修饰。...内部样式表 在 标签内通过 标签来声明 CSS。可以通过多个标签进行统一的样式设置，但只能在本页面上进行修饰。...通过文本属性可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。 背景属性 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。...定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。...分类属性 CSS 分类属性允许控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
：相对路径；绝对路径 URL三种方式：绝对路径；相对于服务器根目录；相对于文档 索引、锚记链接：对于同一文件的不同部分，被指向的目标是通过标签的NAME属性来定义的。 ...地图链接：usemap、ismap 2、表格标签： 作用：显示数据表；对文本和图形进行布局 ......：创建表格，并在其中间添加标题和需要的数据 标签中常用的属性： ——设置表格的背景色； ——...设置边框的宽度，以像素点为单位的边框宽度，不设置宽度默认值为0 ——取值为left、right、center，分别表示将表格在页面中的相对位置 —— 设置表格的单元格边框与其内部内容之间空间大小 —— 设置表格的宽度、高度，单位用绝对像素值或窗口、总宽度的百分比 <caption
CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。 ...它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 （1）CSS伪类 :link -> 该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。 ...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ...（5）绝对定位 绝对定位是将元素根据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素进行定位。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，这将大大地降低页面的加载速度。
CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。 ...它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 （1）CSS伪类 :link -> 该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。 ...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ...如下图所示，这就是一个相对定位的效果展示： （5）绝对定位 绝对定位是将元素根据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素进行定位。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，这将大大地降低页面的加载速度。
例如： div, p { color: red; } 上面的代码为div标签和p标签统一设置字体为红色。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识，关注我微信公众号：全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 鼠标光标属性...背景图片*/ background-repeat:no-repeat;/*背景图片是否允许重复no-repeat repeat*/ background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动...绝对定位 .positionA{ position: absolute; left: 20px; right: 20px; } 以上为绝对定位，绝对定位是相对于整个页面来说的，...*/ overflow-y: hidden;/*设置竖直的滚动条*/ overflow-x: scroll;/*设置横向的滚动条*/ } 样式显示和隐藏 样式隐藏分为占位隐藏以及非占位隐藏...而占位隐藏的意思就是，虽然这个元素我们看不到，但是他其实已经被渲染出来了，只是被隐藏了，就像科幻片里面的隐身一样。
，想让文本居中显示时，如果属性不生效，可自行计算，如下： ?...标签，浏览器通常默认给了 margin: 8px 默认有设置 margin-left 和 padding-top 所以，通常都会有一份 reset.css，来重置这些默认属性值。...9.位置 position position 属性值有三个：absolute, relative, fixed 三种虽然是不同的定位模式，但其实说白了，就是参考点不同。...而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。...也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。 但通常都是使用子绝父相的模式，其他模式并没有什么意义。
对于需要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上。...2、固定区域浮动，自适应区域不设置宽度但设置 margin .container { overflow: hidden; *zoom: 1; } .sidebar { float...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。...3、固定区域使用定位，自适应区域不设置宽度，但设置 margin .container { position: relative; } .sidebar { position: absolute...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
