| HTML&CSS常用属性 | 您所在的位置：网站首页 › 太晶化图标对应属性 › HTML&CSS常用属性 |
HTML&CSS常用属性
|
HTML
VSCode快捷键
快捷键作用Shift + Alt + ↓ / ↑向上/向下复制行Ctrl + Shift + K删除行ctrl + /行注释shift + alt + a块注释Ctrl + Enter快速换行home切换行首end切换行尾Alt + ↓ / ↑行移动ALT + Shift + 左键多行修改
基本结构组成
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。 标签名定义说明HTML标签页面中最大的标签，我们成为根标签文档的头部注意在head标签中我们必须要设置的标签是title文档的标题让页面拥有属于自己的网页标题文档的主体元素包含文档的所有内容。页面内容基本上都是放到body里面的 Document 复制代码 标准流 一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙. 网页布局: 标准流 + 浮动+ 定位 标准流布局规则 块级元素: 从上往下 垂直布局 独占一行 行内 /行内块元素: 从左往右 水平布局 一行装不下自动换行 HTML常用标签 语义化标签用特定的标签，去表达特定的含义 原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！ 例如：h1文字效果大，但是重要的是h1的语义效果---十分重要 优势： 代码结构可读性强 有利于SEO（search engineering optimizing / 搜索引擎优化） 作用：让网站在搜索引擎上的排名靠前 提升SEO: 竞价排名 将网页制作成HTML后缀 标签语义化（合适地方用合适的标签） SEO三大标签 title： 网页标题标签 description：网页描述标签（meta--name=“description”） keywords：关键词标签（meta--name=“keywords”） 方便设备解析 标题标签 h1~h6 h1最好只写一个，h2~h6可以适当多写 h1~h6之间不能相互嵌套 段落标签 p标签别包裹其他块元素，当成只能包裹文字的块元素即可 换行标签 横线标签 文本格式化标签加粗： / （十分重要的内容） 倾斜： / （着重阅读的内容） 删除线： / 下划线： / 图像标签img 其中src必写，title为悬停文字、alt为图裂显示文字 超链接标签 a，（anchor）href ：指定地址，或者ID target ：指定页面打开方式，_self为默认本窗口，_blank为新窗口打开 可以嵌套文本或图像，可以不用设置宽高！ 代码中的多个空格只会被解析成一个空格！ a元素可以包含除去自身以外的任何元素！ 块级元素与行内元素块级元素：独占一行（排版标签全为块级元素） html、body h1~h6、hr、p、pre、div ul、ol、li、dl、dt、dd table、tbody、thead、tfoot、tr、caption form、option 行内元素：不独占一行 文本标签：br、em、strong、sup、sup、del、ins、span 与 行内块元素： 图片元素：img 单元格：td、th 表单控件：input、textarea、select、button 框架标签：iframe 使用原则： 块级元素中可以写行内元素和块级元素 行内元素中只能写行内元素 p标签中不要写块级元素 HTML特殊字符 特殊字符描述字符代码空格符； 复制代码 列表标签无序列表： li { list-style:none; } 复制代码有序列表： 自定义列表： 其中dl标签里面只允许包含dt/dd标签 dt/dd标签里面可以嵌套任意内容(标签) dt/dd是兄弟关系 复制代码例如： 如何高效的学习？ 做好笔记 笔记是我们以后复习的一个抓手 笔记可以是电子版，也可以是纸质版 多加练习 只有敲出来的代码，才是自己的 别怕出错 错很正常，改正后并记住，就是经验 复制代码 表单标签组成：表单域、表单控件、提示信息 form常用属性： 属性属性值作 用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。methodget/post用于设置表单数据的提交方式，其取值为get或post。name名称用于指定表单的名称，以区分同一个页面中的多个表单域。表单控件： input : button / checkbox / radio （name相同绑定）/ image / file / password / reset / submit / text (type)其余属性：name、value（input元素值）、checked（首次加载是否被选中）、disabled属性（设置表单控件不可用）、maxlength（最大字符数） select：与option共用、selected=“selected”默认选中 textarea：clos、rows tips：以上要标明name属性 具体示例如下： 男 女 复制代码label标签： label标签可与表单控件相关联，关联后点击文字，控件会获取焦点 法一：让label标签的for属性等于表单控件的id 法二：把表单控件套在label里面详细示例如下： 男 女 文本框: 复制代码 音频标签（HTML5） 常用属性： src:音频路径 controls:显示播放控件 autoplay:自动播放 loop:循环播放 复制代码 视频标签（HTML5) 常见属性: src:视频的路径 controls:显示播放控件 autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放 loop:循环播放 width:设置宽度 height:设置高度 复制代码 使用最多标签小结 标题标签 标题标签 标题标签 标题标签 段落标签 倾斜 加粗 超级链接 超级链接 列表项1 列表项2 列表项3 .... 自定义列表主题 自定义列表每一项 自定义列表每一项 自定义列表每一项 .... ... ... ... ... 普通按钮 独占一行 一行显示多个,装不下会自动折行 复制代码 CSS element语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键，就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 如果有兄弟关系的标签，用 + 就可以了 比如 div+p 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了 如果生成的div 类名是有顺序的，可以用 自增符号 $ 如果想要在生成的标签内部写内容可以用 { } 表示 CSS引入方式内嵌式（内联样式） 作用于当前页面,后续小项目可以使用外链式（外链样式） 作用于多个页面,后续大项目使用，需要使用link标签引入外部的css文件 复制代码行内式（行内样式） 作用于当前标签,不建议使用。后续配合js CSS属性书写顺序 布局定位属性 display float、position clear visibility、overflow 盒子模型 + 背景 width、height margin、padding、border background 文本内容属性 color、font text-decoration text-align line-height white-space 其他属性（点缀） cursor border-radius text-shadow box-shadowtips: 开发中多推荐--类 + 后代，类选择器个数推荐不超过三个 CSS三大特性层叠性：相同样式会覆盖 继承性：text- 、 font- 、line- 、 color属性 （不影响布局的，大概率能够继承） vertical-align不能继承 font:12px/1.5 Microsoft YaHei； //给body设置，会让后续文本自动调整行高 复制代码优先级： 选择器选择器权重继承或者*0,0,0,0元素选择器0,0,0,1类选择器，伪类选择器0,0,1,0ID选择器0,1,0,0行内样式style=""1,0,0,0limportant重要的无穷大如果都是继承，则会直接继承父级标签或者最近的祖先标签。 tips：!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 复合选择器后代选择器：元素1 元素2 { } 子代选择器：元素1>元素2{ } 并集选择器：元素1，元素2{ } ------并集选择器优先级是单独计算的 交集选择器：元素1元素2{ } 伪类选择器： 元素：link / visited / hover / active ---LVHA---无访问、访问、悬浮、长按选定 元素：focus ---获取焦点的表单元素结构伪类选择器： 1.所有兄弟元素中的第一个： :first-child 2.所有兄弟元素中的最后一个： :last-child 3.所有兄弟元素第n个： :nth-child(n) 倒数: nth-last-child(n) 4.所有同类型兄弟元素的第一个： :first-of-type 5.所有同类型兄弟元素的最后一个： :last-of-type 6.所有同类型兄弟元素的第n个： :nth-of-type(n) 倒数 ：nth-last-of-type(n) tips: n从0开始计算，因此2n（even）偶数、2n+1（odd）奇数、-n+3前三个、n+5从第五个开始到最后一个为止。 否定伪类 :not（选择器）满足除括号内元素 UI伪类 :checked / :enable 属性选择器 元素[属性名^="值"]-------以...开头 元素[属性名$="值"]-------以...结尾 元素[属性名*=“值”]-------包含指定元素 伪元素选择器 伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素 ::first-letter选中第一个字 ::first-line选中第一行 ::selection鼠标选中内容 ::before元素最开始位置创建一个子元素 ::after元素最后位置创建一个子元素 CSS字体 字体系列：font-family 字体大小：font-size 字体粗细：font-weight（400--normal 700--bold）100~1000数字越大字越粗 字体样式：font-style（normal、italic）复合写法： font：font-style font-weight font-size/line-height font-family （不可更换顺序，且字体连写必须保留size和family 这2个属性） 谷歌浏览器最小字体为12px解决方案： 在浏览器设置--自定义字体--最小字体改为0 CSS文本属性文本颜色：color（重点） 颜色拓展 /*关键词:*/ background-color: pink; /*rgb:*/ background-color:rgb(255, 255, 255); /*rgba:*/ background-color: rgba(0, 0, 0, .5); /*十六进制*/ background-color: #ff6700; 复制代码对齐文本：text-align 在HTML中，行内块元素、行内元素，会被当成文本处理，即可以使用text-align使其居中（给父元素设置） text-align:left|center|right;装饰文本：text-decoration none（无装饰线，常用）、underline（下划线）、overline（上划线）、line-through（删除线） 文本缩进：text-indent （em为当前文字倍数） 行间距：line-height 字母间距： letter-spacing 单词间距： word-spacing （通过空格识别词） 元素的显示模式 块级元素 h1~h5 、p、div、ul、ol、li独占一行 默认宽度撑满父元素，默认高度由内容撑开。 可设置宽高 行内元素 a、strong、b、em、i、del、s、ins、u、span一行可以显示多个 宽、高默认由内容撑开 无法设置宽、高，以及margin、padding的垂直方向 a里面可以放块级元素 行内块元素img、input、td、button 可以设置宽高、一行显示多个、本身内容宽度 行内块幽灵空白问题：行内块元素与文本的基线对齐，文本的基线与最底端有一定的距离 产生原因：主要是把回车解析成了空格 将上一个元素的闭合标签与下一个元素的开始标签写在同一行，或者注释掉中间的回车换行 onetwothree onetwothree 复制代码 vertical-align不为baseline 改图片为块元素：display：block 给元素加浮动，变成浮动元素 给父元素设置font-size：0; 子元素字体大小单独设置 元素显示模式转换 display:block display:inline display:inline-block 复制代码 CSS背景背景色：background-color：transparent（默认，无色透明） 背景图片：background-image：none | url（url）---无引号 背景图片大小：background-size: width height 数字 百分比 contain：1 : 1会让图片与盒子一致；非比例关系会留白 cover：1 : 1会让图片与盒子一致；非比例关系仍会拉满，图片变形 实际开发中，图片比例一般为1:1结构背景平铺：background-repeat：repeat（全平铺）| no-repeat | repeat-x | repeat-y 背景颜色位置：background-position：x y； top、center、bottom、left、right 指定一个，后一个默认对齐。背景附着：background-attachment：scroll | fixed（固定） 复合写法：没有固定顺序，但大小必须写到位置后面 background: color image repeat position/size; /*建议前四个连写，size独写*/ 复制代码背景颜色半透明：background：rgba（0,0,0,0.3）盒子背景半透明 CSS盒子模型 盒子组成 margin--border--padding--content 盒子默认大小：border + padding + content 边框border：border-with || border-style || border-color（无固定顺序） border-style值：none、solid（实线）、dashed（虚线）、dotted（点线）border-top、border-bottom、border-left、border-right /*上边框*/ border-top:solid 1px red; /*下边框*/ border-bottom:solid 1px red; /*左边框*/ border-left:solid 1px red; /*右边框*/ border-right:solid 1px red; 复制代码 表格细线边框 border-collapse ：collapse 控制浏览器表格边框方式 使得边框合并 怪异盒模型 box-sizing content-box 默认值 border-box 怪异盒模型，设置的就是盒子的总大小（自动内减） 盒子大小调整 resize属性可以控制是否允许用户调节元素尺寸 none、both、horizontal、vertical opacity不透明度 opacity的值为0~1的小数，0为完全透明（整个元素）opacity 与 rgba 的区别？ opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。 rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。 内边距 可能影响盒子的大小(不能为负数) 1个值为上下左右，2个值为上下、左右，3个值为上、左右、下，4个值为上、右、下、左 /*上 右 下 左*/ padding:10px; /*上下 左右*/ padding:20px 30px; /*上 左右 下*/ padding:20px 30px 40px; /*上 右 下 左*/ padding:20px 30px 40px 50px; /*单方向设置*/ padding-top:30px; padding-bottom:40px; padding-left:50px; padding-right:60px; 复制代码 边框与padding不会撑大盒子特殊情况: 当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%) 此时给左右的边框和左右的内边距不会撑大盒子 外边距 用于盒子的移动（可以为负数） 参考父元素的content计算 水平居中：margin：0 auto； 给行内元素设置上、下margin无效 /*上 右 下 左*/ margin:10px; /*上下 左右*/ margin:20px 30px; /*上 左右 下*/ margin:20px 30px 40px; /*上 右 下 左*/ margin:20px 30px 40px 50px; /*单方向设置*/ margin-top:30px; margin-bottom:40px; margin-left:50px; margin-right:60px; 复制代码margin正常使用： 水平布局的盒子,左右的 margin值互不影响 最终的距离为margin左右的和margin塌陷问题： 互相嵌套的块级元素，第一个元素上margin作用在父元素上，最后一个元素下margin作用在父元素上。 解决办法： 给父元素设置 padding-top或 border-top 给父元素设置 overflow: hidden; 把子元素转换为行内块 display: inline-block; 浮动、绝对定位、相对定位的盒子不会有嵌套块级元素外边距塌陷现象margin合并问题： 垂直布局的块级元素 上下 margin会合并 最终的距离为margin的最大值 解决办法: 只用设置一个外边距即可 布局技巧行内元素、行内块元素可以被父元素当做文本处理 子元素水平居中： 块级元素：margin：0 auto； 行内块、行内元素：text-align: center;子元素垂直居中： 块元素：margin-top: (content - 子元素总高)/2 行内、行内块：height = line-height&&vertical-align:middle （绝对垂直居中：font-size：0） CSS浮动 语法： 选择器 { float:none/left/right; } 复制代码 浮动特性 浮动元素会脱离标准流 浮动的元素比标准流高半个级别,可以覆盖标准流的元素 浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动 浮动的元素会受到上面元素边界的影响 浮动元素会一行内显示并且顶部对齐 浮动元素具有行内块元素的特性 浮动盒子中间没有缝隙 浮动元素经常搭配标准流父级 浮动不会像行内块一样被当做文本处理（vertical-align / text-align无法使用） margin合并和塌陷全部消失注意点： 先用标准流父级元素排列上下位置，之后内部子元素采取浮动排列左右位置 子浮父不浮、兄弟一起浮、一浮全浮 浮动只会影响后面的标准流，不会影响前面的标准流 清除浮动 清除浮动，父级会根据浮动子盒子自动检测高度 如果父级元素本身有高度，则不需要清除浮动（重要） 清除浮动本质是清除浮动元素造成的影响语法： 选择器 { clear：left/right/both； } 复制代码清除浮动方法： 额外标签法： 复制代码父级添加overflow属性:设置属性为hidden、auto、scroll 父级添加after伪元素： .clearfix::after { content:''; display:block; clear:both; /*后两项针对老浏览器*/ height:0; visibility:hidden } 复制代码父级添加双伪元素: .clearfix::after,.clearfix::before { content:''; display:table; } .clearfix::after{ clear:both; } /*双伪元素，其中before的主要作用是解决外边距塌陷问题，本质上after就已经够了*/ 复制代码为什么清除浮动： 父级元素没有高度、子盒子浮动、影响后续布局 CSS定位 定位应用场景为什么需要使用定位? 解决盒子之间的层叠问题,可以层叠到其它盒子上面 页面滚动,盒子固定在页面某个位置不动. 定位组成定位：摆放盒子，按照定位的方式移动盒子 定位 = 定位模式 + 边偏移 定位元素：设置**（绝对定位/固定定位）**后，不管之前是什么元素，一律为定位元素 ---默认宽、高都被内容所撑开，且能自由设置宽高。 定位模式： static(静态定位)、relative、absolute、fixed 边偏移： top、bottom、left、right .blue { /* 定位的使用步骤 */ /* 1 设置定位的方式 绝对定位*/ position: absolute; /* 2 设置偏移值 */ top: 150px; left: 150px; background-color: blue; } 复制代码 相对定位 position：relative 相对于自己的定位 没有脱离标准流 需要配合方位属性来移动位置 绝对定位 position：absolute 包含块： 对于没有脱离文档流的元素，包含块为父元素。 对于脱离文档流的元素，包含块为拥有定位属性的祖先元素。 相对于有定位属性的祖先元素 脱离标准流 不能与浮动同时使用。同时使用则以定位为主 需要配合方位属性来移动位置 子绝父相： 子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小 子绝父绝： 实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可 固定定位position：fixed 相对于窗口位置，且不随滚动条滚动 脱离标准流 需要配合方位属性来移动位置 固定定位小技巧： 固定在版心右侧位置。 小算法： 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置 就可以让固定定位的盒子贴着版心右侧对齐了 黏性定位 sticky会占用原先的位置（relative特点） 必须添加top、bottom、left、right其中一个才有效 以窗口为参照点（fixed特点），离他最近的拥有滚动机制的祖先元素。 定位总结 定位模式是否脱标移动位置是否常用static静态定位否不能使用边偏移很少relative相对定位否(占有位置)相对于自身位置移 动常用absolute绝对定位是(不占有位置)带有定位的父级常用fixed固定定位是(不占有位置)浏览器可视区常用sticky粘性定位否(占有位置)浏览器可视区当前阶段少 定位叠放次序 z-index 专门用于元素设置显示层级 选择器 { z-index:1; } /*数值可以为：正数、负数、0、auto，数字越大盒子越靠上（默认为auto）*/ 复制代码 不同布局方式元素的层级关系： 标准流 bottom），使用margin:auto，可以实现垂直水平居中 该方法本质是脱标，然后使用margin：auto使四边边距自适应，得到垂直水平居中的效果 2D旋转 rotate：设置旋转角度，指定角度值deg或turn，正顺负逆 rotate与transition配合使用才能看到效果 transform: rotate(1turn) /*1turn为一圈*/ 复制代码改变转换原点： transform-origin 语法 transform-origin: 原点水平位置、原点垂直位置； 复制代码取值 方位名词（left、top、right、bottom、center） 像素单位数值，以左上角为零点 百分比特点 默认原点是盒子中心点 修改变换原点对位移没有影响，对旋转和缩放会产生影响 百分比相对于自身 只写一个值时，第二个默认为50% 多重转换使用transform复合属性实现多形态转换 多重转换技巧： transform: translate() rotate(); /*先位移后旋转*/ 复制代码原理： 旋转会改变网页元素的坐标轴向 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换效果（坐标轴改变） 缩放使用scale改变元素的尺寸 语法 transform: scale(x轴缩放倍数,y轴缩放倍数) 复制代码技巧 scale值大于1为放大，小于1为缩小 缩放可以取负值，先缩小再放大若scale只设一个值，则表示x和y轴等比例缩放 缩放只是一种视觉效果，不会影响其他盒子 倾斜使用skew使元素倾斜 语法 transform: skew(角度) /* 正值（整体左斜）斜边在右 负值（整体右斜）斜边在左 也可以： */ transform:skew (x,y) skewX() skewY() 复制代码 空间转换3D(CSS3)写在最前： 空间转换一般不用CSS实现，此处仅供学习了解 使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间定义： 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同 空间转换也叫3D转换与2D位移类似，使用translate实现空间位移效果 语法： transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); 复制代码取值：（正负均可） 像素单位数值 百分比（相对于自己） 透视使用perspective实现透视效果 属性（添加给父级） perspective：值 取值：像素单位，数值在800-1200（推荐取值） 值越小，离我越近 透视不是3D效果 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离 作用 空间转换时，为元素添加近大远小、近实远虚的视觉效果 空间旋转与2D旋转一样，使用rotate实现空间旋转效果 语法 /*Z轴，正值是顺时针旋转*/ transform: rotateZ(值); /*X轴，正值是沿着X轴正方向从外到内旋转*/ transform: rotateX(值); /*Y轴，正值是沿着Y轴正方向从左到右*/ transform: rotateY(值); 复制代码判断：（左手法则） 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向 拓展：（合并写法） transform:rotate3d(x,y,z,角度)：用来自定义旋转轴位置以及角度 transform: rotate3d(1,1,1,30deg) ; /*意思是： x 、 y 、 z 分别旋转30 度。*/ 复制代码 立体呈现 使用transform-style:perserve-3d 使子元素处于真正的3D空间 默认值为flat，表示子元素在2D平面内呈现 空间内，转换元素都有自己独立的坐标轴，互不干扰 空间缩放使用scale实现空间缩放效果 语法 transform: scaleX(倍数); transform: scaleY(倍数); transform: scaleZ(倍数); transform: scale3d(x,y,z); 复制代码 动画（CSS3）多个状态间的变化过程，动画过程可控 使用animation添加动画效果 构成动画最小单元：帧或动画帧定义动画： @keyframes 动画名称 { from { } to { } } /*多步骤写法*/ @keyframes 动画名称 { 0% { } 10% { } 100%{ } } 复制代码使用动画： animation: 动画名称 动画花费时长; /*完整属性*/ animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态; /*animation可以给一个元素添加多个动画效果*/ /*默认为补间动画*/ animation: 动画1， 动画2， 动画N ; 复制代码注：display无法设置过渡 渐变（CSS3） 使用background-image属性实现渐变背景效果 渐变是多个颜色逐渐变化后的视觉效果 一般用于设置盒子的背景 做遮罩层效果线性渐变： background-image: linear-gradient(color1,color2); 复制代码 /*透明---黑色半透明*/ background-image: linear-gradient(transparent,rgba(0,0,0,0.6)); 复制代码 /*改变颜色渐变方向*/ /*方位名词*/ background-image: linear-gradient(to bottom, red, green); /*角度*/ background-image: linear-gradient(60deg, red, green); 复制代码径向渐变： 主要用在网页中，做按钮的渐变色效果 background-image: radial-gradient(半径大小 at 0px 0px , red, green); 复制代码 布局版心： 一个固定宽度并且水平居中的盒子，用来显示网页的主要内容。 版心类名常用：container、w、wrapper .container { width: 1200px; margin: 0 auto; } /*版心属性设置*/ 复制代码重置默认样式 * { margin:0; padding:0; } 复制代码常用布局名词 位置属性名顶部导航条topbar页头header、page-header导航nav、navigator、navbar搜索框search、search-box横幅、广告、宣传图banner主要内容content、main侧边栏aside、sidebar页脚footer、page-footer 元素显示与隐藏问题让一个元素在页面中显示出来 display： 属性值：none/block 特点：直接删除，不占用位置 visibility： 属性值：visible/hidden 特点：隐藏后继续占有位置 overflow： 属性值：hidden/visible/scroll（滚动条）/auto（自动显示滚动条） opacity： 属性值：0（隐藏）、1（显示）、0~1（显示程度） CSS高级技巧 精灵图 目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度（CSS精灵技术/CSS Sprites/雪碧图） 核心原理：把网页中全部的小图整合到一张大图中 使用：div + background-position: x y 一般使用伪元素 + 精灵图，可以省去一个盒子tips：精灵图的移动全为x，y的反方向，故x，y像素值为负值 ico图标设置 /*设置标题左侧的小图片*/ 复制代码 字体图标 iconfont（字体图标） 展示的是图标，本质为字体 CSS三角CSS盒子边框为四个等边矩形 vertical-align: baseline (默认)| middle | top | bottom baseline:使元素的基线与父元素的基线对齐 top：使元素的顶部与其所在行的顶部对齐 middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐 bottom：使元素底部与所在行的底部对齐 图片底部空白间隙问题 1.给图片修改vertical-align属性 2.把图片转换为块级元素 浏览器把行内、行内块当做文字处理了 文本框和表单按钮无法对齐 input和img无法对齐 div中文本框，文本框无法贴顶的问题 溢出文字隐藏显示属性名：overflow--控制溢出部分显示与隐藏 hidden：溢出部分隐藏 visible：（默认值）溢出部分可见 scrol：无论是否溢出，都显示滚动条 auto：根据是否溢出，自动显示或隐藏滚动条单行文本 /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis; 复制代码 多行文本 overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; 复制代码 |
【本文地址】