css hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11、Firefox、Safari、Opera、
Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面 展现效果。这时为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的 CSS样式，把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack
filter:alpha(Opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack
注意：尽可能减少对CSS Hack的使用
CSS 属性前缀法（即类内部 Hack）
IE6 能辨认下划线" _“和星号” * "
IE7 能辨认星号 * ，但不能辨认下划线 _
IE6~IE10都辨认" \9 "
firefox 前述三个都不能辨认
- IE条件注释法（即 HTML 头部援用 if IE Hack）
- 一切 IE (注：IE10+不再支持条件注释)能辨认
- IE6及以下版本能辨认
常见基础样式
<style>
.box{
width: 500px; /*内容体宽度*/
height: 500px;
border:1px solid red; /*设置边框 */
/*背景图*/
background-image: url('./images/tour1.jpg');
/*相对路径：是指以使用该资源的文档为起点，查找资源
文件目录的过程中所形成的路径。
如果是同级目录 "./"
如果是上级目录 "../"
项目中：文件夹，文件不要使用中文
*/
/*背景图平铺属性：
repeat:平铺，一般应用场景网页背景，利用一小块图案进行平铺
*/
background-repeat: no-repeat;
/*背景图定位*/
background-position: right bottom;
/*颜色 图片 定位 平铺*/
background: url('./images/tour1.jpg') center center no-repeat;
/*文字相关*/
/*字体大小:浏览器默认字体大小 16px 最小字体12px*/
font-size: 30px;
/*字体颜色 rgb(68,146,250);*/
color: #4492FA;
/*字型: monospace 英文字符等宽*/
font-family:monospace;
/*字体加粗100-900
normal lighter bolder
*/
font-weight:lighter;
/*字体样式*/
font-style: italic;
/*文本排列有关样式属性：center right left(默认) */
text-align: left;
/*文字缩进 2em ：2倍的当前盒子字体大小*/
text-indent: 1.5em;
/*字体下划线*/
text-decoration:line-through underline;
/*字符间距*/
letter-spacing: 0px;
/*词间距:浏览器对单词的分辨，是按照连续字符的规律进行分辨的*/
word-spacing: 0px;
/*自动换行*/
word-wrap: break-word;
/*强制不换行*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
}
</style>
常见选择器
标签选择器，例如p
上下文选择器，也叫做后代选择器，例如标签1 标签2 {声明}
类型选择器，例如.class
ID选择器#，例如#id
子选择符 >，例如标签1 > 标签2 标签2必须是标签1的子元素。与其他常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素
紧邻同胞选择器+，例如标签1 + 标签2 标签2必须紧跟在其同胞标签1的后面
一般同胞选择器~，例如标签1 ~ 标签2 标签2必须在（不一定紧挨着）其同胞标签1后面
通用选择器*，匹配任何元素
属性选择器：标签名[属性名]，例如a[href$=".com"]
属性值选择器：标签名[属性名=“属性值”]
伪类选择器
伪类会为特定HTML的状态定义应用样式
链接伪类
a:link向未被访问的链接添加样式
a:visited向已被访问的链接添加样式
a:hover当鼠标悬浮在元素上方时，向元素添加样式
a:active向被激活的元素添加样式
在 CSS 定义中，a:hover必须被置于a:link和a:visited 之后才是有效的；a:active必须被置于a:hover之后才是有效的。伪类名称对大小写不敏感，注意顺序lvha。
<a href="bb.html">bbbb</a>
<a href="index.html">Index</a>
<style>
a:link{
color:red;
background-color: grey;
}
a:visited{
color:blue;
}
a:hover{
color:yellow;
}
a:active{
color:green;
}
</style>
其它常见伪类
<div class="tablist">
<ul class="tabmenu">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1">tab1 content</div>
<div id="tab2">tab2 content</div>
<div id="tab3">tab3 content</div>
</div>
<style>
#tab1:target, #tab2:target, #tab3:target {
color: blue;
}
</style>
结构化伪类
first-child选择属于其父元素的首个子元素并为其设置样式,
例如p:first-child表示p是其父元素的第一個子元素
- :last-child
- :nth-child(n)
<p><span>asdflkasd</span>
<span>1111111111</span>
</p>
<div>
<p>sadfasdf</p>
<p>123456</p>
</div>
<style>
p:nth-child(2) {
color: blue;
}
</style>
伪元素
<style>
/*:before可以在元素的内容前面插入新内容*/
h1:before {content:url(images/tour1.jpg)}
h1:after {content:url(images/tour1.jpg)}
</style>
表格标签
<p>
table tr th td
thead tbody tfoot
</p>
<style>
.col-4{
width: 60%;
background-color: hotpink;
}
.col-2{
background-color: lawngreen;
}
.table td{
border: 1px solid #ccc;
}
</style>
<table class="table">
<caption>
<span>col标签</span>
</caption>
<col class="col-2 prop">
</col>
<col class="col-4">
</col>
<col class="col-2 prop">
</col>
<col class="col-4">
</col>
<tr>
<td>name</td>
<td>derek</td>
<td>sex</td>
<td>man</td>
</tr>
<tr>
<td>hobby</td>
<td>guitar</td>
<td>now</td>
<td>coding</td>
</tr>
</table>
为什么不建议用table进行布局
1、table比其它html标记占更多的字节 (造成下载时间延迟，占用服务器更多流量资源)
2、table会阻挡浏览器渲染引擎的渲染顺序。会延迟页面的生成速度，让用户等待更久的时间
3、table里显示图片时需要把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加http会话数)
4、table会影响其内部的某些布局属性的生效（比如< td >里的元素
的height:100%）限制页面设计的自由性
- 一旦学了CSS的知识后使用table做页面布局会变得更麻烦
1、table对于页面布局来说从语义上看是不正确的。(它描述的是表现， 而不是内容)
2、table代码会让阅读者抓狂。(不但无法利用CSS，而且会不知所云,尤其在进行页面改版或内容抽取的时候）
3、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌
浮动布局
浮动布局让水平的排列处理更加简单方便、
<style>
.wrap{
width:500px;
height:500px;
border:1px solid red;
}
.wrap>div{
width :200px;
height:200px;
background-color:blue;
float : right;
/* 會有間隙的問題,解決方案是font-fize:0
display: inline-block;
*/
}
</style>
<!-- 此时我们会发现，两个盒子快速同行排列，
并且呈现出顶对齐效果,且之间没有间隙，此
时我们能可以自由的设置margin -->
<div class="wrap">
<div class="box1">1<br>2</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
浮动布局的原理
浮动布局，就是给盒子设置float属性，这个属性的值只有两个left或者right,设置后，盒子先会浮起来从当前行脱离默认文本流，进入到新的一层，我们将这层称为浮动层，然后按照设定的方向接着移动，直到遇到父级块的边缘，或者其他浮动块的边缘停止，与margin这种移动盒子方式不同，浮动只能设置移动的方向，但不能设置具体浮动多少距离
<style>
.wrap {
width: 500px;
height: 500px;
border: 1px solid red;
}
.wrap>div {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.wrap>.box2 {
float: right
/*
浮動的做法比使用margin推動更為方便
*/
}
</style>
<!-- 此时我们会发现，两个盒子快速左右排列，并且呈现出
顶对齐效果,且之间没有间隙，不用向原来那样，先同行
排列，再苦哈哈的给一个盒子设置设置位置移动，来推它-->
<div class="wrap">
<div class="box1">1<br>2</div>
<div class="box2">2</div>
</div>
扫一扫
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
