标签内）使用标签将css样式文件链接到HTML文件内。...这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。...但如果页面涉及到js，就不好了。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。所以id要有唯一性。...如下代码： p{font-size:12px;text-indent:2em;} 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。...盒模型 CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 的方式,页面中的所有标记都可以看成是一个盒子，盒模型是我们对网页 行定位的基础，而定位是我们对网页元素进行位置固定的重点知识
HTML 用于创建网页的标准标记语言 1.1 HTML 语法 标签和属性不区分大小写，但是推荐小写 部分空标签可以不闭合，如 input、meta 属性值推荐使用双引号包裹 属性值为 true 时，可以省略属性值...语义化好处： 了解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成 1.4 src 和 href 的区别 src 指向的内容会嵌入到文档当前标签所在的位置，而 href 是用于建立这个这个标签与外部资源之间的关系...: 字体列表最后加上通用字体族 英文字体放在中文字体前面 2.3.2 字体大小 font-size 关键字：small、medium、large 长度：px、em 百分比：相对于父元素字体大小 2.3.3...决定一行内盒子的水平对齐 vertical-align 决定一个盒子在行内的垂直对齐 避开浮动(float)元素 2.7.2 块级排版上下文(BFC) BlockFormatting Context...2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解，之后还是得正式学
*/ unicode-bidi: isolate; /* 计算元素容器的方向时，不考虑这个元素的内容。...描述: 介绍两种对齐方式属性，前者 text-align 是用来指定行内元素（inline）或表格单元格（table-cell）元素的水平对齐方式， 而 text-align-last 指定一行或者块中的最后一行在被强制换行之前的对齐规则...语法参数: /* 自行判断，在绘制文本时，何时该优化速度，易读性或者几何精度 */ text-rendering: auto; /* 浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度，它会使字间距和连字无效...*/ text-rendering: optimizeSpeed; /* 浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度，可能在移动设备上会造成比较明显的性能问题 */ text-rendering...: optimizeLegibility; /* 浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。
从W3C Rec中看出，line-height就是狭义Leading，而line-height的字面意思即为“行高”，推导结果CSS中行高即是行距。 这里我们了解到行高，行距和行间距的区别了。...这里就涉及到一个相对复杂的CSS垂直对齐规则——vertical-align。 注意：前方高能，需要IFC、line box作为前提知识。...edge)； super:升高元素的基线到父元素合适的上标位置； middle:把元素line box中垂点与父元素基线 + x-height/2的高度对齐; sub:降低元素的基线到父元素合适的下标位置...对齐操作必定涉及操作元素和参考系元素，而vertical-align的值全是指参考系元素的位置，而操作元素则以baseline或linebox上中下作对齐； 默认对齐方式为baseline，数量值均是相对于...之text-top篇 CSS深入理解vertical-align和line-height的基友关系 css行高line-height的一些深入理解及应用 大小不固定的图片、多行文字的水平垂直居中
常见的块级元素有： address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是css layout的主要标签 dl -...行内元素不会独占一行,相邻的行内元素会排列在同一行里，直到一行排不下，才会换行,其宽度随元素的内容而变化。 块级元素可以设置width,height属性，块级元素即使设置了宽度,仍然是独占一行。...行内元素设置width，height属性无效，它的长度高度主要根据内容决定。 块级元素可以设置margin和padding属性。行内元素的margin和padding属性。...解决文本溢出问题，我们需要设置两个属性： white-space: nowrap ，强制文本在一行内显示 overflow: hidden ，将溢出内容改为隐藏 { white-space: nowrap...相对长度单位。像素px是相对于显示器屏幕分辨率而言的。在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。
在css世界中，内联元素极为重要，涉及的css属性也非常多，这些属性往往具有继承特性！ 内联盒模型.png 内容区域：只与字号和字体有关，与行高无关！...(在宋体字体下，内容区域高度 = 字体大小) 内联盒子：不会让内容成块显示，而是排成一行的内联标签（如、和等） 行框盒子：每一行就是一个行框盒子，如：hello world 元素前，字体大小为默认字体大小）。文字默认都是基线对齐，字号越大其基线位置也就越往下。...不同字号文字高度超出行高示意.png 解决上述问题有两种方式： 方式一：将“幽灵空白节点”字体大小设置成和后面的 一致。..."高度塌陷"可以让跟随的内容和浮动元素在一个水平线上；行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位下只会跟随浮动元素，而不会产生重叠。这是实现文字环绕的重要两点！
例如，可能会遇到，改变元素的vertical-align根本没有改变它自己的对齐方式，但同一行的其它元素（的对齐方式）却变了！...上图中，把行盒的文本盒（更多信息见下文）的顶边和底边用绿色画出来，而baseline还用蓝线，还给文本元素设置了灰色背景高亮标记出来 行盒的顶边与该行最高元素的顶边对齐，并且底边与该行最低元素的底边对齐...如果这个字符没有以任何方式对齐，它默认将坐在baseline上 在baseline周围，行盒含有我们称之为文本盒（text box）的东西。文本盒可以简单地看做一个没有任何对齐方式的行盒中的内联元素。...它具有baseline，文本盒及顶边底边 内联级元素，是哪些被对齐的东西，它们具有baseline和顶边底边 vertical-align的值 通过使用vertical-align来对上面提到的参照点和内联级元素设定某些关联...如果vertical-align不生效，只用考虑这些问题： 行盒的baseline和顶边底边在哪里？ 内联级元素的baseline和顶边底边在哪里？
normal 默认处理方式 pre 原封不动的保留你输入时的状态 nowrap：强制所有文本在同一行内显示 2.word-break 定义元素内容文本的字间与字符间的换行行为 normal：...3.text-align 定义元素内容的水平对齐方式。 left：内容左对齐。 center：内容居中对齐。 right：内容右对齐。...如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小） super：把当前盒的基线提升到合适的位置作为父级盒的上标...（该值不影响该元素文本的字体大小） text-top：把当前盒的top和父级的内容区的top对齐 text-bottom：把当前盒的bottom和父级的内容区的bottom对齐 middle：把当前盒的垂直中心和父级盒的基线加上父级的半...x-height对齐 top：把当前盒的top与行盒的top对齐 bottom： 把当前盒的bottom与行盒的bottom对齐 8.line-height 定义元素中行框的最小高度 9.
1.2 字体大小（font-size） font-size 属性用于设置字体大小。...>你好 运行结果： 注意： 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略...>你好 运行结果： 2.2 对齐文本（text-align） text-align 属性用于设置元素内文本内容的水平对齐方式 语法： 选择器 {...，通常是将段落的首行缩进。...语法： 选择器 { text-indent: px; } 通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。 代码： <!
CSS 有何特点? 描述: CSS（层叠样式表）具有以下特点： 分离内容和样式：CSS将网页的内容和样式分离开来，使得网页的结构更加清晰，易于维护和修改。...通过将样式定义在独立的CSS文件中，可以在多个页面中共享样式，提高代码的重用性。 层叠性：当多个样式规则应用到同一个元素时，CSS会根据优先级和样式的特殊性来决定最终生效的样式。...CSS 规则由两个主要的部分构成：选择器(Selector)，以及一条或多条声明(Declaration) 整个结构称为规则集（规则集通常简称规则）例如 /* # 语法 */ /* # 方式1.写在一行...article > p 表示选择了元素的初代子元素 CSS 层叠特性 描述: CSS样式具有层叠性，即当多个样式规则(同一个属性和值)应用到同一个元素时，会根据优先级来决定最终生效的样式...important规则 执行结果: 使用建议： 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !
如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。...消除缝隙，有两个方法。 （1）span和span紧紧挨着 ? （2）设置空白字符的fontsize为0，就消除了空白字符的占用位置。 再重新设置子元素的font-size ?...必须使用vertical-align: top;才能让inlineblock元素垂直方向能对齐 基线对齐的内容，比较复杂。...line-height=20px line-height=200% 代表是父元素的字体行高的2倍。
* 行高相关的现象和解决方案 * 行高的调整 * 底线 顶线，底线和顶线 之间 是文本占据的区域。 * 基线(base line)，英文文字的对齐线。...对中文来讲，文字的底部才是基线位置；同时 文字的对齐 是使用顶线或底线 来对齐的。 * 为什么行高不一样，然而渲染的高度却是一样的呢？...* 原因：img也是inline的，因此img要遵守 行高的构成，img会按照baseline对齐，而 在基线和底线之间 是留有空隙的。...空隙的大小 视字体大小而定(如果字体大小是12px，那么 缝隙会是3px左右的) * 解决方法：将图片的vertial-align设置为bottom即可。...实际使用中overflow-wrap的兼容性 不如 word-wrap. 但是overflow-wrap和word-wrap都是指的同一个东西。
# 行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 # 总结-块级元素和行内元素分别有哪些？...# 精灵技术 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。...当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。 可以这样理解权重：这个选择器对于这个元素的重要性。...# CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。 !
本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证...数值和百分比：最终会被计算为带单位的值，具体计算方法就是乘以字体大小font-size。 长度值：就是100px这样带单位的值。...使元素的基线对齐到父元素的基线之上的给定长度，数值正值是基线往上偏移，负值是往下偏移，借此可以实现元素垂直方向精确对齐。）...内联元素的默认对齐方式是baseline，所以此时此时span元素的基线是和父元素的基线相对齐的，而此时父元素的基线在拿呢？ 父元素的基线其实就是行框盒子前的幽灵空白节点的基线。...此时span的行框盒子前，还存在一个幽灵空白节点。由于span元素默认基线对齐，所以span元素的基线也就是其下边缘是和幽灵空白节点的基线对齐的。
1.比对： 简单比对一下div+css布局中的inline-block和float的特点，同时附上使用inline-block之后元素之间产生空隙的解决方法。...垂直对齐（Vertical alignment）： 在两个div的高度不同时，两种方式的对齐效果也不相同： image.png 图一：display:inlne-block属性修饰的元素没有脱离文档流...如果是使用display:inlne-block，则我们可以通过vertical-align来控制两个元素的对齐方式： 我们为两个div分别添加一个属性：vertical-align:middle <div...通常来说，当你需要控制元素的垂直对齐跟水平排列时，使用inline-block；当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空隙问题时，使用浮动。...; display: inline-block; font-size: 14px; /*要设置相应的字号*/ } 原理： 换行和回车会给各个span之间带来空格，而空格会被当成字符处理
: 1.5rem; } 书中推荐使用em/rem这两个缩放单位，其他的长度单位，如mm/cm/in/pt这些绝对物理长度，这些是给打印样式准备的，网页样式不应该使用这些单位。...vertical-align不同值对应效果 其中text-top与text-bottom会让当前元素的内容区和父元素的内容区顶部或底部对齐，但只有在行内盒子的 font-size 或 line-height...多栏布局主要包括以下几个属性： column-gap: 栏间距，值为长度值 column-count: 栏数，值为数字 column-width: 栏宽，值为长度值 column-span: 是否跨栏，...通过细微的调节，可以让两种字体切换时的闪烁感降到最低，如将行高调整一致，对于 x 高度不一致的字体调整字体大小等。 4.5 高级的排版特性：OpenType 前面我们知道了如何使用更丰富的字体。...文本段落中的“老式”数字风格和小写字母搭配更合适；“表格数字”在表格里的费用清单里排列得更整齐；而“线性”数字单独使用或与大写单词搭配使用显得更为统一。分别如下面两图所示。 ?
内容区的大小 根据 字体大小font-size的值 和 字数 进行变化。 字体大小font-size值 确定了 内容区的高度。...如果一个inline元素font-size:15px，则 内容区的高度 = 15px。 内容区 就是一个框，而 每一个文字 都有它的em框（em框 确定 每个文字的高度）。...元素居中时的行高 让元素在指定区域内 上下居中：行高 = 行距 * 2 +font-size image.png 行高和字体大小 行高line-height< 字体大小font-size时, 将出现...image.png （4）行距 行距：指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。...行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
语法： .类选器名称{css样式代码;} 注意： 1、英文圆点开头 2、其中类选器名称可以任意起名（但不要起中文噢） 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来，如下： <span...这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。...③、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 如何将一个元素设置为块状元素？ ...如下代码： p{font-size:12px;text-indent:2em;} 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。... css: p{font-size:14px} span{font-size:0.8em;} 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
，但是会影响页面响应速度，不建议使用 样式的两个特性 层叠性：多个选择器设置的样式可以叠加在同一标签上 当样式出现冲突时，优先考虑权重;权重相同的情况下，采用就近原则 继承性：子标签继承父标签的某些样式...font: 12/1.5 字体大小为12px，行高为1.5倍 文本样式 color 用于设置文本蓝色 <!...hover 伪类样式 选择器权重 块元素和行内元素 HTML标签主要分为块标签和行内标签两种类型，也称为块元素和行内元素 块元素 快元素会独占一行，例如：、、 等。...行内元素不会占用整个一行，例如：、、 等。...before和after两个伪元素，再使用clear:both进行浮动清处 清除浮动细节 推荐用法 after伪元素法(京东)、双伪元素法(小米商城官网)。
{ color: red; font-size:32px; } 内联引入，又称行内引入，通过元素的 style 属性添加，不推荐使用这种方式，一般只用在需要使用特殊样式的某些元素上...rel="stylesheet" href="text/css" href="css/test.css"> 若是通过 3 种方式添加的同一元素，同一属性，值不一样的时候，哪个会生效？...，该属性只给块元素设置，行元素设置没效果，该属性的值为 center / left / right，可以设置块元素里面文本和图片的对齐方式 text-indent 属性，规定文本块中首行文本的缩进 p...-- 行元素可以通过块元素的嵌套来达到文本的水平对齐方式 --> 富强民主文明和谐，自由平等公证法制，爱国敬业诚信友善; 富强民主文明和谐，自由平等公证法制...，这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距），如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色 background-color 的值有一般三种设置方式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
