二、行内元素 行内元素也叫内联元素，和其他元素都在一行上，高度、行高、内边距和外边距都不可改变，宽度是它文字或者图片的宽度，也是不可改变的，行内元素只能容纳文本或者其他行内元素，padding-top和...q - 短引用s - 中划线（不推荐）samp - 定义范例计算机代码select- 项目选择small - 小字体文本span - 常用内联容器，定义文本内区块strong- 粗体强调sub - 下标...块级元素和内联元素之间的转换： 1.display 块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display...:inline-block; display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。...display:block;转换为块级元素. display:inline;转换为行内元素。 display:inline-block;转换为行内块级元素。
多行文字组成一个包含块。 幽灵空白节点：内联元素的每个行框盒子前面有一个“空白节点”一样，这个“空白节点”不占据任何宽度，无法选中获取，但是又实实在在存在，表现就如同文本节点一样。...所有替换元素都是内联元素，默认display属性是inline或inline-block（除了input[type="hidden"]默认display: none;）。...用内联元素（如文字）阻隔；4. 给父元素设定高度。 margin的百分比值跟padding一样，垂直方向的margin和水平方向上的一样都是相对于父元素宽度计算的。...line-height的作用： line-height属性用于设置多行元素的空间量，如多行文本的间距。 对块级元素来说，line-height决定了行框盒子的最小高度。...clear只能作用于块级元素，并且其并不能解决后面元素可能发生的文字环绕问题。
【正确答案】C 【答案解析】下面这些标签可用在 head 部分：, , 5、(单选题)下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度 A.display:inline...B.display:none C.display:block D.display:inherit 【正确答案】C 【答案解析】display属性 : block : CSS1 块对象的默认值。...将对象强制作为块对象呈递，为对象之后添加新行 可以定义高度和宽度 none : CSS1 隐藏对象。...将对象强制作为内联对象呈递，从对象中删除行 inline-block : IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。...旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。
important ---- 流、元素 块级元素 常见的块级元素 「块级元素和display为block的元素不是一个概念」 元素默认的display值是list-item...：内联盒子 内在盒子：块级容器盒子 inline 外在盒子：内联盒子 内在盒子：内联盒子 可以粗略的认为： display:block ≈ display:block-block display:inline...≈ display:inline-inline ❝「块级盒子负责结构,内联盒子负责内容」 ❞ 内联元素 如何区分内联元素 从「定义」上：内联元素的内联特指外在盒子 从「表现」上：可以和文字在一行显示...和文本域的100%自适应父容器宽度 替换元素的特性之一:尺寸由内部元素决定并且无论其display属性值是Inline还是block也就是说替换元素的宽度却不受display...:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们。
CodePen上预览和编辑代码 说明使用：before和：after伪元素作为在悬停时设置动画的边框。 浏览器支持程度 100%. 35.甜甜圈旋转器 创建一个甜甜圈旋转器，可用于等待内容的加载。...caninuse - css-variables caninuse - css-transitions 38.悬停阴影动画 在文本上悬停时，在文本周围创建一个阴影框动画效果。 ?...当文本悬停时，创建文本下划线动画效果。...:inline-block 使p成为内联块，以防止下划线跨越整行宽度而不仅仅是文本内容。...caniuse - feat=user-select-none 41. 弹出菜单 在悬停和焦点上弹出交互式菜单。 ?
常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本...,而表单元素的替换尺寸和浏览器自身有关。...padding实现高度可控的分割线 3.用内联元素实现瞄点定位距离 4.利用padding百分比值实现等比例缩放图片效果: .pd-3{ padding: 10% 50%; position...浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件 块级元素，但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个...计算值为inline的非替换元素的垂直margin是无效的 对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以永远不会发生margin合并 内联特性导致margin失效：一个容器里面有一个图片
CSS3的设计则是为了更绚丽的视觉效果和更丰富的网页布局。 块级元素负责结构，内联元素负责内容！ 块级元素 一个水平流上只能单独显示一个元素，因此理论上都可以配合clear属性来清除浮动带来的影响。...块级元素，line-height 指定了元素内部行框盒子(line-boxes)的最小高度； 非替换元素的纯内联元素，line-height 用于计算行框盒子(line-boxes)的高度； 替换元素，...vertical-align vertical-align 起作用的前提是：只能应用于内联元素（inline、inline-block、inline-table）以及display值为table-cell...文本控制 内联元素缩进 text-indent 仅对内联元素元素有效，且仅对第一行内联盒子内容有效。...根元素； float的值不为none； overflow的值为auto、scroll或hidden； display的值为table-cell、table-caption和inline-block
：用来替换元素内容的部分并未由文档内容直接表示，如img、input等 非替换元素：大多数都属于非替换元素，内容由用户在元素本身生成的框中显示，如段落、标题、单元格等 元素显示角色（块级元素：生成一个元素框...，它会填充其父元素的内容区；行内元素：在一个文本行内生成元素框，而不会打断这行文本） 在HTML和XHTML中块级元素不能嵌套在行内元素中，但在CSS中对嵌套没有任何限制 1.4 结合CSS和XHTML...6.1 缩进和水平对齐（text-indent和text-align） 6.2 垂直对齐（line-height） 垂直对齐文本（vertical-align）只应用于行内元素和替换元素，如图像和表单...；上标和下标super和sub； 6.3 字间隔和字母间隔（word-spacing和letter-spacing） 6.4 文本转换（text-transform：大小写转换） 6.5 文本装饰（text-decoration...） 6.6 文本阴影（text-shadow） 第7章 基本视觉格式化 7.1 基本框 7.2 块级元素（block） 7.3 行内元素（inline） 7.4 改变元素显示（display设置）
; /*包裹浮动元素*/ overflow: hidden; display: inline-block; } /*内联元素包裹性*/ .pagination li { display:...inline; } .pagination a { /*带有方向的display: inline-block元素*/ float: left; /*消除文本修饰*/ text-decoration.../*可以有颜色，也可以透明*/ border-color:transparent; } .multi_drop_menu a:hover { /*悬停时文本颜色*/ color:#fff;.../*悬停时背景色*/ } .multi_drop_menu a:active { /*点击时背景变色*/ background:#fff; /*点击时文本变色*/ color:#ccc;...} .multi_drop_menu li:hover > ul { /*父元素悬停时显示*/ display:block; } .multi_drop_menu li li ul { /
常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本...三.深入理解content 1.在web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包含边框）为300*150，如video,iframe,canvas等，少数为0，如img,而表单元素的替换尺寸和浏览器自身有关...但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案： 父级设置为块级格式化上下文元素...计算值为inline的非替换元素的垂直margin是无效的 对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以永远不会发生margin合并 内联特性导致margin失效：一个容器里面有一个图片...更多推荐： 《前端算法系列》如何让前端代码速度提高60倍 《前端算法系列》数组去重 vue高级进阶系列——用typescript玩转vue和vuex 前端三年，谈谈最值得读的5本书籍 用webpack4.0
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。...（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。...（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。 75.content 与替换元素的关系？ content属性生成的对象称为“匿名替换元素”。...（1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。对于文本这样的纯内联元素，line-height就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的 元素时，我们可以通过:hover来描述这个元素的状态。...display'、'position'和'float'的相互关系？ （1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。...（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。...（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。 75.content 与替换元素的关系？ content属性生成的对象称为“匿名替换元素”。...对于文本这样的纯内联元素，line-height就是高 度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。
display:none与visibility:hidden的区别？ 伪元素与伪类的区别和作用？对盒子模型的理解？ 单行、多行文本溢出隐藏？ 替换元素的概念与计算规则？...display: none; 加在元素自身，元素自身隐藏，元素占据的位置也不存在了 visibility: hidden; 加在元素自身，元素自身隐藏，元素占据的位置依然存 关于 display: none...① 单行文本省略代码 div { white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; /*超出范围的文本内容用省略号显示*/ overflow:...*/ display: -webkit-box; /*对象作为弹性盒子模型显示*/ -webkit-line-clamp: 2; /*来限制一个块元素显示文本的行数*/ -webkit-box-orient...（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。
border-top：就是全部颜色宽度样式都设置并且只给上面上边框 border-left-style：就是只设置左边且只设置样式 块元素属性 margin外边距与padding内边距 块元素与内联元素...常见的内联元素有：a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span 块和内联的转换： display:block 内转块...display:inline 块转内 display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够 浮动：通过设置浮动可以到达同行的效果不用去转内联块...，定位的元素的父元素是用相对定位就行。...相当于定位position-relative还是absolute属性是作用于子元素 快到碗里 !
内联元素只能包含文本或其他内联元素，不能包含块级元素。...常见的内联块状元素有input、button等。 内联块状元素可以包含其他内联元素和文本，也可以和其他内联元素在同一行显示。...-块或者内联元素设置 描述: CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式Flow布局、网格Grids布局或弹性Flexible布局。...display-inside> */ display: flow; /* 使用流式布局（块和内联布局）来排布它的内容。...; /* 该元素生成块级元素盒，如果它是一个单独的内联盒，它将和周围的内容一起流动（行为类似于替换元素）。
，但内联元素不能包含块级元素，它只能包含其它内联元素。...独占一行 inline 设置成内联，长宽设置无效，大小由内容多少而定，不独占一行 inline-block 兼具块级和内联标签的特性，可以设置长宽，但是不独占一行 none(隐藏某标签) 1 p{display...block(内联标签设置为块级标签) 1 span {display:block;} 注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 ...（2）父：块级元素 子：内联元素 如果内联元素是不可替换元素（除img，input以外的一般元素），元素是没有办法设置宽度的，也就谈不上100%的问题了。 即内联元素必须依靠其内部的内容才能撑开。...如果内联元素是可替换元素（img，input，本身可以设置长和宽），不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。 <!
浮动 float属性指定一个 元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该属性具有以下几个值: . none:默认值，表示元素不浮动。...当前元素设置浮动后，之影响当前元素后边的元素 所有元素都设置为浮动的话，块级元素排列顺序变为水平方向的排列, 块级元素的浮动 块级元素默认的宽度和高度 宽度是父级元素宽度的100% 高度是0或者所有后代元素高度之和...内联元素的默认宽度和高度 宽度是内容的宽度- width属性是无效的 高度是内容的高度- height 属性是无效的 内联元素设置为浮动后 width 和height属性有效 多个内联元素依旧是水平排列...该属性具有以下几个值: none:表示元素不会向下移动清除之前的浮动。 left: 表示元素被向下移动用于清除之前的左浮动。 right: 表元素被向下移动用于清除之前的右浮动。...设置为绝对定位 将元素设 置为行内块级元素(元素的CSS样式属性display值为inline- -block ) overflow属 性值设置不为visible的块级元素(一般情况下，值为
属性 说明 display:block 将元素显示为块元素，前后有换行符 display:inline 将元素显示为内联(行内)元素，前后没有换行符 display:inlineblock 将元素显示为行内块元素...清除默认样式 disc 实心圆 circle 空心圆 square 实行正方形 decimal 数字 list-style:none;常用于去除无序列表的小黑点 3.7 背景样式 2.7.1 常见背景样式...属性 值 说明 block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 inline 内联元素的默认值。...元素会被显示为内联元素，该元素前后没有换行符 inline-block 行内块元素，元素既有内联元素的特性，又有块元素的特性 none 元素隐藏 5.2 浮动 float属性 值 说明 left 元素向左浮动...元素过渡效果不会立即触发，当过了设置的时间值后才会被触发 ； 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ； 0：默认值，元素过渡效果立即执行； 7.3 过度的触发机制 1.伪类触发 ：hover 鼠标悬停和划过时的显示效果
（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。...（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。 75.content 与替换元素的关系？ content属性生成的对象称为“匿名替换元素”。...对于文本这样的纯内联元素，line-height就是高 度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。...（6）vertical-align起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元 素。...：如果隐藏元素同时又设置了background-image，则图片 依然会去加载；如果是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使 用的。
、内联元素布局易于理解和使用、强大的宽高控制布局较为僵硬、不适合复杂布局inline文本、图像水平布局、内联元素间的排列垂直边距不生效、大小控制与文本流自然融合无法设置宽高、边距和填充有限制inline-block...按钮、小部件内联元素的宽高控制大型布局、自动布局结合了inline和block的特点对齐问题、间隙问题flex导航栏、卡片布局、复杂的一维布局一维布局、对齐、分布空间二维布局的复杂场景强大的对齐能力、灵活的空间分配学习曲线相对较高...inline-flex小型的、内联的复杂布局内联元素的复杂布局大型的二维布局flex的优点，但适用于内联环境与flex相同，不适合大型的二维布局grid复杂的页面布局、表格布局二维布局、对齐、模板区域旧浏览器不兼容强大的二维布局能力...、精确布局控制学习曲线高、兼容性问题inline-grid内联的复杂布局内联元素的二维布局与grid相同grid的优点，但适用于内联环境与grid相同，不适合大型的二维布局flow-root清除浮动、局部...border-radius: 5px; padding: 2px 5px; } .main-nav ul { list-style-type: none
领取专属 10元无门槛券
手把手带您无忧上云
