css指定几行超出显示省略号
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本上面三个属性是必须要加上的。-webkit-line-clamp:指定几行display: -webkit-box; -we
CSS3伪元素的同级\子级\相邻级选择
例如：:checked 后需要同级的元素/相邻的元素发生改变时<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&q
html、CSS遇到的问题
当我们使用li 里面a 添加after伪元素的时候，想要消除最后一个伪元素的内容时，可以这样做：ul li:last-child::after { content:none; //或者 display:none; }父元素给了高度，就不会有清除浮动的问题图片默认和文字的基线对齐，用vertical-align: middle;可以图片和文字居中对齐
CSS元素的显示与隐藏
元素的显示与隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。当前阶段主要说三个常用的显示与隐藏：display 显示与隐藏visibility 显示隐藏overflow 溢出显示隐藏1.display属性display属性用于设置一个元素应如何显示display: none; 隐藏元素display:block; 除了转换为
CSS定位
定位：绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。语法：选择器{ position:absolute; }绝对定位的特点：（务必记住）1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置。3.绝对定位不再占有原先的位置（脱标）脱标：脱离标准流。定位总结：定位模
CSS精灵图
为什么需要精灵图一个网页中往往会因为很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵图的使
浮动及清除浮动
什么是浮动？float属性用于创建浮动框，将其移动到一边，直到左边缘或右边触及包含块或另一个浮动框的边缘。语法：选择器{ float:属性值;}属性值描述 none元素不浮动（默认值） left元素向左浮动 right元素向右浮动 浮动特性（重难点）加了浮动之后的元素，会具有很多特性，需要我们掌握的浮动元素会脱离标准流（脱标）1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗
CSS圆角边框，盒子阴影，文字阴影
圆角边框：用于设置外边框border-radius：数值；例如border-radius：10px；参数可以数值或者百分比数值越大边框弧度越大（越圆）原理：（椭）圆与边框的交集形成圆角效果其他写法：border-radius：10px 15px 20px 25px；表示的是左上，右上，右下。左下，顺时针排序；单独设置一个角写发：border-top-left-radius:10px;表示的是左上的
盒子模型
CSS盒子模型；盒子是由边框，内边距，外边距，内容四部分组成；1.边框：border；边框宽度、边框样式、边框颜色写法：border-widhth：1px；border-style:solid; border-color:blue;综合写法：border:1px solid blue;单个写法：border-top：1px solid red；border-bottom： 1px solid bl
CSS三大特性
1.层叠性：比如：一个元素设置了两个相同的样式；div{ backgroung-color:red; } div{ background-color:blue; } <div></div>上面一个div我给了两个不同的命令,我该执行那个呢？答案是第二个离div标签近的那个blue颜色，要知道怎么回事，且听我下面慢慢道来：概念：所谓层叠性是指多种CSS样式的叠加；是浏览器处