css 背景图片透明度_web前端入门到实战:css重点知识和bug解决方法

1.图片向下撑大3像素问题

在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法:

1.1给图片添加display:block;

1.2给图片添加float:left;

1.3 给图片添加vertical-align:middle;

1.4 给他的父元素加font-size:0;

2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中?

给父元素添加宽高,添加行高 添加 text-align:center
给图片添加 :vertical-align:center

3.元素的类型分类哪几种?各自都有什么特点?

块元素 独占一行,竖着排,能设置宽高
行内元素 默认情况下文本一行显示,不能设置宽高
行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点
可变元素 添加float:left 相当于display:block

4.如何实现一个元素消失和出现?

display:none display:block
opcity:0; opcity:1;

5.单行文本溢出显示省略号怎么实现?
添加width;

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

6.定位的属性值有哪几个?分别有什么特点?
position:absolute 绝对定位, 脱离文档流
在有父元素或者父元素没有设置定位的情况下,它的参照物是整个浏览器
如果父元素设置了相对定位,那么它的参照物就是它的父元素
position:relative 相对定位, 不脱离文档流
它的参照物是它原来的位置
position:fixed 固定定位, 脱离文档流
position:sticky 粘性定位 脱离文档流
它的参照物是整个浏览器

7.样式引入的方式有哪几种
外部引入

内部引入

行内样式引入

8.transition过渡动画使用的过程中要注意一些什么?
1.必须跟hover一起使用
2.在hover的时候添加过渡,鼠标滑上去有过渡效果,移开就没有,给他本身加的时候,鼠标滑上去有过渡效果,移开也有

9.用边框写出一个箭头超右的三角形

div{    border-top:10px solid transparent    border-right:10px solid transparent    border-bottom:10px solid transparent    border-left:10px solid red    width:0;    height:0; }

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

10.可以取负值的css属性有哪些?
text-indent
z-index
margin-top
margin-left
background-position
left right bottom top
text-shadow
box-shadow等等

11.一个未知宽高的盒子在另一个盒子里面 水平垂直居中 的3种方法:(不用做计算)

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)(1).box{    width:500px;    height:500px;    position:relative;}.box1{    width:200px;    height:200px;    position:absolute;    left:0;    right:0;    bottom:0;    left:0;    margin:auto;}(2).box{    width:500px;    height:500px;    display:flex;                 //弹性盒    justify-content:center;  //水平居中    align-items:center;       //垂直居中}.box1{    width:200px;    height:200px;}(3).box{    width: 500px;    height: 500px;    background: red;    position: relative;}.box1{    width: 200px;    height: 200px;    background: green;    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);}

12.当子元素使用margin-top,导致父元素整个下移的解决方案:
overflow:hidden
把margin改成padding
border-top:1px solid rgba(0,0,0,0)
给父元素或者子元素浮动

13.子元素都设置float,父元素没有设置高度,出现高度塌陷的问题,解决方案:
1.给父元素设置height 遇到自适应用不了,
2.添加overflow:hidden/auto
3.给浮动的元素下面添加一个空盒子,给空盒子添加 clear:both;
4.万能清除法

.clear:after{  content:"";  clear:both;  display:block;  height:0;  overflow:hidden;  visibility:hidden;}.clear{  zoom:1;}

5. 给父元素也添加float
6. 给父元素添加display:table

14.透明度的属性是什么?请也写上它的兼容写法?
opcity:0.3;
filter:alpha(opcity=30)

15.什么是BFC?BFC的触发条件有哪些?
bfc直译为块级格式化上下文,是一个独立的渲染区域。具有BFC特性的元素可以看作是一个隔离了的独立容器,容器里面的内容不会影响到外面的元素
使用了float:left/right position为absolute/fixed display为inline-block,table-cell,table-caption,flex,inline-flex,overflow为hidden,auto等等 都是BFC

16.如何解决margin上下值发生重叠的问题?
给任何一个子元素添加一个父元素,并让这个父元素成为bfc区域里面的元素,所以就需要给父元素添加overflow:hidden/auto/scroll;display:inline-block/flex;等。

17.怪异盒是怎么产生的?它有什么特点?如何由W3C标准盒模型变成怪异盒模型?
产生原因:DOCTYPE的缺失在IE8以下会触发怪异盒模式
特点:padding值不会计算在元素原有的宽高之上
border值不会计算在元素原有宽高之上
变成怪异盒模型:添加属性box-sizing:border-box;
box-sizing:content-box;默认值

18.哪些属性可以被继承?
1、字体系列属性

font-family:字体样式
font-weight:字体的粗细
font-size:字体的大小
font-style:字体的类型

2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
letter-spacing:单词之间的间距
text-transform:控制文本小:uppercase、lowercase、capitalize
color:文本颜色
列表
list-style

19.图片整合是用什么技术实现的?图片整合技术有哪些优势?

css Sprites
用background-position 来进行背景图片定位技术

20.移动端布局的方式有哪些?
流式布局 等比缩放布局或混合布局 等比缩放布局可以用rem vw来实现

21.transition和animation之间有什么共同点和不同点?
相同点:都是随着时间改变元素的属性值
不同点:

1.transition需要跟hover一起使用
2.animation不需要触发任何事件

22.em和rem是什么?移动端为什么要用rem这个单位?
em是相对于最近的父元素的字号大小,1em=16px
rem 是 root em是相对于根元素字号的大小, 1rem=16px

23.响应式网页设计有哪些特点?
1、网站必须建立灵活的网格基础;
2、引用到网站的图片必须是可伸缩的
3、不同的显示风格,需要在Media Query上设置不同的样式
4、meta标签

58e3eceda842c138459c9aed65017ae8.png


作者:大前端世界
链接:https://www.jianshu.com/p/34b299bf6494

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488691.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

像个字段相减绝对值_遇见你丨像个英雄一样活着 瘫痪作家用手指敲击文字著百万字文学作品...

患有先天性肌迟缓症,出生后便全身瘫痪,这样一个原本生活里充满艰难的人,他的名字却出现在了中国作家协会的2020年新会员名单中,他叫高淳。 今年36岁的高淳,家住江苏常熟,从2002年开始文学创作,凭…

一幅图读懂量子力学(数学的判决)

来源:悦智网 未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能,互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括:建立AI智能系统智商评测体系,开展世界人工智能智商评测;开展互联网&#x…

python中扑克牌类设计_Python中的计数 Counter类

点击上方"AI机器学习与深度学习算法",选择"星标"公众号原创干货,第一时间送达在很多场景中经常会用到统计计数的需求,比如在实现 kNN 算法时统计 k 个标签值的个数,进而找出标签个数最多的标签值作为最终 kNN…

计算机多文件管理,电脑文件管理几条小技巧

电脑文件管理几条小技巧在电脑的内部,在电脑的桌面上,在“资源管理器”中,充斥着无序与混乱,这种虚拟的混乱极大地影响了电脑的性能和我们办公的效率,下面小编为大家带来了电脑文件管理几条小技巧,希望对大家有用。电脑…

python读取excel画散点图对应多个y_Python Scatter Plot,每个X都有多个Y值

How can I plot different numbers of Y values for each X value 只需分别绘制每个组: for xe, ye in zip(x, y): plt.scatter([xe] * len(ye), ye) and how can I change the X axis from being the numbers 1 and 2 to text categories “cat1” and “cat2”. 手…

追加10亿!腾讯宣布设立15亿元“战疫基金”

来源:腾讯刚刚,腾讯宣布设立15亿元“抗击新型冠状病毒感染肺炎疫情综合保障基金”(以下简称战疫基金)。这是腾讯在设立首期3亿元疫情防控基金、2亿元战疫开发者公益联盟资金池后,再次升级追加10亿元基金,为…

equals null报错吗_轻轻松松教你搞定Java中的==和equals

前言相信很多读者关于和equals懂了又懵,懵了又懂,如此循环,事实上可能是因为看到的博客文章之类的太多了,长篇大论,加上一段时间的洗礼之后就迷路了。本篇文章再一次理清楚。当然如果觉得本文太啰嗦的话,当…

java八股 spring + mybatis

Spring常用注解(绝对经典)_spring注解-CSDN博客 框架篇-02-Spring-单例bean是线程安全的吗_哔哩哔哩_bilibili 1.spring.bean 单例 线程不安全 2.AOP 项目里可以说记录用户登录日志,利用request去获取姓名、ip、、请求方式、url&#xff0…

服务器数据库2008怎么备份数据库文件,怎么备份SQL Server2008数据库

在使用SQL Server 2008服务器的时候,我们需要定时的备份数据库来防止数据的丢失,下面学习啦小编为大家介绍备份SQL Server 2008数据库的方法。备份SQL Server 2008数据库的方法在开始菜单中点击“SQL Server Management Studio”在弹出的界面点击连接&am…

蝙蝠为啥这么厉害?地球人整明白了没有?

来源:周末八点半公元一世纪的时候,希腊的普鲁塔克提出了一个问题:如果忒修斯船上的零件被逐渐替换,直到所有的零件都不是原来的零件,那么这艘船还是原来的那艘船吗?这就是人类历史上的忒修斯悖论&#xff0…

vant input框禁止调用手机键盘_春运不要变“泰囧”手机这些功能让回家的路更安全...

随着春节的临近,年味儿可以说是越来越浓了,比如刚刚开始的支付宝集五福活动激发了大家的参与热情,而每年都会上热搜的春运更是成为了我国人民过年最真实的写照。就拿小编来说,作为一个张家口的北漂人,前几天京张高铁的…

math python 向上取整_Python成为专业人士笔记-各数学运算操作深度剖析

“专业人士笔记”系列目录:创帆云:Python成为专业人士笔记--强烈建议收藏!每日持续更新!​zhuanlan.zhihu.comPython可以执行常见的数学运算符,包括整数和浮点除法、乘法、取幂、加法和减法,而数学math模块…

css3 shapes是什么意思,如何在Web中使用CSS Shapes

布局一般都是遵循按行和列等线性原则,Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好,更灵活,但相对于印刷媒体而言,Web布局总体上还是受到很好的限制,特别是内容流上。杂志…

wps临时文件不自动删除_电脑:让 Windows 10 系统自动清理临时文件

不少朋友在系统用久了以后,都会用一些软件来帮忙清理系统中没用的文件,其中包括一些临时文件、无用文件等。但其实在 Windows 10 中,系统已经内置了自动定期清理临时文件的功能了。你还不知道?跟着我们来学习下吧。这个功能就隐藏…

服务器系统gho系统怎么安装系统,GHOST怎么重装系统?GHO文件安装系统教程

ghost映像文件就是系统文件,通过gho文件我们可以就进行系统的重装。不过对于电脑小白来说,不知道在哪里可以下载纯净的ghost文件,下载完成后也不清楚如何使用gho文件安装系统。那么下面就让小编教大家使用gho文件重装系统。相关教程&#xff…

Science | 谷岩/王朗团队揭示大脑中的免疫细胞竟是记忆遗忘的“主谋”

来源:BioArt记忆是大脑最重要的功能之一,也是人类研究最多的脑功能之一。记忆随时在发生,而遗忘如影随形。海马体位于大脑丘脑和内侧颞叶之间,是负责记忆的编码和存储的一个重要脑区。在这里,记忆信息被编码于一些神经…

基于深层卷积网络的手写数字识别 minist_「Tensorflow」基于CNN的数字OCR识别

导读 对于人类来说,识别手写的数字是一件非常容易的事情。我们甚至不用思考,就可以看出下面的数字分别是1,2,3。那机器如何来识别数字?本期将使用Tensorflow搭建卷积神经网络,进行手写数字的识别。代码可关…

2019年5G创新深度研究报告

来源:中信建投从历史上看,每一轮科技产业创新周期均主要由通信代际升级驱动,历时 5-8 年。我们认为 2017-2019 年为 4G 时代的稳定成熟期,而进入 2020 年,运营商加速投入 5G 网络建设,科技软硬件有望在运营…

鹰眼系统原理_山东首家露天焚烧鹰眼监控系统在我镇投入使用

露天冒烟着火,不用人员到现场,电子围栏就会锁定目标,自动报警,提醒监管人员立即现场处置。日前,莱西市院上镇新安装建设的污染源鹰眼监控系统投入使用,实现了环境监控全方位、自动化。据了解,这…

机器人的工作原理,这是我见过最详细的解析!

来源:网络很多人一听到“机器人”这三个字脑中就会浮现“外形酷炫”、“功能强大”、“高端”等这些词,认为机器人就和科幻电影里的“终结者”一样高端炫酷。其实不然,在本文中,我们将探讨机器人学的基本概念,并了解机…