经过两个星期的学习，我瞅着想写好网页最重要是布局，从左向右，从外而内。
首先我感觉需要熟练是一定的。
先是各种html标签组建网页的基本框架，有css填充内容，然后js去实现效果。
em 斜线del 删除线下划线标签 ins div 页面功能划分
span 文本节点 标签 style：color
这俩没有默认样式修饰如果想改变里边的演示要借助css来完成
ul li ol有属性 type start dldt dd 层次感
插入图片 img src
属性 src路径
路径有两种：绝对路径和相对路径当前文件所在的文件和目标文件在一个目录里
当前文件和目标文件的文件在一个人目录下
当前文件和目标文件在同一个目录下
width宽度 height高度 alt当图片没有显示出来 替换文本
tite标签 border边框
我来说一下对于div用法的理解(注意其边框重叠问题)
首先要明白它是一个块元素也就是独占一行,其中margin是外边距，div位置是margin left和right加border left+right 加 padding left+right 加内容是其父元素的宽度也就是说当margin自适应是让div在其父元素中margin left=margin top。
position也是一个道理只不过他多了top bottom left right 绝对定位会让元素脱离文档流会盖住文字，必须给其祖辈元素开启相对定位，注意的问题是明白各种定位的初始坐标点是哪里才能使用定为来改变其位置。其中绝对定位常用z-index来改变图片上下层问题从而达到轮播以及动画效果。
css部分:京东里的mi和小房子图片小动画
*{
padding:0px;
margin: 0px auto;
}
#box{
height: 55px;
width: 55px;
overflow: hidden;
transition:right 1s;
}
p {
display: block;
height: 55px;
width: 55px;
position: relative;
}
.one,.two{
width: 55px;
height: 55px;
}
.one{
display: block;
width: 55px;
height: 55px;
position: absolute;
left: 0px;
background: url(img/head-mi.png) no-repeat ;
}
.two{
background: url(img/home.png) no-repeat;
position: absolute;
left:-55px;
}
#box :hover .one{
left:-55px;
}
#box :hover .two{
left:0px;
}
html部分
就是建两个盒子.two .one
截图没截好...
display让元素改变类型
float浮动使元素半脱离文档流 其可能会造成高度塌陷问题 。
“BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。”
开启元素的BFC后，元素会有如下特性：
1.父元素的垂直外边距不会和子元素重叠。
2.开启BFC的元素不会被浮动的元素所覆盖。
3.开启BFC的元素可以包含浮动的子元素。
在以下情况下,会自动开启BFC:
1.设置元素浮动(此方法，虽然可以撑开父元素，但是会导致父元素的宽度丢失,也会导致下边的元素上移)
2.设置元素绝对定位
3.设置元素display:inline-block;(此方法虽然也可以解决问题,但是转为行内块也会导致宽度丢失,因此也不推荐此方法)
4.将元素的overflow设置为一个非visible的值(设置其after与before 通用的是
.clearfix::after,
.clearfix::before{
display: table;
clear: both;
content: "";
}
)
原文：https://www.cnblogs.com/oto4/p/12353708.html