![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 64
曾皙
加油
展开
-
css替换元素
替换元素内容可以被替换的元素img iframe video select input button textarea 元素特性有自己的尺寸替换元素的基线是元素的下边框,和一个inline block 元素中要是没有内容,那么其基线也是下边框的特性相同,应该就是为了防止替换元素有内容和没内容,如果基线不固定,那么后续的line box就可以会出现出现渲染的不支持::before 和 ::after 伪元素对应display的值注意:img标签在没有src属性的时候在表现的就是一个内联元素原创 2021-01-19 22:43:30 · 751 阅读 · 1 评论 -
垂直水平居中的方法
<div class="container"> <div class="box box_11">1</div> </div> <div class="container container_1"> <div class="box box_1">2</div> </div>...原创 2021-01-09 15:59:13 · 141 阅读 · 0 评论 -
移动端配置
物理像素iphone 6 的宽度有750给物理像素逻辑像素也叫设备的独立像素,css像素也是逻辑像素的一种逻辑像素比(dpr)物理像素➗逻辑像素,iphone6 的dpr=2常见问题图片模糊 1px问题1.图片模糊一个图片大小200px * 200px(逻辑像素) 在dpr为1的屏幕下显示正常,在dpr为2的情况下那么在200px * 200px(逻辑像素)下物......原创 2019-11-19 18:18:59 · 888 阅读 · 0 评论 -
css弹性动画
通过css让生硬的动画变得更加自然效果图:我们知道没一个物体运动都有一个运动轨迹,例如上面的小球是模拟的弹簧运动从而让动画更加自然,而上图的运动轨迹图如下: (easeOutElastic)我们就可以根据这个动画曲线得到他每个时间点的位置就形成了动画常用的运动曲线https://easings.net/好像是要安全上网才可以访问我们随便点击一个(easeOutElastic)进去注意:参数x表示运行的进度我们会得到这样的一个公式,我们就可以通过这个公.原创 2020-07-10 11:50:43 · 1744 阅读 · 0 评论 -
line-height理解
行高的单位百分比:突出了行高和字体大小的基佬关系当字体行高的单位为百分比的时候,行高以字体大小为依据em:em这个单位当当作用在行高的时候是以当前文字大小为依据,当作用在字体大小的时候是以当前元素的父元素的字体大小为依据行高的组成部分行距+实际高度(不同字体和字体大小组成的高度)实际高度组成部分:由4根线组成:上线 主线(median) 基线(baseline) 下线行距行距就是当行高的大小设置高于了字体大小可以形成的高度的时候其余高度就会自动向两边平分,也就是为什么原创 2020-07-06 17:08:33 · 851 阅读 · 0 评论 -
css小测--两栏布局
目标效果这个题得分我是6分中国题是针对表格布局,flex布局,inline-block布局,absolute布局来完成,大家突然问题来了为什么没float,嗯,这个看个人习惯和场景应用,我是不这么喜欢用float布局的HTML <div class="quiz"> <h6 class="quiz-h">201912</h6> ...原创 2019-12-29 13:55:00 · 228 阅读 · 2 评论 -
table-call布局
学习了旭哥的文章总结等分 <style> .container { display: table; height: 300px; width: 100%; border: 1px solid red; } .child { display: table-cell; border...原创 2019-12-23 11:16:43 · 529 阅读 · 0 评论 -
前端小测---css基础测试10
得分总共8分得了6分有一个背景样式没处理好重点无js 使用details和summary组合 动画处理,使用max-height:0来过渡HTML <div class="container"> <details class="details-box layout"> <!-- 解决outline交互体验 -->...原创 2019-08-20 17:21:51 · 160 阅读 · 0 评论 -
css面试题----DOM基础测试34
这个其实是上上个星期张鑫旭直播的内容,我吧我不会的内容总结一下,从而来分享给大家题目第一问document.querySelectorAll('a');第二问// 1.有bug当有这个href属性但没属性值document.querySelectorAll('[href]')// 2.接口的links只读属性Document返回文档中所有<area>元素...原创 2019-07-25 15:20:54 · 185 阅读 · 0 评论 -
css面试题----css测试9
每个星期6都会去去看张鑫旭直播写一些小demo然后再去吧写每天学习到的东西,心得记下来,并且会长期去完成这个任务IT这个东西真的是要去强迫自己学学习一些好的东西,多去优化代码,而不是去停滞不前,鸡汤喝的差不多了先上题目图吧好了题目就算这样了,说真的我基础真的还是不行,很写这样的demo还是太少了,一下就会发现自己有很多不足这个题目好像是11分我写了2天得了9分还在第二问偷偷看人别人...原创 2019-07-24 18:15:23 · 158 阅读 · 0 评论 -
img标签中的src在绝对引用的时候的问题
昨天晚上我一个朋友目前在培训,他在群里问了下img标签如何绝对路径引用,我当时就笑了这个就是培训机构的老师,就大概看了一下就告诉我朋友那里错了,但是却出来不,我就想自己写一个demo,给他发过去,没想到我因为真的很久没用过绝地路径导致真的就写了快一个小时(我真的尴尬了)大致是几个问题1.如何书写2.HBuilder编辑器为什么在书写正确的情况下报错出不来图片3.在书写正确的情况用V...原创 2019-04-26 10:19:29 · 1216 阅读 · 0 评论 -
css面试题布局
不试试怎么知道自己行不行?昨天加了张鑫旭的微信,我草贼开心,发现他星期六会直播,一下就是我看直播学到的一些总结那么是什么呢?其实就是一个简单的左右排版,在张老师的讲了4种不是很好用的方法好,开始了厉害的来了这里实现的效果是看到这个效果图,有人要说了mmb就这个我早就会了绝对定位一下就好了,固定一下高度,宽度就好了,flex就好了,float一下就好了,其实怎么说看要求吧,我目前是...翻译 2019-01-19 10:02:12 · 573 阅读 · 0 评论 -
css的优先级
在看了邵老师的课程后的小小总结css的继承与层叠1.继承看百度上有个inherited from 中的属性就是继承来的一般属性值有文字描述类;line系列;text系列;font;color等简单来说就是父亲有是属性那我就不用设置,最常见的是给body或html设置font-size来控制rem的字体大小等等2.层叠性当我们同时都选中了同一个标签元素的时候比如p标签,我...原创 2018-12-18 15:18:54 · 517 阅读 · 0 评论 -
html和css的hack的学习
在整理基础的时候总结:html和css的hack的学习hack是什么?就是针对不同的浏览器写不同的css样式让各浏览器能达到一致的渲染效果,hack分为HTML和CSSHTML hack<!--[if lte IE 8]> 内容<![endif]-->lte小于等于gte大于等于lt小于gt大于注意:1.空格;2.这样的写法里面不可以...原创 2018-12-20 15:40:46 · 278 阅读 · 0 评论 -
淘宝的H5布局
利用viewport和rem布局实现的淘宝布局下面先看看em布局的原理em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDNem作为字体单位,相对于父元素字体大小;line-height继承父元素计算值 数字无单位行高,继承原始值,Rem布局原理rem布局的本质是什么?这是我问过很多人的一个问题,但得到的回答都差强人意...转载 2018-12-06 14:15:49 · 2317 阅读 · 0 评论 -
利用margin来实现两端对起
为什么会对齐一般我们给li标签设置margin-left最后一个总是会有一个不需要的left那为什么如何去除呢?答案是:margin:负值如果ul右边多了20px,那么给ul设置个margin-right:-20px这样写ul的宽带部会变但是当给他加的DIV并设置为inline-block,加个border的时候就会发现那个20px的距离被忽视了,这里说一句就是margin改变内部...翻译 2018-10-11 16:06:03 · 191 阅读 · 0 评论 -
关于paddin-bottom的中的未定义的问题
css世界的学习后:padding的兼容问题一般遇不到,滚轮什么时候出现:Chrome浏览器的滚轮是在子元素超过content box的时候显示;IE Firefox是在超过padding box的时候显示;所以IE Firefox他们的底部是没有空白的,所以不要用padding-bottom来滚轮的底部留白,用margin-bottom来取代谷歌浏览器火狐浏览器...翻译 2018-10-11 17:41:22 · 166 阅读 · 0 评论 -
格式化宽高的理解
格式化宽度仅出现在"绝对定位模型"中,也就是出现在position属性值为absolute和fixed的元素中,在默认情况下绝对定位元素的宽度表现是"包裹性","宽度由内部尺寸决定",但是有一中情况下我由外部尺寸决定对于非替换元素,当left/right;top/bottom对立方位的属性值同时存在的时候,元素的宽度表现为"格式化宽度",其宽度大小相对具有定位特性的祖先元素计算div{po...原创 2018-10-11 21:44:11 · 718 阅读 · 0 评论 -
流动性的深入学习
何为"流"流=文档流;当我们在一个容器中倒入足量的水时,水一定会均匀平铺整个容器所以流动性也就是100%自适应,但width=100%!=流动性自适应100%;原因 :width=100%在正常(box-sizing=content box)的时候100%是对应content的宽带100%;而流动性自适应100%是对于content+padding+border的宽度100%,...原创 2018-10-12 01:22:53 · 218 阅读 · 0 评论 -
如何用border来画三角形
学习总结HTML<div class="son"></div>CSS .son{ width: 0px; border: 20px solid; border-color: black transparent transparent; ...翻译 2018-10-12 09:54:11 · 714 阅读 · 0 评论 -
window和document的区别
[window对象] 它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口 document 当前显示的文档(该属性本身也是一个对象)翻译 2018-10-12 19:32:32 · 810 阅读 · 0 评论 -
:link-:visited-:hover-:active的使用
对大佬的学习后的理解(主要是复杂的visited):link未点击前的样式:visited点击后的样式:hover鼠标经过:active鼠标点击这个过程是爱到恨的过程love-hate这里需要注意:hover必须在link和visited的后面,需要严格的顺序才可以看到,active也必须在hover之后一.link未点击前的样子一般大家把a{color:value...翻译 2018-10-12 20:23:24 · 954 阅读 · 0 评论 -
css动画小结
一.转换 transform:IE9+ 1.旋转rotate() transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Sa...翻译 2018-10-18 09:38:18 · 170 阅读 · 0 评论 -
圆形进度条是学习
学习网站:http://www.cnblogs.com/jr1993/p/4677921.htmlCSS: *{ margin: 0px; padding: 0px; } .box{ margin: 50px...翻译 2018-10-18 14:24:25 · 92 阅读 · 0 评论 -
div中动态文字内容的处理(内容在文字少的时候文字居中,在文字多的时候局左)
如何实现板块中的内容在文字少的时候文字居中,在文字多的时候局左HTML:<div class="box2"> <p class="content">当文字少的时候</p> </div><div class="box2"> <p clas翻译 2018-10-09 19:56:38 · 750 阅读 · 0 评论 -
css流体布局下发宽度分离原则与box-sizing的使用
学习完了CSS世界的总结因为默认的box-sizing:为content-box宽度作用在内容 所以当出现 .box{width: 100px; border:1px solid red; }或.box{width: 100px ; padding:20px}border/padding会影响宽度的属性共存的时候.box的宽带就不是我们所设置的那...翻译 2018-10-09 21:29:46 · 239 阅读 · 0 评论 -
css任意高度收缩动画技术
学习css世界后:利用max-height和overflow:hidden来实现HTML<div class="box"> <input id="check" type="checkbox"> <p>个人觉得,display:table-cell最强的应用是可以任意个数列表的等宽效果。</p&翻译 2018-10-10 15:13:02 · 6750 阅读 · 0 评论 -
学校CSS世界第三章总结
1.块级元素块级元素并不等于display:black; li的默认display:list-item;table的display默认是table; 他们都符合块级元素的基本特征,也就是一个水平流上只可以单独显示一个元素,多个块级元素则换行显示 因此理论上可以配合clear属性来清除浮动带来的影响: ...翻译 2018-10-11 16:07:20 · 162 阅读 · 0 评论 -
汉堡按钮的制作以及其中的问题
第一种自己写的,下面的第二种是网上的用一个span使用做出来的HTML<div class="box"><!--chang用来判断是否变换--> <span class="s1"></span> <span class="s2"></span原创 2018-10-17 09:55:22 · 1085 阅读 · 0 评论 -
flex弹性布局的学习
布局的传统解决方案是基于盒状模型,依赖display+position+float方式来实现,灵活性较差。2009年,W3C提出了一种新的方案-Flex,Flex是Flexible Box的缩写,意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局。下面我们就从基础语法开始,一起来感受下Flex的魅力吧!注意,设为 Flex 布局以后,子元素的float、clear和...原创 2019-01-01 10:42:11 · 369 阅读 · 0 评论 -
关于viewport视口的学习
简单来说<meta name="viewport" content="width=device-width,initial-scale=1.0">content属性值 : width:可视区域的宽度,值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别,取值1....转载 2018-12-06 13:28:22 · 659 阅读 · 0 评论 -
padding属性详细分析
<p>1.padding会增加元素的尺寸</p> <p>2.padding对内联元素的影响,对内联元素的垂直方向的影响是有的但视觉是没有</p> <a href="javasvript:">链接</a><span>我在a链接旁边(这里说明了这里padding在视觉上对水平方向是一翻译 2018-10-11 10:32:05 · 5128 阅读 · 0 评论