标签：绝对定位 bottom fixed 一个 gray 文字 osi display over
width，height属性margin和padding属性width，heightmargin-top、margin-bottom`，不支持外其它的内外边距都是支持的。<div> <h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <table> <tr> <tbody> <tfoot> <pre> ...
<a> <s> <b> <input> <i> <span>
<select> <sub> <sup> ...
修改标签类型: display
display:block; 指定对象为块元素display:inline; 指定对象为内联元素内联块：display:inline-block;
要去除
display:inline-block;元素间的间隙有两种方式：1. 删除换行和空格。2. 设置父级元素font-size: 0;,然后再单独设置当前字体大小。
/* 去除 内联块 元素间 间隙示例*/
ul{
font-size: 0;
}
ul>li{
font-size: 16px;
display: inline-block;
background: gray;
color: #fff;;
}
标签元素显示或隐藏有三种方式
display:none; 隐藏元素,不保留元素所占的空间。visibility:hidden;隐藏元素，保留元素所点空间。
visible：visible 设置元素可见。opacity：<number>; 设置元素透明度。 取值 0~1。0全透明，1不透明。
opacity:0也可以使元素隐藏，但需要它只是通过调整元素的透明度来实现，元素还在，还是可以点击的，而上面两种则不可以点击，使用时需要注意。
标签元素处理溢出内容的方式
overflow: hidden; 当内容超出时隐藏超出部分。overflow: scroll; 设置元素有滚动条。无论是否超出内容滚动条都会出现overflow: auto; 当内容超出时呈现滚动条，反之则没有滚动条。相比于 overflow: scroll;用户体验更好。overflow: visible overflow的默认取值，对超出部分不作任何处理。也可以c通过
overflow-x,overflow-y设置X,Y轴的滚动行为。
最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列
想要将元素排列到一行可以使用display:inline-block; 但是内联块会存在间隙的问题。这里可以选择浮动的方式将元素排列到一行。
浮动为左浮动float:left;和右浮动float:right;
清浮动是由于浮动时提升元素的层级，脱离了文档流破坏了文档流结构。
清浮动有以上6种常用方式：
给父级也添加浮动
父级元素中如果有
margin: 0 auto;左右居中的效果将失去作用
给父级添加display: inline-block;
父级元素中如果有
margin: 0 auto;左右居中的效果也将失去作用。
在浮动元素下添加空标签清除浮动
<style>
.box1{width: 100px;margin: 0 auto;border: 5px solid red;}
.box2{width: 100px;height: 100px;background: blue; float: left;}
.clear{clear:both;}
</style>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
IE6下会有最小高度问题（IE6下高度小于19px的元素，高度会被设置为19px，解决方案设置font-size:0,但仍然会有2px的高度。），IE5下margin: 0 auto;不起作用。
浮动元素下添加
标签清除浮动
<style>
.box1{width: 100px;margin: 0 auto;border: 5px solid red;}
.box2{width: 100px;height: 100px;background: blue; float: left;}
</style>
<div class="box1">
<div class="box2"></div>
<br clear=‘all‘>
</div>
这样写不符合工作中：结构、样式、行为三者分离的原则。代码有耦合。
::after伪类清除浮动
<style>
.box1{width: 100px;margin: 0 auto;border: 5px solid red;}
.box2{width: 100px;height: 100px;background: blue; float: left;}
.clear:after{content: ‘‘;display: block;clear: both;}
.clear{zoom:1; }
</style>
<div class="box1 clear">
<div class="box2"></div>
</div>
IE5/6/7下不支持:after伪类。但IE5/6/7下只要触发hasLayout就不需要清除浮动。使用zoom:1;触发 hasLayout 这样会对其它代码造成的干扰降到最低。
overflow: hidden;清浮动
<style>
.box1{width: 100px;margin: 0 auto;border: 5px solid red;overflow: hidden;}
.box2{width: 100px;height: 100px;background: blue; float: left;}
</style>
<div class="box1">
<div class="box2"></div>
</div>
IE5/6下不支持。解决为法：配合
zoom:1;使用
position 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
position: static; 静态定位
position: relative; 相对定位position: absolute; 绝对定位
position: fixed; 固定定位
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
使用z-index属性，可以更改定位堆叠顺序。
z-index 的值为数字，数字越大堆叠在顶层，数字越小堆叠在底层。
伪类只有在一定的条件下才能作用到标签上。
a:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选中的链接 */注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
E:focus 设置对象在成为输入焦点时的样式。E:first-child 匹配第一个子元素E:last-child 匹配最后一个子元素CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image,background-repeat,background-position的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。
background-image 使用图像作为背景background-repeat 背景图像如何填充background-position 指定背景图像在元素中出现的位置可以像使用字体一样使用图片。可以通过font-size设置图片大小。通过color设置图片颜色。
重置HTML标签的默认样式。HTML标签会有默认情况下不同浏览器中都会有一定的样式属性这些样式也可能会因为不同的浏览器所不同，这些样式并不是程序所需要的，所以在程序一开始就需要先将这些默认样式给清除掉。
标签：绝对定位 bottom fixed 一个 gray 文字 osi display over
原文地址：https://www.cnblogs.com/DarkCrow/p/14943008.html
