![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 53
小牛呗
路漫漫其修远兮 我等兮继续代码兮
展开
-
设置css元素的位置
首先来看一下代码position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);我开始没太在意 以为transform:translate(-50%,-50%); 这样把上面的 top:50%,left:50% 抵消了呢 ! 后来查资料看明白了 不是这样的 首原创 2017-07-04 14:12:55 · 1457 阅读 · 0 评论 -
vertical-align使图片垂直居中的小细节
对于大小未知的图片如何垂直居中是大家经常会遇到的问题. 方法 : 可以设置父元素的行高line-height等于高度height,也就是说行高和高度一样,然后利用vertical-align:middle;达到垂直居中的效果,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</ti原创 2017-10-10 16:10:16 · 413 阅读 · 0 评论 -
css制作 平行四边形和梯形导航条
1.平行四边形 导航条 这个效果看起来不错吧!其实实现起来很简单平行四边形的制作运用了CSS 2D变形中的skew( ) 倾斜属性,因为我们只是在水平方向上倾斜 所以skew( x, y) 中的第二个参数指定为0,否则x,y 方向上都会发生倾斜 ul li{ position:relative; float:left; width:100原创 2017-09-19 10:01:00 · 2273 阅读 · 0 评论 -
图片和文字在一行垂直居中
当图片和文本在一行的时候显示时 效果很奇葩 文字和图片根本对不齐 想让文本对齐在图片垂直居中这时候一般的方法是 图片 和 文本盒子 设置为 行内快(inline-block)图片给高度文本盒子不要给高度给他们都设置 vertical-align:middle;<!doctype html><html> <head> <!--声明当前页面的编码集:charset=gb原创 2017-09-01 14:41:44 · 1809 阅读 · 0 评论 -
float浮动的详解
首先我们来了解一下文档流: 文档流是文档中可显示对象在排列时所占的位置. (元素在页面中所占的位置) 这个了解了以后接下来我们就谈谈浮动:float float:指定元素设置元素的浮动 值: left – 左浮动 right – 右浮动 float特点: 1 脱离文档流 2 浮动后不占位置. 3 后面的普通元素会战绩浮动元素的位置原创 2017-08-30 21:13:42 · 368 阅读 · 0 评论 -
box-shadow
box-shadow:水平偏移量 垂直偏移量 模糊半径 扩展半径 颜色 inset内部阴影; X轴:正值往右,负值往左(必须) Y轴:正值往下,负值往上(必须) 模糊半径:圆心牧户半径,值越大,越模糊; 扩展半径:从阴影的中心点开始扩展; 颜色:阴影部分的颜色(必须); inset:内部阴影,盒子以外的都是内部阴影; 默认就是外部阴影:躲在盒子后面,盒子多大它多大.<div></di原创 2017-08-29 13:15:46 · 237 阅读 · 0 评论 -
选择器的优先级
通配符选择器(*) < 标签选择器 < class类选择器 < ID选择器计算优先级:比个数1 . 选择器相同时,后面的比前面的优先级高. 2 . 首先比ID个数,谁的ID多,谁的优先级就高. 3 . 比class ,谁的clas多,谁的优先级就搞. 4 . 比标签,谁的标签多,谁的优先级就高 5 . ID永远比class高,不管class有多少个.(标签也一样) 内部样式原创 2017-08-29 13:06:43 · 347 阅读 · 0 评论 -
输入框圆角
首先 说一下input 当鼠标点击输入框的时候 也就获取焦点的时候 input外会出现outline 但是这个outline 没有圆角 不想border有border-radius 这样就出现问题啦 input的border有border-radius 圆角 但是当获取焦点时的outline没有圆角 这样的问题怎么解决呢 ? 往下看 既然outline没有圆角 ,我们就不用它原创 2017-09-06 16:36:10 · 2100 阅读 · 0 评论 -
给元素添加背景图片
1 用行内元素-添加背景图片<ul> <li><span class="item1"></span>秋冬拗造型 .</li> <li><span class="item2"></span>屡登女富豪榜首 </li> <li><span class="item3"></span>英王室175年传家宝 </li> <li><span class="item4"></spa原创 2017-08-22 11:00:08 · 1628 阅读 · 0 评论 -
css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
最近在研究css3的flex。遇到的flex:1;这一块,很是很纠结,flex-grow、flex-shrink、flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了。网上大部分解释是flex-grow 是扩展比率flex-shrink 是收缩比率flex-basis 伸缩基准值假设flex盒子父级宽度固定为800px;Flex-grow、Flex-shrink、Flex-转载 2017-08-21 16:47:30 · 312 阅读 · 0 评论 -
了解一下 display:flex;
一 display:flex;Flex 是Flexuble Box的缩写,意为”弹性盒子”用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局..box{ display:flex; }行内元素也可以使用Flex布局..box{ display:inline-flex; }webkit内核的浏览器,必须加上-webkit.box{转载 2017-08-21 15:14:39 · 247 阅读 · 1 评论 -
css 实现Tab切换
不废话直接上代码 <!DOCTYPE HTML><!--声明HTML文件--><html><!--根标签,网页的开始--> <head><!--给浏览器看的信息--> <title>please enter your title</title> <meta charset="utf-8"><!--编码格式为国际编码UTF-8--> <meta转载 2017-08-16 14:14:29 · 509 阅读 · 0 评论 -
添加删除 节点demo
<!DOCTYPE HTML><!--声明HTML文件--><html><!--根标签,网页的开始--> <head><!--给浏览器看的信息--> <title>表格</title> <meta charset="utf-8"><!--编码格式为国际编码UTF-8--> <meta name="description" content=""原创 2017-11-21 17:18:43 · 325 阅读 · 0 评论