千锋武汉Web前端培训一阶段为期一个月的学习到此告一段落了,主要的学习内容可以归纳为HTML和CSS。从网页构成的角度可以称为页面的结构和表现,其中页面主要学习了PC端和移动端。
在千锋武汉Web前端培训班多次练习PC端页面和移动端页面时,发现和感悟了一些实用也让我印象深刻的知识点:
弹性盒的学习使用:弹性盒学习前,在给页面做布局时操心的就是各种块、图片、文字的对齐。无论水平居中或垂直居中,抑或是各个不同元素的对齐,都习惯性用margin或padding,量完尺寸后进行“表面”上的对齐。这种对齐很多时候在自己电脑上看着没问题,但是放到不同分辨率的电脑上查看时可能就不再是对齐的了。
弹性盒非常好用的几点:一是不需要精确计算上下左右的边距,给父元素转化成弹性盒后,利用Justify-content属性可以对单个子元素实现水平居中,也可以给单行或多行的多个子元素实现平均分布,简单方便。而利用align-items则可以让单个或者单行子元素垂直居中,转块后的图片或字体图标在无法使用行高和vertical-align属性时,弹性盒的方法非常好用。第二点就是在分栏布局上了,之前水平方向都是利用浮动和BFC办法实现的分栏布局,而垂直方向(主要在移动端)则是利用定位和margin-bottom来实现。
弹性盒的好用主要让我感受在移动端的垂直方向分栏布局,在让主体内容部分做到高度自适应时,不用在乎下边距需要空出多少,只需要将其父元素转换为弹性盒并给上flex-deraction:column;再把需要自适应的主体元素加上flex:1;overflow:auto;即可实现。主要的是在使用过程中侧方的滚动条不会落入固定的头部尾部,体验感极好。
关于属性的继承:部分标签对文本属性的继承存在一些特殊的情况,例如a标签对文字颜色完全不会继承;h标签不会继承父元素的字体大小、字体粗细和字体倾斜,但可以继承父元素的字体颜色;p标签在未对其设置文本属性时可以继承父元素的文本属性,但给p标签设置后,无论在父元素上加多少权重,p标签内的文本属性依旧以p标签设置的为准。
以上就是在千锋武汉Web前端培训班这一个月来,对我印象深刻的知识点了。这一个月我收获了很多,也有很多不足。在之后的学习过程中,我会加努力学习,多抽出时间复习学过的知识点,把知识点理解透彻,融会贯通,争取不辜负自己的付出!加油,我是棒的!
相关文章
了解千锋动态
关注千锋教育服务号
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱