CSS - 随笔分类 - xxcxxc

CSS选择器

摘要：CSS选择器一、css选择器的分类二、选择器的语法 1，基本选择器语法选择器类型功能描述示例 * 通配选择器选择文档中所有HTML元素 E 元素选择器选择指定类型的HTML元素 <div></div> div{ background-color:red; } #id ID选择器选择阅读全文

posted @ 2021-04-11 20:50 xxcxxc 阅读(151) 评论(0) 推荐(0)

改变水平流向的 direction和竖直流向的writing-mode

摘要：改变水平流向的 direction和竖直流向的writing-mode direction属性相信大家都很少使用，但真正使用起来却是非常实用的，接下来我们往下看： 1.direction属性的兼容性 2.direction属性值 direction: ltr; /*默认值 left - to - r 阅读全文

posted @ 2021-03-16 21:51 xxcxxc 阅读(292) 评论(0) 推荐(0)

webstorm 添加css前缀（兼容）自动添加

摘要：Webstorm自动添加css前缀（兼容) 百度了很多在webstorm中添加css前缀（兼容）自动添加，autoprefixer插件是首选，对于基本的css,还有less都支持，所以就选择了autoprefixer插件作为css前缀自动添加插件。通过百度，发现有很多介绍此插件在webstorm 阅读全文

posted @ 2019-04-16 12:10 xxcxxc 阅读(3603) 评论(1) 推荐(0)

解决input和button错位（不齐）问题

摘要：上面代码会出现这种效果：解决方法：给两个同时加上vertical-align:top；即可，把上面代码的注释去掉即可；最后; 阅读全文

posted @ 2019-02-20 11:03 xxcxxc 阅读(2735) 评论(0) 推荐(1)

悬浮在网页右侧并可依次展开的菜单导航

摘要：效果：源码：阅读全文

posted @ 2019-02-18 14:17 xxcxxc 阅读(989) 评论(0) 推荐(0)

css ie6双倍margin现象

摘要：IE6双倍margin bug 当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。解决方案： 1）使浮动的方向和margin的方向，相反。所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。 2）使用阅读全文

posted @ 2018-11-27 11:15 xxcxxc 阅读(148) 评论(0) 推荐(0)

css margin塌陷问题

摘要：我们先看个例子：效果：我们从代码中可以看到，上面的盒子给了一个margin-bottom:20px;下面的盒子给力一个margin-top：30px;理论上来说，这两个盒子应该有50px的间距，这是为什么呢？原因：这是因为在标准流中，margin在垂直方向出现了塌陷现象，以最大的为准，所以两个阅读全文

posted @ 2018-11-27 11:10 xxcxxc 阅读(183) 评论(0) 推荐(0)

css ie浏览器兼容问题

摘要：第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。 IE6留了一个后门，就是只要给css属性阅读全文

posted @ 2018-11-27 10:55 xxcxxc 阅读(262) 评论(0) 推荐(0)

css 实现文字图片垂直对齐

摘要：给图片使用vertical-align:middle;就可以实现效果：阅读全文

posted @ 2018-11-26 14:25 xxcxxc 阅读(589) 评论(0) 推荐(0)

css 清除浮动三种方法

摘要：我们可以看到这样一个布局： <style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: left; } .right{ width: 100px; height: 200px; background-co 阅读全文

posted @ 2018-11-26 11:37 xxcxxc 阅读(279) 评论(0) 推荐(0)

css图片+文字浮动（文字包围效果）

摘要：css图片+文字浮动（文字包围效果）: 在网页中，我们有时想实现这个效果，但是当我们这样写过后，会出现这样一个效果：这显然不是我们所想要的结果，不过我们只要加一个图片浮动就可以实现这样的效果：这样就会实现上面的那种效果，文字包围效果。如果我们把中文全部换成英文，我们会发现，并不会出现这样的效阅读全文

posted @ 2018-11-18 10:50 xxcxxc 阅读(8585) 评论(0) 推荐(1)

CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

摘要：我们可以发现：两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行，这是什么问题呢？我们先来看一下效果：效果图：我们可以看到这两个行内块元素并不在一行，这个原因其实就是，两个div之间存在换行，会把它看成一个空格，如果两个div之间不换行，或者在容器里添加font-size 阅读全文

posted @ 2018-10-07 10:22 xxcxxc 阅读(1450) 评论(0) 推荐(1)

CSS z-index在ie67中不起作用

摘要：在chrome浏览器中可以看到这样的效果：但是在ie67中看到的是：这是z-index在ie浏览器中的一个兼容性问题：一般来说z-index越大，层级越高，就会越在顶层显示，但是在ie67浏览器中会出现问题， ie浏览器中会以他的顶级父元素作为参考点，不是以父元素作为参考，所以要在父元素中添加阅读全文

posted @ 2018-10-03 20:00 xxcxxc 阅读(156) 评论(0) 推荐(1)

CSS 加号选择器（"+"）

摘要：加号选择器（"+"）：就是指对找到的某类的元素除第一个元素以外的兄弟元素起作用，即第一个元素不起作用，后面的兄弟元素都会起作用效果：给每一个li加一个border-left，采用加号选择器，就没有使第一个li标签产生作用案例：阅读全文

posted @ 2018-10-03 16:21 xxcxxc 阅读(5778) 评论(1) 推荐(0)

CSS的nth-of-type和nth-child的区别

摘要：使用nth-child的效果图：使用nth-of-type：效果从上面可以看到：nth-child是从父元素的第一个子元素算起走，会算其他标签元素，而nth-of-type只会计算父元素下本标签元素阅读全文

posted @ 2018-10-03 12:52 xxcxxc 阅读(187) 评论(0) 推荐(1)

CSS 媒体查询

摘要：使用媒体查询，容器宽度会随着窗口宽度的改变而改变没有缩放的效果缩放后的效果：阅读全文

posted @ 2018-10-03 10:41 xxcxxc 阅读(264) 评论(0) 推荐(0)

随笔分类 - CSS