H5学习总结
前言
在进行WebView优化项目的情况下,学习了JS、CSS、Html等基本语法。
为了熟悉和应用(html/js/css),阅读了鱼泡泡首页h5源代码,知道了写一个基本的h5界面需要些什么知识。
盒子模型
定义
Margin: 外边距
Border: 边框
Padding: 内边距
Content: 内容
Example:
- 我们定义两个DIV,分别是 i am body1, i am body2;
<body>
<header>
i am header
</header>
<div class="box1">
i am body1
</div>
<div class="box2">
i am body2
</div>
<footer>
i am footer
</footer>
</body>
运行显示:
这里body1,body2 还没有添加任何样式,显示都是纯文本。
- 然后我们添加两个样式 .box1, .box2:
<style type="text/css">
.box1 {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
border: 1px solid blue;
width: 100px;
height: 100px;
}
.box2 {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 10px solid red;
width: 100px;
height: 100px;
}
</style>
TIPS: CSS引入样式有三种方式 (内部样式,外部样式,内联样式),以上的是内部样式。
运行显示:
从上面我们可以看到 body2 与 body1 间距为10px, body2的内间距都为10px。
这样也就是盒子模型主要作用能够定义元素间的基本排版(通过padding,margin设置)。
块级元素和内联元素
块元素尝试获取整个宽度,并在布局中开始新行。一些HTML元素是块元素或块级元素。
内联元素与其他内联元素保持在同一行中,并且不会开始新行。
Example:
<body>
<h1> i am h1 </h1>
<p> i am p </p>
<div> i am div</div>
<a> i am tag a, </a>
<a> i am tag b, </a>
</body>
运行一下:
“h1”,”p”,”div”标签都是块元素,所以他们都会默认占用一行。
“a” 是内联元素,所以他们不会换行显示。
那如果我们想要改变原来块元素,或者内联元素的显示方式,我们应该如何处理呢?
这其实css样式有一个属性:
display ,它能够设置元素显示方式 [inline,block,inline-block]。
TIPS:
Ques: inline,block,inline-block 的区别?
Ans:
inline 你无法设置他的宽度和高度,但会在布局中开始新一行显示
block 你可以设置他的宽度和高度,但不会在布局中开始新一行显示
inline-block 既可以设置宽度高度,但不会在布局中开始新一行显示
定位方式
我们有时候会看到网页上的元素在滚动的时候,固定位置不变,有的会随着滚动而滚动等。这些就是和元素的定位方式有关系。
定位方法的类型:
static (静态)、relative (相对)、absolute (绝对)、fixed(固定)
Examples:
参考该文章,因为比较详细的例子。就不做demo了。
https://blog.csdn.net/chen_zw/article/details/8741365
选择器
当我们需要为一个元素应用css样式时候,我们需要指定所应用的css样式。这时候我们常见有三种方式: 类选择器、id选择器、属性选择器、
Example:
.box1 {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
border: 1px solid blue;
width: 100px;
height: 100px;
}
#box2 {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 10px solid red;
width: 100px;
height: 100px;
}
<body>
<header>
<!-- i am header -->
</header>
<div class="box1">
i am body1
</div>
<div id="box2">
i am body2
</div>
<footer>
<!-- i am footer -->
</footer>
</body>
从代码中可以看到,class = “box1” 指定的是类选择器box1, id = “box2” 指定的是id选择器 box2, 它们在css样式中分别用 # 和 .两个符号表示。
TIPS: 选择器有许多用法,具体可以参考 css选择器
总结
掌握以上的几个小技能基本上可以撸一个简单的h5静态页面,多动手多实践。
参考
文档记录
该表格记录相关修改 (H5学习总结)
Date | Note |
2018.09.30 | 初次建立H5学习总结 |