网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签。但这些标签破坏了html作为一门结构语言的表现。 于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案。 元素 元素是文档结构的基础,在CSS中,每个元素都会生成一个框(或者说盒) 表现形式 替换元素:替换元素的内容并 ...
分类:
Web程序 时间:
2020-06-15 21:18:06
阅读次数:
80
可替换元素和非替换元素 可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。非置换元素non-replaced element也称作非替换元素,其内容由CSS渲染直接表现给客户端。 可替换元素 一个内容 ...
分类:
其他好文 时间:
2020-06-10 13:27:56
阅读次数:
71
?# 从零开始的前端生活-理解content(一) 替换元素 定义 我们把通过修改某个属性值呈现的内容就可以被替换的元素被称为"替换元素"。 比如 <img src="xxx.jpg"> ,我们只需修改属性src的值,内容就会发生变化,这就是替换元素。 类似的有 <video>、<iframe>、< ...
分类:
其他好文 时间:
2020-06-03 23:33:17
阅读次数:
104
图片标签 图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片,img标签是一个自结束标签,img这种元素属于替换元素(块元素与行内元素之间,具有两种元素的特点) 属性:src 指得是图片的路径 alt指得是图片的描述,正常情况下不会显示,当有的浏览器不显示的时候,搜索引擎会根据a ...
分类:
其他好文 时间:
2020-05-13 23:44:48
阅读次数:
90
一、box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行、跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分。 (2)clone:断开的各个盒子会单独渲染。 下面用一个示例来演示两种的区别, ...
分类:
Web程序 时间:
2020-03-30 09:58:35
阅读次数:
107
普通文本、行内级元素(行内非替换元素,行内替换元素、行内块级元素)如果希望在水平方向居中,可以在父元素内设置 而块级元素水平居中,由于块级元素始终占据一行,设置text align对块级元素无效(如果在父元素设置text align为center,那么块级元素内部的文字会通过继承居中),需要在当前元 ...
分类:
其他好文 时间:
2020-03-02 22:20:50
阅读次数:
70
CSS如何实现固定宽高比 一、元素尺寸已知,直接写宽高 二、尺寸未知,可替换元素(img、video等),指定宽度或者高度,另一个自动计算。 <div class="wrapper"> <img src="./picture" alt=""></div>.wrap{ width: 50vw;}img ...
分类:
其他好文 时间:
2020-02-25 23:17:40
阅读次数:
86
可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。 也就是说,css可以影响元素但是不能影响其内容的显示。 可替换元素 : 典型可替换元素 <iframe> <video> <embed> <img> 有些 ...
分类:
Web程序 时间:
2020-02-22 22:23:28
阅读次数:
111
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-position : 属性来切换被替换元素的内容对象在元素框内的对齐方式。 object取值: ...
分类:
其他好文 时间:
2020-02-22 21:30:50
阅读次数:
62
width是定义元素内容区的宽度;height是定义元素在内容区的高度.在内容区外面可以增加内边距(padding)、边框(border)和外边距(margin),这样的话就成了我们常说的盒子模型,后期内容中会给大家讲到这些,在行内非替换元素会忽略width这个属性,也就是我们不定义这个元素的时候,默认值为auto,由内容将其撑开。绝对单位1.像素px(pixels),在web上,像素px是典型的
分类:
Web程序 时间:
2020-01-16 01:17:54
阅读次数:
147