css
关注
分享
扫一扫
yangxiaoyanger
这个作者很懒，什么都没留下…
展开
-
叠层顺序（stacking level）和堆栈上下文（stacking context）
转载自层叠顺序和堆栈上下文知多少z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结构如下：<div class="container"> <div class="inline-block">#divA display:i...转载 2018-03-30 10:13:04 · 1059 阅读 · 0 评论 -
自适应屏幕设置
参考@media自适应屏幕1024*500 （8.9寸）1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）1280*800（16：10 |15.4寸）1280*1024(比例：5：4 | 14.1寸、15.0寸)1280*854(比例：15：10 | 15.2）1366*768 (比例：16：9 | 不常见）1440*900 （16：10 17寸 仅苹果用...转载 2018-06-07 13:16:21 · 1160 阅读 · 0 评论 -
css定位——清除浮动
参考清除浮动6种方法额外标签法使用:after 伪元素给父元素定高利用overflow:hidden;属性父元素浮动父元素处于绝对定位在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题引出问题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...转载 2018-03-29 16:15:43 · 833 阅读 · 0 评论 -
三栏布局的5种解决方案及优缺点
转自 三栏布局的5种解决方案及优缺点假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。 这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位，那这题你连及格都及格不了。下面是5种三栏布局的方法。 在写布局代码之...转载 2018-04-03 14:42:09 · 163 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：效果如图：适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动...转载 2018-04-10 19:48:42 · 164 阅读 · 0 评论 -
如何居中一个元素
转自：如何居中一个元素题目点评这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。（一）元素水平居中的方式1）行级元素水平居中对齐（父元素设置 text-align:center） [htm...转载 2018-03-27 15:36:02 · 212 阅读 · 0 评论 -
css样式的优先级是怎么样的？
转自：css样式的优先级是怎么样的？题目点评CSS样式的优先级规则给人的感觉总是摸不透，更不用说怎么去表达了，在网络上流传着很多版本，描述的都很复杂也不全面，看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧！解答思路样式优先级规则 1.优先级顺序为：!important>style>权重值 2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现权重...转载 2018-03-27 14:03:10 · 276 阅读 · 0 评论 -
:before和::before是什么区别
转自:before和::before区别题目点评这个问题看来很简单，但如果之前没有琢磨这个问题，给人感觉也是门头一垂，听到这个题目就懵逼了，因为原来从来没有注意过这个问题，即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点，以及他们的作用，及注意事项上去回答。解答要点 相同点都可以用来表示伪类对象，用来设置对象前的内容:befor和::before写法是等效的 不同点:befo...转载 2018-03-27 14:01:05 · 26346 阅读 · 3 评论 -
盒模型理解
参考： 盒模型理解前端的盒模型包括两种，分别是W3C盒模型和IE盒模型。W3C盒模型包括content、padding、border、margin。其中width = contentIE盒模型包括content、padding、border、margin。其中width=content+padding+border后来W3C在CSS3中新增了box-sizing的样式，属性包含content-bo...转载 2018-03-27 13:53:44 · 470 阅读 · 0 评论 -
伪元素::after和::before
::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的:CSS代码div::after { content: "你好";}HTML代码<div> <!-- div里的其它内容 --> 你好</div&...转载 2018-04-09 21:12:05 · 164 阅读 · 0 评论 -
css题目
转自css题目1. 下面这个图形，只使用一个标签，可以有多少种实现方式：假设我们的单标签是一个 div:<div></div>定义如下通用CSS：div{ position:relative; width:200px; height:60px; background:#ddd;}法一：border这个应该是最最最容易想到的了div{ ...转载 2018-03-30 10:12:05 · 183 阅读 · 0 评论 -
单行居中显示文字，多行居左显示，最多两行超过用省略号结尾
转自单行居中显示文字，多行居左显示，最多两行超过用省略号结尾这题就厉害了我的哥。题目就是如上要求，使用纯 CSS，完成单行文本居中显示文字，多行居左显示，最多两行超过用省略号结尾，效果如下：不愿看长篇大论的可以先看看效果：-webkit- 内核下 Demo 戳我接下来就一步一步来实现这个效果。首先是单行居中，多行居左居中需要用到 text-align:center，居左是默认值也就是text-al...转载 2018-04-03 10:09:39 · 850 阅读 · 0 评论 -
css BFC与IFC相关
参考https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html原来，通过w3c的官方规范可知，闭合浮动的块盒在margin-top上所产生的间距（clearance）的值与该块盒的margin-top之和应该足够让该块盒垂直的跨越浮动元素的margin-bottom，使闭合浮动的块盒的border-top恰好与浮...转载 2018-09-12 13:48:22 · 234 阅读 · 0 评论