標簽：絕對定位 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 这样会对其它代码造成的干扰降到最低。
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
