CSS
文章平均质量分 55
Klingonsss
2017年毕业,准备跳槽,求个前端岗位
展开
-
css3弹性盒子flex实现三栏布局
如题:高度已知,左右栏宽度300px,中间自适应:弹性盒子本身就是并排的,我们设置宽度即可。用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充:<!DOCTYPE html><ht...原创 2018-03-07 20:33:33 · 14326 阅读 · 2 评论 -
CSS小tips--button居中和css多类选择器
button居中:在button外面包一个父容器,设置父容器的text-align: center<div class="buttonContainer"> <button class="toggleBtn">切换样式</button></div>.buttonContainer{ text-align: cent...原创 2018-04-30 16:38:46 · 745 阅读 · 0 评论 -
CSS小tips--calc()和justify-content
今天在codepen看到各位小伙伴的css,有的我根本没见过,在此做个笔记。1. CSS3的calc()函数 calc(),顾名思义,calculate, 计算的意思,用于在css中做样式的四则运算操作。 比如:.container{ height: calc(100%-100px);//注意,冒号后面要加空格。...原创 2018-06-20 22:09:07 · 352 阅读 · 0 评论 -
CSS小tips--@media和pointer-events
1. @media@media可以针对不同的媒体类型定义不同的样式。语法:@media mediatype and|not|only (media feature){ css-Code;}mediatype即媒体类型的值有(过滤掉已经废弃的): 值 描述 all 用于所有设备 print 用于打印机和打印预...原创 2018-06-24 19:06:13 · 140 阅读 · 0 评论 -
CSS小tips -- background原来可以批量设置
今天无意中看到别人的代码批量设置了background,感觉打开了新世界的大门,不仅感慨自己css真的太弱了。以下为例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>bg</title>原创 2018-07-06 22:27:39 · 317 阅读 · 0 评论 -
css小tips -- figcaption标签
今天看到了figcaption标签:<div class="col-md-4"> <figure class="single bg"> <img class="img-fluid" src="https://res.cloudinary.com/kirillkrasin/image/upload/v1529409840/codepen/c.原创 2018-07-11 22:31:12 · 1157 阅读 · 0 评论 -
css -- 水平和垂直居中的一些笔记
这些日子一直恶补css,感觉居中是个很重要的东西,网上说了很多方法,在这里记录一下,而且在实验过程中也发现有的人说的方法根本做不到,所以还是要自己亲自测试,不能只背别人的东西。以下的方法都在 chrome 68.0.3440.106(正式版本)经过测试。以下为代码 ===》》》 水平居中<!DOCTYPE html><html lang="en">...原创 2018-08-28 11:03:05 · 288 阅读 · 0 评论 -
css3 -- box-sizing的一些东西
最近迷上了思维导图,什么都要画一画才满意,如图,对box-sizing画图说明:content-box为w3c标准模型,border-box为IE下的模型。其实我感觉我更喜欢border-box这种.........原创 2018-08-12 21:29:39 · 167 阅读 · 0 评论 -
CSS -- translate,transform,transition和animation
translate,transform,translation和animation这4个东西搞混,所以在这做个笔记,经常看看。原创 2018-07-06 21:27:04 · 319 阅读 · 0 评论 -
css -- js动态改变before和after
before和after也算是css里面最常见的元素了,而我却一直不太了解,再不学一下就真的太不像话了。所以学习一下,记记笔记。1. before && after 伪元素,也可以解释为虚拟元素,就是为当前元素增加装饰效果,它们不会出现在dom树,它们显示的是'content'属性,默认为内联元素。 它们无法在document中被找到,无法设置点击等事件,但是可以捕获事件...原创 2018-07-09 23:38:10 · 20629 阅读 · 0 评论 -
css--模仿谷歌首页
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>google</title> <style media="screen"> .原创 2018-05-03 20:14:41 · 1821 阅读 · 0 评论 -
css学习总结(3)inline-block间隙
如果我们想让两个div排在一行,在使用inline-block的时候,大概会这样写:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>inline-block</title> <styl原创 2018-04-11 23:38:53 · 196 阅读 · 0 评论 -
css学习总结(1)background之background-image
1. 移除背景图片background-image: none;2. 通过url引用图片background-image: url(/images/jt.png);也可以是远程连接:background-image: url(www.xxx.com/images/jt.png);3. linear gradient(线性渐变)线性渐变接收三个参数,第一个参数代表方向,例如:background-...原创 2018-03-26 17:25:37 · 2152 阅读 · 0 评论 -
css学习总结(1)background之background-color
1. background-color : 定义背景颜色 在我们不设置background-color的时候,它的默认颜色是透明(transparent)的。 background-color的设置方式: (1) 颜色单词 比如: background-color: "red" (2) 16进制 比如: background-color:"#ff0000";//...原创 2018-03-26 15:16:44 · 1746 阅读 · 0 评论 -
前端初级面试 -- html/CSS (1)
1. 置换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。 这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有<i...原创 2018-07-28 23:21:20 · 184 阅读 · 0 评论