初学html5的同学可以看看。 大神别喷我。。。

447519854

这个是我在上学期间被难住很久都不能查出bug的地方。现在明白了给大家分享一下

第一：关于初学者在刚接触Position, absolute, relative, flexbox中会经常出问题的地方
*****Position：
        *** 常用到的Position属性值有两个：
                + 1. relative: 一般给父级元素设置，它会充当参照物给子级元素：absolute。
                                大家经常可以看到图片上有文字或者a标签。如果图片是在CSS里设置的background的话。就可以直接给设置Background这个块级元素加Relative。
                                这个时候背景图就相当于你的参考物。
                                然后用top right bottom left移动就好了。
                                如果要移动的元素过多，都给他们设置上高度宽度就好了。
                                要不然absolute可能会消失不见。
                + 2. absolute ：一般设给需要移动的块级元素，
                        - absolute 的常见问题就是，大家一般都喜欢做框架，然后到最后再去给定位。但是设置给了一个元素，但是这个元素没有设置宽高，一下就会出现脱离文档流（通俗讲就是没了体积大面积层叠在了一起。）
                                +解决办法。给他们设置宽高就不会乱跑了。
        *** Flexbox 弹性盒模型：这个一般用于移动端。主要是以能让界面适用于各个类型的浏览器和不同品牌的手机的。
                                        这块卡了我很久，因为PC端做习惯了，老经常加一个多余的DIV，最后导致Overflow-x，y: auto;失效
                                + 在做移动端的时候，因为上下导航栏都要顶住不能移动。
                                        所以我们需要的就是： 给Body直接设置Display: flex; 让手机界面变成弹性盒模型；
                                                                                                        flex-derecation: colunm; 是盒模型纵向排列;
                                                                                                        justify-content: space-between; 让顶部和底部顶在手机的上下端；
                                                                + 这里的重点就是直接给BODY设置盒模型，让body直接100%的高度，和宽度。
                                                                        这样的话当中部表单list栏有超出屏幕范围的时候，就可以直接+overflow-x: auto;
                                                                        如果像做电脑端的网页加DIV的话。经常会出现加了OVERFLOW-X: AUTO；还是没效果，全部挤在了中心，然后宽度设置失效。


各位大佬不要喷我，我也是刚刚学习了1个月的小白，这是我在做界面时候困扰了4，5个小时才慢慢改出来的经验，所以想分享一下。
你们要喷我菜的话。。。人家也认了。。。。       

               

小甲鱼的铁粉

怕什么，鱼c哪里有喷子？有的话也早被清除了

447519854

小甲鱼的铁粉 发表于 2020-6-22 22:26
怕什么，鱼c哪里有喷子？有的话也早被清除了

谢谢小姐姐。

小甲鱼的铁粉

447519854 发表于 2020-6-22 22:26
谢谢小姐姐。

我是小哥哥

陈尚涵

嗯，还可以啊，学了1个月能学成这样，很不错了啊

陈尚涵

我学了2年了,（哈哈，骗你的，我学了1年半）

447519854

陈尚涵 发表于 2020-7-4 20:59
我学了2年了,（哈哈，骗你的，我学了1年半）

大神求带。

python_live

可以可以,我前段时间刚学完手机布局
一开始也遇到了加 overflow-y:hidden  无效的问题
想了老半天也想不出来哪有问题
最后自己试了好久才解决
我发现自己亲手解决的问题,一般很难再忘掉
感觉还是很有成就感的  
如果我能像你一样,善于记录就好了
我的东西从来都只会在笔记本上  不会分享出来
因为我不太会排版,总是写的不好看,逻辑不清楚
楼主还是棒棒的

python_live

手抽了  写成了 overflow-y:hidden

哈哈哈

现在开始学js了 ,前面的有点忘

447519854

python_live 发表于 2020-7-29 17:05
可以可以,我前段时间刚学完手机布局
一开始也遇到了加 overflow-y:hidden  无效的问题
想了老半天也想不 ...

我也不太会排版，笔记都是按照课程记录下来的，但是实际操作，就要用到好多地方的笔记。然后我就遇到啥说啥了