A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

离殇1

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 离殇1 初级黑马   /  2019-6-6 11:00  /  791 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 离殇1 于 2019-6-6 13:18 编辑

在黑马学习已经有二十几天了,在这二十几天里学到了很多,虽然之前学校里有学过一些但都是些皮毛。对于技术贴我也不知道写点什么,就写一点书写一个静态页面最重要的几个部分吧。在写一个页面的时候最重要的就是布局了,所以当我们写一个静态页面时我们首先要分析,一个页面就是由一个盒子包着,而这些盒子里又有许许多多的小盒子,一个盒子套一个盒子。在一个也面的顶部也就是导航栏我们都是给几个盒子(div)然而div是一个块级元素,我们要想让它们在一行显示就要给浮动(float),当盒子给了浮动就可以实习盒子在一行上显示了。说起浮动,当我们在写一个页面时一般父盒子是不给高(height)的,父盒子的高由子盒子撑开,当我们父盒子没给高,子盒子有有浮动,这个时候在写下面布局很有可能会乱掉,这时候我们就要清除浮动,也可以给父盒子高但我们一般不给父盒子高,而清除浮动有四种方法,第一种就是用clear,我们在工作中用的最多的是clear:both。第二种方法额外标签法也叫隔墙法,它是在最后一个浮动元素添加标签eg:
<div class="main">
<div class="content"></div>
<div class="sidebar"></div>
<——额外标签法——>
<div style="clear:both;"></div>
但这种方法非常麻烦,如果我们页面写了很多浮动,那就要一一去添加,所以也不建议使用。第三种给父盒子使用overflow:hidden;overflow:hidden是溢出隐藏,虽然也可以用但我们也不太推荐使用,而最后一种,也是我们常用的使用伪元素清除浮动。(:after和:before)。
.clearfix::before,
.clearfix::after{
content:" ";
display:table;
}
.clearfix::after{
clear:both;
}
.clearfix{
*zoom:1;
}
当我们哪个盒子用了浮动我们就给它的父盒子清除浮动。
在写一个页面时不仅浮动重要定位也很重要,我们最常用的定位就是绝对定位(position:absolute)和相对定位(position:relative)。绝对定位不占原来的位置,如果嵌套的盒子没给父盒子使用定位,子盒子绝对定位,那么子盒子就会从浏览器出发。如果我们给行内元素使用绝对定位后,那么它就会转为行内块元素,所以我们一般不给行内元素使用绝对定位。而相对定位它是从自身出发的,还占据原来的位置,行内元素使用相对定位不能转为行内块元素。我们在写页面时都是绝对定位和相对定位一起使用,我们给父盒子相对定位,给子盒子绝对定位,让其配合使用。定位中还有一个固定定位(position:fixed)使用固定定位之后,不占据原来的盒子,而这个盒子从浏览器出发,写了固定定位后盒子就不会随页面的下拉而走,只会固定在那。固定定位会将其盒子转化为行内块元素。
书写一个页面最重要的就是这两点,这两点是最重要的。是用好这两点那么一个页面书写下来基本没太大的问题。有的人就会纳闷一个页面就只要会这两个,当然不是,这两个只是比较重要,如果这两个不使用好,那页面就会非常乱,也不是说别的代码不会使页面布局乱掉,其实写一个页面就是盒子套盒子,给盒子宽高,内外边距,说起内外边距,这也是一个重点,许多人会不清楚到底是要用外边距(margin)还是内边距(padding),其实很简单,外边距(margin)我们一般是盒子与盒子之间有距离才使用的,而内边距(padding)是内容到盒子间的距离,而我们一般给了内边距就会把盒子撑大,你给了左边一个10px那么盒子的宽就在原来的基础上加了个10px,所以一般我们的盒子宽高手设定好的,你给了它内边距(padding)那么你给了多少padding就要在原来盒子的基础上减多少,这样才不会影响页面的布局。所以当我们拿到一个页面时不是直接上手去写,而是去分析,一块一块的分析,这里是一个大盒子包这几个小盒子,这里我们应该用浮动来实现,那是我们又应该用定位来实现,我们要一块一块的去分析,分析好了在去写,这样你的页面写出来肯定又好看,花的时间又少。
最后我想说写好一个网页不紧要多学,把知识点都了解透了,还要多敲,只有真正的去实践了你才能很好的去运用所学的知识,不管学前端还是后端或是大数据,ul我们都必须去实践,去写。只有去做案例了你才能了解明白代码的意思,以及自己放的错。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马