黑马程序员技术交流社区

标题: 前端基础 [打印本页]

---

作者: 离殇1    时间: 2019-6-6 11:00
标题: 前端基础

在黑马学习已经有二十几天了，在这二十几天里学到了很多，虽然之前学校里有学过一些但都是些皮毛。对于技术贴我也不知道写点什么，就写一点书写一个静态页面最重要的几个部分吧。在写一个页面的时候最重要的就是布局了，所以当我们写一个静态页面时我们首先要分析，一个页面就是由一个盒子包着，而这些盒子里又有许许多多的小盒子，一个盒子套一个盒子。在一个也面的顶部也就是导航栏我们都是给几个盒子（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我们都必须去实践，去写。只有去做案例了你才能了解明白代码的意思，以及自己放的错。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2