css元素分类
- 块级元素
常见的有<div><p><h><ul><li>,也可以通过display:block;来设置为块级元素
块级元素的特点：
1、 每个块级元素都是从新的一行开始，并且气候的元素也是另起一行
2、 元素的高度、宽度、行高以及顶和底边的边距都是可以设置的
3、 元素宽度在不设置的情况下，默认市父级元素的100% - 内联元素
常见的有<span><a><label><strong>就是典型的内敛元素也就是行内元素。当然块级元素也可以通过设置display:inline;讲元素设置为内联元素。
内敛元素的特点：
1、 和其他元素都在一行
2、元素的高度和宽度以及顶部边距都是不可设置的
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 - 内敛块状元素
内敛块状元素就是同时具备内敛元素和块状元素的特点，display:inline-block就是讲元素设置为内敛块状元素,<img><input>就是内敛亏装标签
内敛块状元素特点：
1、 和其他元素都在一行
2、 元素的高度、宽度和行高以及顶部编剧都可以设置。
css布局模型
- 流动模型
流动市默认的网页布局模式，也就是网页在默认状态下HTML网页元素都是更具流动模型来就行网页内容布局的，即顺着文档流解析， - 浮动模型
解决块级元素无法并排现实的问题 - 层模型
就行photoshop中的图层一样可以对每个图层进行精确定位操作
- 绝对定位(position:absolute)
即讲元素从文档流拖出来，然后使用left，right，top，bottom属性相对于最接近的一个具有定位属性的父包含块(即父级元素拥有相对定位对其绝对定位进行约束)进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于游览器进行定位。 - 相对定位(position:relative)
如果想对元素设置层模型中的相对定位，需要设置position:relative,它通过left，right，top，bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程市首先按static（float）方式生成一个元素，然后相对以前的位置移动。 - 固定定位(position:fixed)
固定定位，与absolute定位类型相似，但它的相对移动坐标市视图（屏幕内的网页窗口）本身。由于视图本身市固定的，它不会随游览器窗口的滚动条变化而变化，或改变游览器窗口的显示大小，因此固定定位的元素始终位于游览器窗口内视图的某个位置，不会受文档流影响。
- 绝对定位(position:absolute)
ul dl ol
dl用来定义一个列表，dt用来定义列表的一部分头部，dd用来定义列表中一部分的具体描述
ul无须列表
ol有序列表
css负边框
- 设置margin（left/top）为负值可以微调元素的位置
- 但是如果使用right和buttom则会使其附着的元素向本元素靠拢并覆盖
- 使用浮动时如果使用margin负值则会留空
经典布局圣杯布局
圣杯布局市三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以先渲染。也就是在html文档中中间的部分要写在左右布局之前。
当然这样的布局是面向PC端的，移动端由于屏幕宽度较小，不推荐多列布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
.wrapper{
padding:0px 150px 0px 150px;
}
.main{
width: 100%;
background: red;
height: 30px;
float: left;
}
.left{
width: 150px;
background: blue;
height: 30px;
float: left;
margin-left: -100%;
position: relative;
left: -150px;
}
.right{
height: 30px;
width: 150px;
background: gray;
float: left;
margin-left: -150px;
position: relative;
right: -150px;
}
</style>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="main">
main
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
经典布局双飞燕布局
双飞燕布局是在圣杯布局的前提下进行改进的：不再使用position和padding，而是在main中增加一个div设置margin来进行布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
.wrapper{
width: 100%;
}
.main{
width: 100%;
background: red;
height: 30px;
float: left;
}
.main .content{
margin-left: 150px;
margin-right: 150px;
}
.left{
width: 150px;
background: blue;
height: 30px;
float: left;
margin-left: -100%;
}
.right{
height: 30px;
width: 150px;
background: gray;
float: left;
margin-left: -150px;
}
</style>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="content">
main
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
最新flex布局
BFC（block formatting context）
块级格式化作用范围：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中元素不会影响到其他环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素受浮动元素的影响，两个浮动元素之间是互补影响的。这里有点类似BFC就是一个独立的行政单位的意思，也可以说BFC是一个作用范围，可以把它结识成一个独立的容器，并且这个容器的里box布局，与这个容器外的毫不相干。
如何产生BFC：当一个HTML元素满足下面的条件中的任何一点，都可以产生BFC：
1. float的值不为none
2. overflow的值不为visible
3. display的值市table-cell，table-caption，inline-block中的任何一个
4. position的值部位relative和static
BFC能做什么
- 不和浮动元素重叠
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。
看下面一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.aside{background:#f00;width:170px;float:left;height:300px;}
.main{background:#090;height:100%;overflow: hidden;}
</style>
</head>
<body>
<div class="aside">
</div>
<div class="main">
</div>
</body>
</html>
我们通过设置BFC来达到去除覆盖。
2. 清楚元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了(IE Haslayout)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
html,body {height:100%; }
* { padding:10px; margin:0; color:#000; text-decoration:none; list-style:none; font-family:"微软雅黑" }
.outer{width:300px;border:1px solid #666;padding:10px;overflow: hidden;}
.innerLeft{height:100px;width:100px;float:left;background:#f00;}
.innerRight{height:100px;width:100px;float:right;background:#090;}
</style>
</head>
<body>
<div class="outer">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
</html>
- 解决上下相邻元素重叠
看下面例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
html,body {height:100%; }
* { padding:0; margin:0; color:#fff; text-decoration:none; list-style:none; font-family:"微软雅黑" }
.rowone{background:#f00;height:100px;margin-bottom:20px;overflow:hidden;}
.rowtow{background:#090;height:100px;margin-top:20px;position:relative}
</style>
</head>
<body>
<div class="rowone">
</div>
<div class="rowtow">
</div>
</body>
</html>根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。
根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。
所以解这个问题的办法就是,把两个容器分别放在两个据有BFC的包裹容器中，IE里就是触发layout的两个包裹容器中！
解决方法：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
html, body { height:100%; }
* { padding:0; margin:0; color:#fff; text-decoration:none; list-style:none; font-family:"微软雅黑" }
.mg {overflow:hidden; }
.rowone { background:#f00; height:100px; margin-bottom:20px; }
.rowtow { background:#090; height:100px; margin-top:20px; }
</style>
</head>
<body>
<div class="mg">
<div class="rowone">
</div>
</div>
<div class="mg">
<div class="rowtow">
</div>
</div>
</body>
</html>hasLayout表现出来的特性跟BFC很相似，所以可以认为是IE中的BFC。上面的规则几乎都遵循，所以上面的问题在IE里都可以通过触发hasLayout来解决。
编码规范https://github.com/ecomfe/spec
CSS选择器
- 子选择器
ul >Li - 类选择器
li - 后代选择器
ul li - ID选择器
- 通用选择器
* - 伪类选择器
a:hover - 分组选择器
li,span{} - 标签选择器
a{} - 属性选择器
a[href$=pdf]
a[title*=title]
a[title^=pdf]
nth-of-type(n)
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
