zhongjunhaoz的博客

//一行超出隐藏.name-wrapper { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; // 溢出不换行,兼容IE，IE不能两行超出隐藏，只能一行}//多行超出隐藏overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

&ul{ margin-bottom: 20px; & > li { margin-bottom: 0; } } --------------------- 编译成CSS为： ul { margin-bottom: 20px; } ul > li { margin-bottom: 0; }变量$color = red声明变量$color,并赋值为red。//怎么用。一般这种变量在项目中出现的次数较多.

1. * //匹配任何元素2. div //标签选择器3. .info //class选择器4. #footer //id选择器5. div:first-child //匹配父元素的第一个子元素6. div:link //匹配所有未被点击的链接7. div:hover //匹配鼠标悬停的元素8. div:active //匹配鼠标已经按下，还未释放的div元素9. div:visited //匹配所有已被点击的链接10. E ~ F //匹配任何在E元素之后的同级F元素

主要作用在元素内容前后加上指定内容。比如在元素前后加小icon。用法1<p>你好</p>p:before{ content: 'Hello'; color: red;}p:after{ content: 'Tom'; color: red;}用法2：写三角形<div class="demo">这是一个测试</div>.demo:after{ content: ''; width: 0;

# 需求- 当鼠标移动到一个元素A身上时，另外一个元素B显示。# 实现原理1. A元素与B元素有一个相同的父级。(表示A与B写在同一个父元素下面，是同级的)2. B元素默认隐藏，A元素默认显示。3. 当鼠标移到A元素身上时，看做是移动到父元素身上。（父元素获得hover状态）4. 再选中B元素，让其显示。# 具体代码HTML代码：<div class="father"> <div class="A"> 显示 <div>

前言在学习的过程中,发现CSS有很多可以描述单位的尺寸。比如px,em,rem,vw等等。平时也没有深究，一来是没时间，二来是在我学习清单中优先级过低。一直想彻底弄明白，一直耽搁到现在。现在花上一点时间来整理一下，彻底弄懂它。CSS长度单位绝对长度单位。绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。in,英寸cm, 里面mm, 毫米ptpc相对长度单位。其长度单位会随着它的参考值的变化而变化。px,像素em,元素的字体高度%,百分比rem,根元素的font

定义响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。优点面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况响应式与自适应区别响应式：只需要