2、背景图片background
通过background-size:cover/contain或者是具体的百分比去设置图片在容器中所占比例的大小。
三、3D翻转不停闪的问题 |
1)将旋转图片的背面隐藏:backface-visibility:hidden;
2)或者给背面盒子添加一个1px的z轴距离 :translateZ(1px);
四、fixed固定定位 |
1)加了固定定位的盒子要给宽度,固定定位是跟父盒子没有关系的,是以浏览器为准的
2)flexed 设置偏移量的问题
2.1 在浏览器的可视区域只设置一个偏移量是可以的,一般固定在一个地方就设置两个偏移量
2.2如果没在可视区域一个偏移量是不够的
五、行内元素、块元素居中方式 |
5.1、行内元素水平居中:
-
text-align:center;
-
flex+justify-content ;
5.2、块元素水平居中:
-
绝对定位+translate
-
flex+margin
-
margin:0 auto;
-
子盒子浮动的情况下 父盒子必须添加:width:fit-content;和 maigin:0 auto;
5.2、浮动元素水平居中:
-
对于定宽的浮动元素,通过子元素设置relative + 负margin
-
对于不定宽的浮动元素,父子容器都用相对定位
通用方法(不管是定宽还是不定宽):flex布局
5.3、行内元素垂直居中:
-
flex
-
行高等于父盒子的高度
-
利用表布局(table)display:table;(将父盒子转成表格的方式在将里面的内容居中)
利用表布局的vertical-align: middle可以实现子元素的垂直居中。(都写在父盒子里面)
5.3、块元素垂直居中:
- 使用absolute+负margin(已知高度宽度)
通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现了。
- 使用absolute+transform
当垂直居中的元素的高度和宽度未知时,可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
- 使用flex+align-items
通过设置flex布局中的属性align-items,使子元素垂直居中。
- 使用table-cell+vertical-align: middle 添加在父盒子里面
通过将父元素转化为一个表格单元格显示(类似 和 ),再通过设置 vertical-align属性,使表格单元格内容垂直居中。
六、三栏布局 |
知识点:
margin-left:-100%
是对象向左移动一段距离,这段距离等于父亲的内容宽度,浮动到前面元素的最左边。
圣杯布局和双飞翼布局实现的效果一样,但是在解决中间部分被挡住的问题,采取解决的方法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。
————————————————
版权声明:本文为CSDN博主「@Demi」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38128179/article/details/86542447
6.1、双飞翼布局:左右盒子固定 中间盒子自适应
举例:
定高200px,左右宽度为200px,中间自适应
html
- {
padding: 0;
margin: 0;
}
/* 清除浮动*/
.box {
overflow: hidden;
}
.box1 {
text-align: center;
list-style: 600px;
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
height: 200px;
background-color: plum;
margin-right: 200px;
margin-left: 200px;
}
.box3 {
text-align: center;
list-style: 200px;
float: right;
width: 200px;
height: 200px;
background-color: pink;
}
6.2、圣杯布局: 要求中间区域优先渲染,左右区块给定宽,中间区块自适应;浮动和定位都用到
html
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。