CSS
文章平均质量分 52
_Nana_
这个作者很懒,什么都没留下…
展开
-
fixed元素遮挡下面元素的问题
网页实际开发中会遇到fixed置顶元素,有时需要由后端决定是否显示。所以在布局上注意fixed元素遮挡问题。具体解决办法如下:html<div id="fixed_wrap"> &am原创 2018-10-15 14:00:50 · 14339 阅读 · 0 评论 -
前端面试题 —— CSS实现一侧定宽的两栏自适应布局
页面布局是前端面试中CSS部分经常考到的问题,本文列举几种简单页面布局的方法:绝对定位 + marginfloatinline-blockflex附加:响应式布局其中几种方法在CSS代码上有相似之处,也有局限或是需要特殊注意的地方,下文具体指出。首先,我们需要实现的布局效果如下:上下结构,Footer设置为fixed位于页面底部;导航与主体内容为左右结构。0、准备工作开始...原创 2018-10-09 19:35:06 · 875 阅读 · 0 评论 -
媒体查询尺寸参考
/* 媒体查询*/@media screen and (min-width: 320px) {}@media screen and (min-width: 360px) {}@media screen and (min-width: 375px) {}@media screen and (min-width: 414px) {}@media screen and (min-wid...原创 2018-10-19 11:31:50 · 1477 阅读 · 0 评论 -
ellipsis 一行/两行省略
<!DOCTYPE html><html><head> <style type="text/css"> /* 一行 */ .test { text-ov原创 2018-10-22 16:14:51 · 1062 阅读 · 0 评论 -
列表标题一/两行垂直居中展示
在开发中会遇到很多list组件,例如左边一个img,右边是内容介绍。内容介绍的最上部往往是内容的标题,标题在进行省略ellipsis设置时,需要考虑产品需求:比如我在项目中,设计希望两行充满高度,一行则垂直居中。解决办法是flex实现,具体如下:html<div class=&原创 2018-10-26 19:28:13 · 1011 阅读 · 0 评论 -
各种元素尺寸
在学习jquery的offset().top/left过程中发现这张图。还在理解中。。。原创 2018-10-30 14:43:15 · 419 阅读 · 0 评论 -
无处安放的居中(未解决)
面试时总问到几种方式实现居中,当时觉得很奇怪,为什么需要了解那么多方式实现一个效果,等到真正做需求才发现,根据不同的场景可能有不同的限制,只掌握一种方式是不能实现各种情况下的居中需求。需求:让后端返回的富文本中div的img居中两种方式(都存在问题):一、div设置为text-align: center; width: 100%,img自然居中。问题:如果div中还有文字等内容,也会变成...原创 2018-12-20 15:46:10 · 237 阅读 · 0 评论 -
针对火狐的CSS样式设置
在工作中发现,有些效果在chrome浏览器中能实现的效果,在火狐下没有,比如截几行,在chrome下通过下述代码实现:display: -webkit-box;overflow: hidden;/*text-overflow: ellipsis;*/-webkit-line-clamp: 2;-webkit-box-orient: vertical;网上的一种方法已经失效:@-mo...原创 2019-03-13 18:03:34 · 5704 阅读 · 0 评论