浏览器由shell和内核部分组成
Google Chrome webkit/blink
Safari webkit
firefox gecko
IE trident
opera presto 360和昆仑万维收购了
Css cascading style sheet 层叠样式表
<link rel="stylesheet" type="text/css" href="">
内联样式 > 内部样式表 > 外部样式表
!important > id选择器 > class|属性 > 标签
属性选择器 [id=="box"] [href] [type="text"]
派生选择器(父子)
父 子{}
css权重 右到左匹配
* 0
标签,伪元素 1
class,属性,伪类 10
id 100
内联样式 1000
!important 正无穷
font-style:italic 斜体 | oblique <em>
font-family 有空格的字体|中文的字图加引号,别的可以不加,多个用,分开
border-width:上下左右
text-indent:缩进 2em=两个字符
text-decoration:underline 下划线
line-through 删除线
overline 上划线
none 去掉下划线
cursor:pointer 鼠标移入小手
not-allowed 禁用 help问号
单行文本截断,省略号
white-space:nowrap 不换行
overflow-x:hidden 多处的隐藏
text-overflow:ellipsis 隐藏部分加省略号
:hover 鼠标移入伪类
:disabled 禁用的伪类
:checked 选中的伪类
:focus 聚焦的伪类
:first-child :last-child
:nth-child(元素索引) odd(奇数) even(偶数)
display:none(不可见,不占位置) visibility:hidden(占位置)
oactity:0; 值越大透明度越低
filter:alpha(opacity=0);
vertical-align:middle|top|bottom|像素 解决:行内块和行内元素文本对齐的问题
解决:容器内多行文本垂直居中
display:table; display:table-cell; vertical-align:middle;
1.将容器的display设置成table;
2.将容器内的文本的display设置成table-cell(表格单元格属性);
3.将容器的文本的vertical-align设置成middle;
box-sizing:border-box (在盒子内部绘制内边距和边框) content-box
-moz-box-sizing:border-box
-webkit-box-sizing:border-box
-ms-box-sizing:border-box
-o-box-sizing:border-box
body默认边距
默认为8px
ie8 上下16px 左右8px
ie7 上下16px 左右11px
::before ::after 伪类 content属性必须要加
清除浮动的元素必须是块级 clear:both
.clearfix::after{content:"";display:block;clear:both}
利用before在文字前面加图标并垂直居中
p:before{content:url(img/icon.png);margin-right:5px;vertical-align:middle}
盒子阴影
box-shadow:水平位置(偏移量) 垂直位置 模糊距离 阴影的尺寸 阴影的颜色 阴影的种类
background-size:cover 保持纵横比 多余的裁剪
background-attachment:fixed 背景图不随容易高度滚动 默认是scroll
background:color image repeat attachment position/size
logo写法
<div class="logo"> <h1> <a class="logo-hd"> 123213</a> </h1> </div>
.logo h1 .logo-hd{display:block;width:142px;height:0;padding-top:58px;background:url(img/logo.png) no-repeat 0 0/142px 58px;overflow:hidden}
表格单边框: border-collapse:collapse
单元格宽度固定:table-layout:fixed
margin塌陷 : 父元素增加overflow:hidden
所有带有float都是inline-block元素
font:italic bold 12px/20px “微软雅黑”
鼠标移入改变边框,事先设置透明的边框,移入的时候改变颜色即可
//css圣杯模式 双飞翼
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.clearfix::after{
content: "";
display: table;
clear: both;
}
.wrap{
width: 700px;
margin: 0 auto;
border: 1px solid #000;
}
.top, .foot{
height: 50px;
background-color: #000;
}
.main{
padding: 0 100px;
overflow: hidden;
}
.main .left,
.main .content,
.main .right{
float: left;
position: relative;
background-color: green;
margin-bottom: -4000px;
padding-bottom: 4000px;
}
.main .left{
left: -100px;
width: 100px;
}
.main .content{
width: 100%;
margin-left: -100px;
background-color: red;
}
.main .right{
width: 100px;
left:100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="main clearfix">
<div class="left">123</div>
<div class="content">333</div>
<div class="right">4444</div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
```
