前端新手学习CSS+JS笔记（二）

CSS学习笔记

关于float浮动

最近期末忙着期末的大作业和一些课程设计，在前端知识的学习上投入的精力少了些，整理一些css和js的简单的学习笔记以供巩固。
首先css三种传统的布局方式有：
1.标准流：标签按照规定的默认方式排列，例如块级元素，一行放一个，div,hr,p,(h1~h6)ul,dl等。行级元素则从左到右，碰到父元素边缘就自动换行，a,i,em,span等。
2.浮动
官方解释为：float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘及包含块或另一个浮动框的边缘。
3.定位
为什么要浮动？浮动的作用又是什么？
在网页布局的时候我们往往需要将一些“盒子”块级元素排成一排，随便打开一个电商网站，或是几乎每一个网站都有某一块的布局需要“盒子”块级元素的一行排列。
值得注意的是：
多个块级元素纵向排列我们要标准流
多个块级元素横向排列我们要浮动

.t1,.t2 {
   			width: 50px;
   			height: 50px;
   			background-color: orange;
   		}
   		.t2 {
   			background-color: #30CFD0;
   		}
   		.t3 {
   			position: absolute;
   			left: 200px;
   			top: 200px;
   			border: #000000 1px solid;
   			width: 200px;
   			height: 200px;
   		}

在一个大盒子里装上两个小盒子，未添加浮动，此时一行占有一个小盒子，标准流排列。
当想要布局呈以下所示时

我们可以使用浮动来实现，有很多种方法实现，为了直观显示。把两个小盒子变成行内块，然后单独给t2进行浮动向右浮动，他就会跑到最右边。

display: inline-block;
float: right;

当然我们也可以先把t1，t2都进行浮动float：left。此时两个盒子在同一行上，靠左成行排列。再将t2单独float：right此时进行了样式重叠覆盖了之前的left，所以t2单独靠右。方法还有很多，例如相对定位等等进行布局。这里主要说浮动。

js笔记

如何去除输入框的前后空白？

当用户在输入用户名的时候前后打了很多空白，但是我们并不允许这样，我们可以用js将空白处理掉。用到的函数是trim（）
直接上代码和测试结果

<script type="text/javascript">
	window.onload =function() {
		document.getElementById("btn").onclick=function(){
			var name = document.getElementById("username").value;
			//去除前后空白
			name =name.trim();
			//测试一下
			alert("====>"+name+"<=====")
		}
	}
</script>

我们只要获取到input的value属性值，调用trim函数即可。

非常简单又实用的小知识点