盒子模型及页面布局

盒子模型及页面布局

一.页面元素的分类

• 父级元素
• 子元素

1.元素类型z

1.block:
	块元素 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。可以设置宽高；
	设置margin和padding都有效；
    可以自动换行；
    多个块状，默认排列从上到下。

2.inline:元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
display:inline-block;

对于行内元素和块级元素，其特点如下：

1. 行内元素

   • 设置宽高无效；

   • 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

   • 不会自动换行；

2. 块级元素

   • 可以设置宽高；

   • 设置margin和padding都有效；

   • 可以自动换行；

   • 多个块状，默认排列从上到下。

二.盒子模型

1.介绍

为了实现页面布局,将内容标签在页面防止在特定的位置展示的

2.盒子模型构成

盒子的大小=border大小+padding+内部长宽

3.设计盒子

border:宽度 样式 颜色;
	border-color;边框颜色
	border-style; 边框样式：solid实线，dotted点状线，dashed虚线
	border-width:边框宽度
	border-radius:圆角处理
	#只设置一边的边框属性
	border-left-color;
	border-left-style;
	border-left-width:

#边距属性
margin: 200px 300px;				#设置上下外边距为200px,左右外边距为300px
	margin-top：	检索或设置对象顶边的外延边距
	margin-right：	检索或设置对象右边的外延边距
	margin-bottom： 检索或设置对象下边的外延边距
	margin-left：	检索或设置对象左边的外延边距
margin: 200px 300px 400px 500px;	#设置上外边距为200px,右外边距为300px,下外边距为400px,左外边距为500px
# 外边距居中：1. 元素必须是块元素 2. 盒子必须指定了宽度

padding：设置内边距
	padding：		检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
	padding-top：	检索或设置对象顶边的内部边距
	padding-right：	检索或设置对象右边的内部边距
	padding-bottom：	检索或设置对象下边的内部边距
	padding-left：	检索或设置对象左边的内部边距
#注意：
	内部元素中有height或width设置，padding撑开大盒子
#解决办法：
	通过内部元素设定外边距解决
	如果有两个外边距相重叠，只走边距距离大的边距，并不是累加的过程

float：浮动 
position： 页面定位 
	absolute  绝对路径
	fixed： 适配浏览器窗口 

4.案例:页面编写2048页面布局

5.案例:编写页面导航栏

6.网站页面布局

• top:网站标题,网站导航
• banner:专题介绍画面
• main:页面主题内容
• footer:友情链接,网站备案信息

四.JS-javascript

1.介绍

mozilla浏览器公司 动态交互功能 火狐

2.js功能

行为标准
支持浏览器实现和用户的动态交互

3.js常用功能

BOM型	#通过js控制浏览器来帮你做一些效果，比如alert   BOM：浏览器对象模型
DOM型	#通过js控制所有的html标签，实现动态样式效果    DOM：文档对象模型

4.实现场景

1.网页特效
2.服务端开发(Node.js)
3.命令行工具(Node.js)
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)

5.html代码引用js

<script></script>
方式1： script标签内写代码
    <script>
      //alert('hello，my girl')  #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
    </script>

方式2：外部文件引入
	<script src="myscript.js"></script>

方式3：外部网址引入
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

6.js的基础功能介绍

# html文档的输出
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p><a href='#'>这是一个段落。</a></p>");
</script>

# 捕捉单击事件
<button onclick="alert('欢迎!')">点我!</button>

# DOM修改文本属性
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

# DOM修改一个图片大小
<script>
	function changeImage()
	{
		element=document.getElementById('myimage');
		element.width += 10 ;
	}
</script>
<img id="myimage"  src="./1.jpg" width="100" height="180">
<button onclick="changeImage()">+</button>

# JS实现页面跳转
<script>
	function zhuce(){
		alert('准备跳转');
		window.location.href="2048.html";
	}
</script>
<button onclick="zhuce()">注册</button>