css
关注
分享
扫一扫
文章平均质量分 62
swpu_lwf
前端爱好者
展开
-
CSS3弹性盒子flex
CSS3flex弹性盒子转载 2017-02-14 11:46:04 · 265 阅读 · 0 评论 -
等间距布局
html： <ul class="clearfix"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> &原创 2018-06-28 11:46:43 · 555 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局与双飞翼布局 圣杯和双飞翼布局都是左右两边固定中间自适应，都是负margin的应用。圣杯布局 html: <div class="header"></div> <div class="content"> <div class="middle"></div>原创 2018-06-28 11:24:31 · 443 阅读 · 0 评论 -
display:none 与 visibility:hidden opacity:0的区别
我们知道，我们可以用display:none 与 visibility:hidden opacity:0 等方法隐藏元素，那么他们有什么区别呢？（1）是否占据空间display:none 不再占据空间，会引起重排和重绘visibility:hidden 占据空间，仅引起重绘opacity:0 占据控件，引起重绘（2）是否可以被继承display:none 不会被子元素继承...原创 2018-06-15 14:00:26 · 835 阅读 · 0 评论 -
伪类与伪元素的区别
W3C定义伪类：用于向某些选择器添加特殊的效果。伪元素：将特殊的效果添加到某些选择器上。明确两点： 1 都与选择器相关 2 特殊效果，这两者描述了其他css无法描述的东西 种类伪类： :active、:focus、:hover、:link、:visited、:first-child（将特殊的样式添加到元素的第一个子元素）、:lang（允许创作者来定义指定的元素中使用...原创 2018-06-14 10:23:15 · 612 阅读 · 0 评论 -
CSS布局——左边固定，右边自适应的4种方法
HTML： <div class="outer"> <div class="left">我在左边</div> <div class="right">我在右边</div> </div> <div原创 2018-04-06 12:00:21 · 7999 阅读 · 0 评论 -
CSS 代码组织和管理规范BEM，OOCSS，SMACSS，ACSS
本文主要讨论的是大型项目中 CSS 代码的组织方式。首先介绍的是前端项目开发方法学 BEM。BEMBEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。这三个不同的组成部分称为 BEM 实体。块块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和转载 2017-09-11 09:10:45 · 3025 阅读 · 0 评论 -
去除inline-block元素间间距的几种方法
常见的inline-block元素：img input1、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距 如：<input /> <input type="submit" /><input /><input type="submit" />效果图如下： 当我们使用CSS更改非inline-block水平元素为inline-block水平呈现时，原创 2017-09-07 09:32:29 · 513 阅读 · 0 评论 -
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！W3C的规范： Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the转载 2017-09-06 08:55:39 · 402 阅读 · 0 评论 -
CSS3自定义滚动条的样式
webkit浏览器是如何自定义滚动条的呢？ 滚动条demo(只在谷歌浏览器中有效)： demo1：演示一 demo2:演示二滚动条的组成：::-webkit-scrollbar：滚动条整体部分::-webkit-scrollbar-thumb ：滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track：滚动条原创 2017-05-10 13:55:13 · 1484 阅读 · 0 评论 -
遮罩层的实现及应用
遮罩层的实现： 1、实现思路： 利用div实现遮罩层效果：利用一个全屏、半透明的div遮住页面上其它元素<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>遮罩层</title> <style> html,body { margin:0; h原创 2017-05-08 21:01:38 · 11468 阅读 · 0 评论 -
html文字超过部分显示为省略号
为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。(1).文字超出一行，省略超出部分，显示’…’ 如果这种情况比较多，可以取一个切合作用的类名用于复用。.line-limit-length {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; //文本不换行，这样超原创 2017-04-08 13:44:12 · 139750 阅读 · 3 评论 -
css特性
css特性继承性具有继承性属性的3大类： 1文本相关属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing 2 列表相关属性：list-style-image、list-style-position、list-style-type、list-style原创 2017-01-01 17:33:00 · 606 阅读 · 0 评论 -
CSS单位
css单位：绝对单位：cm mm in pt pc，在前端开发过程中不会用到 相对单位：px % em rem 1 px：如果不考虑分辨率，可以把px当做绝对单位来对待2 %：支持百分比单位的属性，大致可分为3类：1 width height font-size的百分比是相对于父元素的“相同属性”的值来设置的；2 line-height是相对于父元素的font-size的值来设置的；3 v原创 2017-01-01 17:41:02 · 471 阅读 · 1 评论 -
页面加载时，下方内容在上方图片位置闪现
如图，页面结构如下：开始的css如下： .section-home-carousel { width: 100%; height: 100%; img{ width: 100%; height: 100%; } }结果页面刷新时，下方白色区域要在图片位置闪现更改后的css：将img的父元素高度设...原创 2019-07-02 16:51:29 · 767 阅读 · 0 评论