几个常用的标签
a标签
使用a标签主要时用于定义超链接的，a标签中最长用的属性是href 一般href后加的是你要跳转的url。
当你定义一个a标签时，他的默认样式是字体颜色是蓝色，并带有下滑线。一般常用的去掉下划线的方法是用text-decoration:none;最近学到的一个小样式是可以用a:hover{color:}使鼠标悬浮在a标签上时会显示你定义的颜色
p标签
p标记的是一个段落
如果想要将一个段落的内容显示到一行，但是段落字数太多了可以用 white-space:nowrap;将其强制在同一行显示，效果如下
可以看出来虽然强制在同一行，但是却聚集到一起了，现在可以使用 overflow: hidden;将多余的数据进行隐藏效果如下图所示
这个还可以在最后加上省略号用 text-overflow: ellipsis;在最后加上省略号效果如下下图所示
ul标签
ul标签定义的是无序列表，在静态html界面中经常被使用，通常是与li标签一起使用，创建无序列表，li标签的内容前通常会自动生成一个小黑点可以用list-style: none;去掉
dl标签
dl标签定义的是带有项目和描述的描述列表
主要的格式为
< dl >
< dt >定义的项目名< /dt >
< dd >描述内容< /dd >
< /dl >
table标签
table标签定义的是一个html表格其结构为
< table>
< tr>定义表格行
< th>通常定义的是表头>< /th>
< /tr>
< tr>
< td>定义的是一个元素表单< /td >
< /tr>
</ table>
这个就是一个简单的一行一列的表格
表格也是可以互相嵌套的，你可以在某行的一个td中写一个新的表格，就可以实现表格嵌套。但这个一般不经常用。表格中的一些常用的属性，colspan用在td标签中，用来指定单元格横向跨越的列数。rowspan作用是指定单元格纵向跨越的行数。
盒子模型
定义
盒子模型通俗的讲就是一个拥有一个矩形区域的标签，所有html元素可以看作盒子，盒子模型一般是用于设计页面布局时使用的，他的基本结构如下图所示
其中 margin 为外边距，清除边框外的区域，外边距是透明的，border为边框，就是围绕在内边距和内容外的边框。padding为内边框，清除内容周围的区域，内边距是透明的。content为内容，
有一点需要注意的是在计算内容宽度的时候需要将左右边框，左右填充，左右边距算上。在计算内容高度的时候需要将顶部和底部填充，上下边距，上下边框算进去。
盒子模型的六大属性
width
height
border
padding
margin
background
盒子的内容区域：是width和height构成的区域
widht
height
盒子的内填充区域：盒子内容区域与边框之间的间隙
padding
盒子的外填充区域：边框以外的间隙
margin
widht和height：
指盒子的内容区域，不是指盒子在网页上占据的空间
border: 设置盒子边框
边框的粗细 1px 2px
边框的样式 solid
边框的颜色 red
简写：border:1px solid red;
边框也是分四个方向，也可以单独的设置：
border-top:
border-right:
border-bottom:
border-left:
padding:
内填充 也叫补白 内容和边框之间的间隙
也是分四个方向 也可以单独设置某个方向的 padding
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:20px; 四个方向的padding都是20px
padding:20px 40px 60px 80px; 上 右 下 左 顺时针方向
margin:
外填充 盒子边框之外的间隙
也是分四个方向 也可以单独设置某个方向的margin
margin-top:
margin-right:
margin-bottom:
margin-left:
margin:20px;
margin:20px 40px 60px 80px; 同上面padding一样
background：用来设置盒子的背景
背景的颜色： background-color
背景的图片： background-image
盒子的分类
盒子可以分为三大类 ：块级元素，行内元素，行内块元素
块级元素：盒子模型的六大属性都起作用。
行内元素：width和height不起作用，margin和padding在垂直方向上不起作用，其他的属性都可以正常使用。
行内块元素：盒子模型的六大属性都起作用，但是不能独占一行。
常见的块级元素标签有：div，ul，ol，li,dl,dt,dd,p,hn,form
常见的行内元素签:a,span,lable,button,b,i,em.strong
常见的行内块元素标签：input，img。
元素之间的变形方法
如果想让行内元素也具有块级元素的特性，或者具有行内块元素的特性那么就可以用display来进行转换，
1，用display标签进行变形
行内元素转换成块级元素：display：block
行内元素转换成行内块元素： display: inline;
2，用浮动进行变形
行内元素也可以用float（浮动)进行转换，一旦行内元素进行浮动，那么他就会变成块级元素。
3 ，用绝对定位进行变形
如果一个行内元素或者一个行内块元素进行了绝对定位，那么他就会变成块级元素。
下面就整一个来直观的看一下
布局
常见的布局有三种，分别为流动布局，浮动布局和层布局
流动布局
流动布局就是最原始的什么都不需要设计的布局，就是简单的块级元素独占一行，行内元素并排显示，如果一行装满了，就会自动换行。
浮动布局
利用float让块级元素能并排显示。例如一个父块级元素，和两个子块级元素，如果想让两个子元素在父元素中并排显示，就可以使用浮动。
浮动带来的影响
1，对父元素的影响：
如果两个子元素全部都浮动了那么父元素的高度可能会塌陷变为0，
2，对兄弟元素产生影响。
清除浮动带来的影响
1，用 overflow:hidden 可以清除浮动元素对父元素所造成的影响但这个 不太靠谱，毕竟overflow:hidden 的主要作用并不是清除浮动带来的影响的他的主要目的是清除溢出的。来个效果图能更直观的显示 
从图片上可以看出overflow:hidden的效果。
2，用clear:both 专业用来清除浮动
定位
相对定位
相对定位会按照元素的原始位置对该元素进行移动，直接上例子
<html>
<head>
<style type="text/css">
.right{position:relative;left:10px}
.left{position:relative;left:-10px}
</style>
</head>
<body>
<h1> 初始位置<h1>
<h1 class="right"> 相对于初始位置进行向右移动10px<h1>
<h1 class="left"> 相对于初始位置进行向左移动10px<h1>
</body>
</html>
这里需要注意的就是第二次移动是相对于初始位置向左移动10px, 而不是在自己原始位置的基础上向左移动10px
相对定位的特点
1）定位前后，盒子的形状不会发生改变
2）原本位置还是保留的
3）一个相对定位的元素是没有脱离标准文档流的，原本位置还有占用
4）在设置偏移量时，可以为负值
5）一个相对定位的元素也可以设置到一父盒子的外面的
语法：position:relative; 设置偏移量：top/left/right/bottom 一般是通过其中两个进行设置
作用：
1）对一个盒子局部位置的调整
2）设置绝对定位的参考点
绝对定位
绝对定位就是通过参考点进行定位的，参考点一般是给父元素设置（设置参考点可以通过position:relative;进行设置，也可以通过position:fixed来设置，也可以通过position:absolute来设置。一般情况下都是通过position:relative;来设置），然后以父元素为参考点进行定位，如果父元素没有设置参考点，那么参考点就是body举个例子，现在是不设置参考点的情况下，其默认的参考点就为body.
<html>
<head>
<style type="text/css">
.dw{position:absolute;left:100px;top:200px}
</style>
</head>
<body>
<h1 class="dw"> 初始位置<h1>
</body>
</html>
这个初始位置是距离html页面左侧100px,距离页面右侧200px,是绝对的，可以通过绝对定位将元素放置到页面的各个位置。
下面是给父元素设置参考点，以父元素为参考点进行移动
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位和绝对定位</title>
</head>
<style>
.box{
border: 1px solid coral;
height: 500px;
width: 500px;
margin:0px auto;
}
.son1{ <!-- 这个是相对定位相对于自己的原始位置进行位移-->
height: 150px;
width: 150px;
background-color: darkgoldenrod;
position: relative;
top: 100px;
}
.son{ <!-- 这个是以父元素为参考点进行绝对定位-->
height: 150px;
width: 150px;
background-color: cornflowerblue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="box">
<div class="son1">
<div class="son"></div>
</div>
</div>
</body>
</html>
下面是效果图
绝对定位的特点
1，如果行内元素进行绝对定位后会变成块级元素，但是进行相对定位后，其性质是不会发生改变的
不多bb直接上代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位和绝对定位</title>
</head>
<style>
.box{
border: 1px solid coral;
height: 500px;
width: 500px;
margin:0px auto;
position: relative;
}
.box .aa{
background-color: darkorchid;
height: 100px;
width: 100px;
position: absolute ;
top: 100px;
left: 100px;
}
.box .ar{
background-color: coral;
height: 100px;
width: 100px;
position: relative ;
top: 50px;
left: 50px;
}
</style>
<body>
<div class="box">
<a href="#" class="a">没进行绝对定位的a标签</a>
<a href="#" class="aa">进行绝对定位的a标签 变了 变膨胀了</a>
<a href="#" class="ar">进行相对定位的a标签 我还是我</a>
</div>
</body>
</html>
代码效果如下
2，在设置偏移量时也以为负值
3，多个盒子在设置绝对定位时，可能会重叠到一起，后面的盒子会把前面的盒子盖住，这个时候可以通过z-index来进行设置。z-index的值大的会覆盖在最上面。
固定定位
定义：固定定位是以当前窗口为参考点进行定位的，position：fixd
固定定位的特点
1）在IE低版本浏览器下，不支持
2）移动端浏览器，支持也不给力
3）在设置百分比时，不再相对于body的宽度，它相对的是窗口的宽度。
4）固定定位也是脱离标准文档流
css的层叠性
CSS的层叠性是指 通过N种方式选中一个元素时，设置了不同的样式，以哪个样式为准呢？这个时候就会进行比较了。
1，自己定义的样式>继承>默认的
2，行内样式>内部=外部（就近原则）
内部：当前html界面style中写的css
外部：引用的css
3，id>class>div
css标准文档流
1，定义
css标准文档流：在没有css中一些特殊标签的干预时，块级元素独占一行，可以自定义宽度和高度，从上到下显示。行内元素从左到右并排显示。
脱离标准文档流
使用浮动和绝对定位会使元素就会脱离标准文档流。对于浏览器来说，如果第一个元素脱离了标准文档流，那么第二个元素就变成了标准文档流中的第一个，于是就会把他排在第一位。而第一个依然存在，所以就会叠加。
半脱离标准文档流和全脱离标准文档流
虽然浮动和绝对定位都能使元素脱离标准文档流，但是他俩之间还是有去别的。来吧上代码开整
首先定义三个盒子如下图所示
现在咱们将第二个盒子进行浮动，那么他就会脱离标准文档流，此时第一个和第三个盒子是标准文档流，第三个盒子就变成了第二个标准文档流，就到第二个盒子的位置，如图所示
可以很明显的看出第三个盒子跑了，但是其内容没动，还在原来的位置，所以我们管这个叫半脱离标准文档流。
现在我们将第二个盒子进行绝对定位，效果如下图所示
这个可以很明显的看出来，3号盒子带着内容全部进行移动，所以我们管这个叫全脱离标准文档流。
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
