整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
写HTML代码时要经常用到Chrome浏览器的F12功能，比如我们看淘宝：
通过元素定位器定位到一个li标签，然后看开发者选项卡的右侧：
这里就是这个li标签里的所有属性了，我们在做开发时可以直接修改这里的属性值，然后直接在页面中查看效果，比如我现在在这里加一个
margin-bottom: 20px：
回车后即可在页面查看效果：
也可以在盒子上直接调整大小来进行盒子样式的调试：
至此，我们应该记住：width和height只能设置盒子中内容的宽度和高度，盒子的实际高度和宽度应该加上border和padding。
div + css的应用
position：定位属性
作用：让标签显示在我们想要显示的位置
默认值：static 静态，不能动
lesson4.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css盒子模型</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="mydiv">我的css盒子测试模型1</div> </body> </html>
index.css
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
div.mydiv{
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
padding: 10px 20px;
border-top: 10px solid #f00;
border-left: 10px solid #0f0;
border-right: 10px solid #00f;
border-bottom: 10px solid #bbb;
display: inline-block;
margin: 10px;
position: relative;
top: 100px;
left: 100px;
}
注意，上面css代码中，我们增加了position：relative属性，接着我们增加了top和left属性，这时候页面显示为：
盒子的上面和左面都增加了100像素的距离，而如果我们不添加positon: relative属性直接增加top和left这时候这两个属性是不起作用的。
这里的相对是指相对于盒子的左上角顶点。
应用relative时只能应用left和top属性，也就是相对于左侧和上方的距离。
让盒子固定在某个地方。比如微信公众号右侧有一个`在线问答`不管页面怎么动，它都是在浏览器右侧中部边缘：
比如现在我们让我们的盒子顶在右侧边缘且没有间隙，那我们就可以这样修改代码：
index.css
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
div.mydiv{
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
padding: 10px 20px;
border-top: 10px solid #f00;
border-left: 10px solid #0f0;
border-right: 10px solid #00f;
border-bottom: 10px solid #bbb;
display: inline-block;
margin: 10px;
position: fixed;
right: -10px;
top: -10px;
}
这样盒子模型就会固定在右上角：
相对于relative，应用fixed属性可以应用：top/left/right/bottom属性。
关注，不迷路，每天分享大量前端知识
css中的盒子模型 css处理网页时，他认为每个元素都包含在一个不可见的矩形盒子 盒子是由 内容区，内边距(padding)，边框，外边距(margin)组成
在浏览器中，其默认样式中存在一些body等元素存在的默认样式，比如一些外边距，内边距等,它的这些默认样式
所以在编写样式之前我们需要将默认样式取消掉，在书写代码时在style中引入下面的reset.css文件即可，下面的效果不好的话，可以百度reset.css粘贴进去。
内联元素的盒模型，设置width和height无效，水平方向的内边距可以用，内联元素可以设置 垂直方向的外边距，不会影响页面的布局，即不影响其他元素的位置，仅仅是其显示效果发生变化 可以使用边框，外边距，两个内联元素的相邻外边距会相加，垂直外边距不支持！
css中的display，通过display可修改元素类型，比如块元素转化为内联元素，内联元素转化为块元素，还可以设置为内联块元素，拥有他们的共性，可以设置宽高，但又
不独占一行，比如img标签。display：none 元素不显示，也不在页面占有位置。
visiblity visiblity：none 元素不显示，但在页面占有位置。
css盒子模型中的overflow 如果子元素大小超过父元素的大小，超出父元素的内容
会在超过父元素的区域显示，父元素默认是将溢出的内容，在父元素外边显示，通过overflow可以处理溢出的内容。比如overflow：scroll/auto，添加滚动条，来查看所有内容。
文档流 文档指的是HTML的页面，每个页面都是一个文档，文档流就是处在网页中的底层表示一个页面的位置，我们创建的元素默认处在文档流中
元素在文档流中的特点。
1.块元素在文档流中会默认独占一行，默认自上往下排列，默认宽度是父元素的100%
块元素的高度默认被内容撑开。
2.内联元素在文档流中只占自身的大小，默认从左向右排列，如果一行内容纳不了所有元素则会另起一行，接着自左向右。
在内联元素，宽度和高度默认被内容撑开。
浮动（float）
块元素在文档流中默认垂直排列，如果希望块元素水平排列，可以使其脱离文档流。
百度reset.css即可搜到去除浏览器默认样式的css文件
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
1.盒子移动，我们可以理解为盒子的offsetLeft在不断的增加
2.offsetLeft在不断的增加，我们可以利用我们的定时器实现，setInterval可以实现重复执行盒子的offsetLeft不断增加
3.盒子什么时候停止呢?我们可以在定时器内增加一个判断条件，如果盒子的offsetLeft大于等于某个长度了，我们可以停止移动盒子
4.停止移动盒子的本质就是清除定时器clearInterval
5.怎么实现多个盒子移动呢？我们可以采用封装函数的方法，把盒子移动的定时器封装到函数里面，哪个盒子需要移动动画，哪个盒子就调用函数
6.调用函数的时候，我们需要传递那些实参给函数的形参呢，从定时器我们可以了解到，我们需要传递哪个对象需要移动，并且需要移动动画要移动到的终点。
*请认真填写需求信息，我们会在24小时内与您取得联系。
