mirror of
https://github.com/Daotin/Web.git
synced 2024-10-30 04:24:45 +08:00
2.2 KiB
2.2 KiB
20181008 课程笔记
1、浮动和定位的时候,宽高由内容撑开。
2、定位的话,绝对定位和固定定位可以改变盒子的属性,但是相对定位不会。
3、相对定位和绝对定位的区别: 相对定位不脱离文档流,是相当于自身的。 绝对定位是脱离文档流的,相对于最近的具有定位属性的父元素。
4、浮动元素上下左右居中:
- 子元素:浮动添加绝对定位 absolute。
- 在浮动元素外面再嵌套一层div,将这一层div居中。(转化为块元素居中)
- 父元素:display: flex; justify-content: center; align-items: center;
- (最简单粗暴的)设置上下margin值。
- 设置百分比。
5、元素上下居中:
-
行内元素:父元素:line-height
-
行内块元素:
父元素:line-height; font-size:0; 子元素:vertical-align: middle;
-
块元素:
1、有固定宽高:
父元素:position: relative; 子元素:position:absolute; top: 50%; margin-top: -xxpx;
2、无固定宽高:
父元素:position: relative; 子元素:position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%); 或者: 父元素:display: flex; justify-content: center; align-items: center; 或者: 父元素:position: relative; 子元素:position:absolute; top:0; bottom:0; left:0; right:0; margin: auto; 或者: 父元素:dispaly:table; 子元素:display:table-cell; text-align:center; vertical-align:middle; 或者: 转换成行内块元素。 父元素: text-align:center; line-height
6、浏览器兼容问题
- a标签中插入图片,在低版本的IE浏览器中有默认边框。
解决办法:图片的border:0;
- 代码换行会产生间距(图片并排放置的话,图片之间出现间距)
解决办法:1:图片浮动。2:为图片的父元素:font-size:0;
9、transform的变换相当于相对定位,保留原来的位置的。
10、浏览器五大内核
IE:trident
firefox:gecko
chrome/safari:webkit
Opera:presto
谷歌和欧朋共同开发:blink