，属性值如下 normal 合并空格，换行符转化为一个空格，允许自动换行 nowrap 合并空格，换行符转化为一个空格，不允许自动换行 pre 保留空格，保留换行符，不允许自动换行 pre-line 合并空格...，保留换行符，允许自动换行 pre-wrap 保留空格，保留换行符，允许自动换行 break-spaces 保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间 ''' 现需要给文本内容「CSDN...: ＂结束＂; } ::before 用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素 p::before { content: ＂开始＂; } ::first-line 向文本的首行添加样式...*】和关系选择符【+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等】对优先级没有影响 在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错... float 现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最左边的元素的类名为_____?
注意：在CSS3规范中，为了区别伪元素和伪类，CSS3建议伪类用单冒号“："，伪元素用双冒号"：："。 7、CSS的哪些样式可以继承？哪些不可以继承？...inherit是指从父元素继承 display属性的值。 14、简要描述块级元素和行内元素的区别。 块级元素的前后都会自动换行。默认情况下，块级元素会独占一行。...23、简要描述CSS中 content属性的作用。 content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。...pre表示不会合并空白符，渲染换行符，不会自动换行，相当于pre元素。 pre-wrap表示不会合并空白符，渲染换行符，自动换行pre-line表示合并空白符，渲染换行符，自动换行。...nowrap表示合并空白符，不会渲染换行符，不会自动换行。 normal表示默认值，按照文档流特点渲染，合并空白符，不会渲染换行符，自动换行。 54、常见的兼容性问题有哪些？
， 28 7月 2022 作者 847954981@qq.com 前端学习, 我的编程之路 CSS3进阶整理 CSS伪类 CSS伪元素–::after/::before 伪元素就是利用css在标签内部的前面或者后面添加一个行内元素...这里有三个比较常见的： li:first-child{} //匹配父元素中的第一个子元素 li:last-child{} //匹配父元素中的最后一个子元素 最后一个为:nth-child(){}，这个伪类比较复杂...正常情况下，文本内容超出所给宽度范围时，文字会自动换行，但我们不希望它换行就需要文本溢出省略操作了。...这里需要完成三步：强制不换行、元素内容溢出处理、文本溢出省略。...1.强制不换行：H5中推荐使用 white-space:nowrap 方法来实现不换行 2.元素内容溢出 overflow 这一步我们的目标是超出部分不显示，使用overflow属性。
在CSS1和CSS2中，伪元素和伪类都采用单冒号进行表示，在CSS3中为了区分伪元素和伪类，规定使用双冒号代表伪元素，单冒号代表伪类，即CSS3标准中应该这么写：selector.class:：pseudo-element...:before是伪元素，并且它生成包含放置在元素中的内容之前的生成内容的伪元素。使用content 属性来指定要插入的内容。默认情况下，生成的伪元素是内联的，但这可以使用属性显示更改。...会受到框中填充的背景颜色影响Content（内容） - 盒子的内容，显示文本和图像图片在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。...，不适合在一个区域内，它扩展到外面，CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字允许长文本换行，如：word-wrap:break-word;word-break：单词拆分换行属性指定换行规则...而优点可能不太容易察觉：在大多数情况下，几乎不用自己编写一行 CSS 代码如果开发者能够对 tailwind 比较熟悉，就能够使用它提供的原子化 CSS 类完成全部样式。
伪元素和伪类的区别和作用？伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。...例如：a:hover {color: #FF00FF}p:first-child {color: red}总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。...替换元素除了内容可替换这一特性以外，还有以下特性：内容的外观不受页面上的CSS的影响：用专业的话讲就是在样式表现在CSS作用域之外。...有自己的尺寸：在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素，如在很多CSS属性上有自己的一套表现规则：比较具有代表性的就是vertical-align...浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
CSS实现定位的效果主要通过浮动( float )和定位( position)两个样式属性实现。 文档流 文档流是HTML页面中元素在排列时所占用位置的一-种规则。...设置为浮动后 宽度默认是0或者所有后代元素宽度之和 高度默认是0或者所有后代元素高度之科 多个块级元素都设置为浮动后->垂直方向排列变为水平方向排列 如果占满父级元素宽度的100%后，会自动换行 内联元素...该属性具有以下几个值: none:表示元素不会向下移动清除之前的浮动。 left: 表示元素被向下移动用于清除之前的左浮动。 right: 表元素被向下移动用于清除之前的右浮动。...both: 元素被向下移动用于清除之前的左右浮动。 clear属性的使用可以分别以下两种情况: 使用clear属性为非浮动元素清除浮动时，该元素将移动到之前浮动元素的下方。...使 用clear属性为浮动元素清除浮动时，该元素将移动到之前浮动元素的下方，并且会影响之后浮 动元素的布局。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。...对于行内元素和块级元素，其特点如下： （1）行内元素 设置宽高无效； 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin； 不会自动换行； （2...）块级元素 可以设置宽高； 设置margin和padding都有效； 可以自动换行； 多个块状，默认排列从上到下。...33、CSS属性content有什么作用？有什么应用？ content属性与::before及::after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。...以下6个属性设置在容器上： flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-wrap属性定义，如果一条轴线排不下，如何换行。
浏览器在显示内容之前会做一些处理，通过浏览器内核来解析响应回来的内容，才能将页面显示出来。...第二种方法解决 浮动 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。...需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。...:first-child 伪类将应用于元素在页面中第一次出现的时候 伪元素 :first-letter 伪元素的样式将应用于元素文本的第一个字（母）。...:first-line 伪元素的样式将应用于元素文本的第一行。 :before 在元素内容的最前面添加新内容。 :after 在元素内容的最后面添加新内容。
金三银四找工作的旺季来了，在过去的一段时间里，我花了很多时间将之前的一些基础知识做了整理，希望这些内容能够帮助你在面试的时候，稍微顺利一些。...计数器 使用计数器重置和计数器增量属性在列表中创建自动编号。...用于文本换行的 shape-outside 使用 shape-outside 属性使文本环绕指定形状，从而实现更动态的布局。...形状边缘 当与 CSS 形状结合使用时，形状边距指定浮动元素形状周围的边距，从而可以精确控制文本换行和布局。 .shape { shape-margin: 20px; } 75....字间距 字间距调整文本元素中字之间的间距，使您可以微调版式布局并提高可读性。
IE6及以下浏览器仅支持a:hover E:focus 选择匹配的E元素，而且匹配元素获取焦点 7.伪类和伪元素的区别 css伪类： 状态伪类基于元素当前状态进行选择的。...css伪元素： 对元素中的特定内容进行操作，而不是描述状态 css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号 8.层级选择器 相邻兄弟选择器： li + li:...#f66,40px 35px #f00,70px 60px #000; b)自动换行： word-break normal ：使用浏览器默认换行规则 keep-all：只能在半角空格或连接字符处换行...break-all：允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的） c)word-wrap： 让长单词与URL地址自动换行 normal：只在允许的断字点换行...如 出现文本，则相当于文本不换行 min-content:内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度 注意：以上属性值需要加前缀 ---- 补充： calc函数：此CSS函数让你在声明
：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 overflow设为hidden，...普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略 white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow... 实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字 这种实现具有以下优点： 兼容性好，对各大主流浏览器有好的支持...响应式截断，根据不同宽度做出调整 一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分 基于行数截断 纯css实现也非常简单，核心的css代码如下...在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。
（9）word-break ：自动换行 normal 使用浏览器默认的换行规则，不打断单词显示； break-all 允许在单词内换行； keep-all 只能在半角空格或连字符处换行； ...（10）word-wrap ：允许长单词或URL地址换行到下一行 normal 只在允许的段字点换行（浏览器保持默认处理） break-word 在长单词或URL地址内部进行换行 五、盒子模型...这里以定义父元素的上边框为例，在父div元素的css样式中假如以下样式： .father { border-top:1px solid #fcc; } 六、深入浮动 6.1 浮动原理 ...z-index的默认属性是0，取值越大，定位元素在层叠元素中越居上。 定义靠后的，默认在之前的元素之上，但切记不要滥用z-index。同时，父容器的z-index会影响子元素的层级级别。 ? <!...（2）CSS滑动门 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。...伪元素实现换行，替代换行标签 大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。...但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 换行标签解决。...有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 “00A”， 或简化为 “A”。这里我们用它来作为 ::after 伪元素的内容。...那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？ 这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。
浮动元素引起的问题： （1）在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或 right）的元素，在这种情况下，容器的高度不能自动伸长撑开以适应内容的高度...具体写法可参照以下示例。使用中需注意以下几点。该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素； 清除浮动是为了清除使用浮动元素产生的影响。...解释一下这2个伪元素的作用。 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。...不过浏览器需要同时支持旧的已经存在的伪元素写法。比如:first-line、:first-letter、:before、:after等。 在css2之前用的是单冒号，之后css3使用时双冒号。...::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在与dom之中，只存在在页面之中。同理，after是在主体内容之后显示的。
本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。...伪元素实现换行，替代换行标签 大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。...但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 换行标签解决。...有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 “00A”， 或简化为 “A”。这里我们用它来作为 ::after 伪元素的内容。...也就是在元素末尾添加了一个换行符的意思。 而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。 原文Demo。
（9）word-break ：自动换行 normal 使用浏览器默认的换行规则，不打断单词显示； break-all 允许在单词内换行； keep-all 只能在半角空格或连字符处换行； ...（10）word-wrap ：允许长单词或URL地址换行到下一行 normal 只在允许的段字点换行（浏览器保持默认处理） break-word 在长单词或URL地址内部进行换行 五、盒子模型...这里以定义父元素的上边框为例，在父div元素的css样式中假如以下样式： .father { border-top:1px solid #fcc; } 六、深入浮动 6.1 浮动原理 ...z-index的默认属性是0，取值越大，定位元素在层叠元素中越居上。 定义靠后的，默认在之前的元素之上，但切记不要滥用z-index。同时，父容器的z-index会影响子元素的层级级别。 <!...（2）CSS滑动门 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ? ?...伪元素实现换行，替代换行标签 大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。...但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 换行标签解决。...有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 "\000A"， 或简化为 "\A"。这里我们用它来作为 ::after 伪元素的内容。...那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？ 这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。
td:not(:first-child) 4、伪元素选择器 伪类选择器：匹配到的都是完整的元素 伪元素选择器：匹配到的是某元素中内容中的一个部分...文本颜色 : VS :: 1、:是在CSS2中提出来的，既能表示伪类选择器，又能表示伪元素选择器 2、::是在CSS3中提出来的，只能表示伪元素选择器...2、内容生成 1、作用 允许通过css的方式动态的向某元素的内容区域中增加内容 2、伪元素选择器 1、:before 或 ::before...匹配某元素内容区域之前 (:before)这是一个div 2、:after 或 ::afte 匹配某元素内容区域之后...默认情况下，浏览器会调整项目的大小来适应容器 2、wrap 换行
标签会保留文本中的空白字符（包括空格、制表符和换行符），并按照实际编写时的格式进行显示。 使用 标签可以在网页上展示一些需要保留原始格式的文本，例如代码片段、日志信息等。...预格式化文本不会自动进行换行，而是保留原始的换行和缩进。 下面是一个简单的示例： 复制代码 Hello, World!... 在浏览器中渲染后，文本内容将以原始的方式展示出来： 复制代码 Hello, World!...可以用CSS对 标签中的文本进行进一步的样式调整，例如修改字体、调整边框等。...*/ height: 12px; /* 伪元素高度 */ border-radius: 16px; /* 圆形形状 */ box-shadow: 20px 0 #fdbc40,
标签会保留文本中的空白字符（包括空格、制表符和换行符），并按照实际编写时的格式进行显示。 使用 标签可以在网页上展示一些需要保留原始格式的文本，例如代码片段、日志信息等。...预格式化文本不会自动进行换行，而是保留原始的换行和缩进。 下面是一个简单的示例： Hello, World!... 在浏览器中渲染后，文本内容将以原始的方式展示出来： Hello, World!...可以用CSS对 标签中的文本进行进一步的样式调整，例如修改字体、调整边框等。...*/ height: 12px; /* 伪元素高度 */ border-radius: 16px; /* 圆形形状 */ box-shadow: 20px 0 #fdbc40,
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
