CSS/CSS3
放肆青春的博客
www
展开
-
CSS解读之alpha通道与opacity属性的区别
上期在谈到border的用途的时候,在最后列举的两个实例中均用到了一个transparent属性值,从字面意思也知道,这个属性值其实和颜色是并列的,不过它表示的是透明。一般的HTML标签在未指定其背景的时候默认就是透明的。 我们发现在上个实例在谷歌浏览器中用调试工具查看其CSS属性的时候,transparent自动变成了如图1-1所示的rgba(0,0,0,0)。这说明两者基本是等价的...转载 2018-03-22 12:54:05 · 1005 阅读 · 0 评论 -
为什么a:hover不起作用
原创 2018-04-13 17:52:22 · 10490 阅读 · 0 评论 -
不让padding影响元素的宽度
CSS3 新增了 box-sizing 属性。 以前,如果指定 div 的宽度为div { width: 100px; height: 100px; padding: 10px; }12345则包含 padding,div 的实际宽度为 120px。 有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width,从...转载 2018-04-13 13:59:28 · 5564 阅读 · 0 评论 -
css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css
@charset "utf-8";/*! * @名称:base.css * @功能:1、重设浏览器默认样式 * 2、设置通用原子类 *//* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */html { background:white; color:black;}/* 内外边距通常让各个浏览器样式的表现位置不同 */body,di...转载 2018-04-17 17:52:19 · 9662 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-right、mar...转载 2018-04-10 12:52:03 · 303 阅读 · 0 评论 -
改变CSS世界纵横规则的writing-mode属性
一、冉冉升起的writing-modewriting-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing...转载 2017-04-18 08:32:05 · 2596 阅读 · 0 评论 -
偏门却又实用的 CSS 样式
今天跟大家说一些偏门一点的 CSS 样式、技巧。什么是偏门?就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式。::-Webkit-Input-Placeholderinput 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder属性来改。小Tips: ...转载 2017-05-20 08:22:14 · 312 阅读 · 0 评论 -
深入理解CSS过渡transition
前面的话 通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义 过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-fun...转载 2017-05-20 18:25:59 · 447 阅读 · 0 评论 -
深入理解CSS变形transform(3d)
前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility 坐标轴 在了解透视之前,首先要先了解坐标轴。3D变形与2D变形最大的不同就在于...转载 2017-05-20 18:33:41 · 484 阅读 · 0 评论 -
img图片居中和div居中遇到的坑
1.我们设置图片标签img {margin:0 auto;} ,我们就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果你一定想要设置,那么首先要将它的属性转变为块元素,如下面的代码:img {display:block; margin:0 auto;}2.div居中必须有宽和高...原创 2017-11-12 20:25:04 · 1015 阅读 · 0 评论 -
margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto,text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置。一、margin:0 auto;的意思上下边界为0,左右根据宽度自适应!这就是水平居中的意思,使用...转载 2017-11-12 20:28:40 · 2795 阅读 · 0 评论 -
css 浮动 相对定位 绝对定位区别
今天下班在地铁上看了一个样式教学视频,因为最近在学习前端。以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做;不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做。废话不多说,入正题: html是按照文件流(普通流)的方式加载的,...转载 2017-12-19 17:51:37 · 480 阅读 · 0 评论 -
CSS3制作hover下划线动画
1、前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图2、实现小黑科技?1234<!-- html结构 --><div> <ahref="javascript:void(0);"class="demo1">自己实现的hover效果</a></div>?12345678转载 2018-01-12 22:46:35 · 1006 阅读 · 0 评论 -
::before和::after伪元素的用法
::before和::after伪元素的用法 一、介绍css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下特有的content,用于在css...转载 2018-03-17 09:25:20 · 271 阅读 · 0 评论 -
深入理解css中position属性及z-index属性
在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。 第一部分:position: static static定位是HTML元素的默认值,...转载 2018-03-17 14:07:19 · 1945 阅读 · 0 评论 -
开发中遇到的常用的布局样式及问题
常用样式:a标签去掉下划线:text-decoration:none;li去掉点:list-style-type:none;字体粗细:font-weight: bold;字体间距:letter-spacing:1px;单行字体超出用省略号: overflow:hidden; text-overflow:ellipsis; white-space:...原创 2018-12-18 16:47:04 · 344 阅读 · 0 评论