一直以来看了CSS的各类选择器及用法，大概能知道有哪些用法，看过书也跟着慕课网上每小节有代码验证的教程学习了。后来发现每当想要实现某些效果时，却不知从何下手，对于知识只停留在表面。因此，最近恰好有空，找了视频，从头来过，补补欠缺的许多基础的东西，通过动手实践加深对布局及各类选择器的用法加深理解。有个小小的愿望，在今后自己能随心所欲地实现想要的效果O(∩_∩)O
1.最简单的一列布局结构：
<html>
<head>
<title>布局练习</title>
<meta charset="utf-8">
<style type="text/css">
//这里是改变浏览器的默认样式，使内边距为0,且内容居中，后面有加上和未加的两种效果图
body{
margin: 0;
padding: auto;
}
.top{
height:80px;
margin: 0 auto;
background: red;
}
.main{
height:300px;
width: 800px;
margin: 0 auto;
background: blue;
}
.tool{
height:80px;
width: 800px;
margin: 0 auto;
background: pink;
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="main">
</div>
<div class="tool">
</div>
</body>
</html>
图1 修改body默认样式的效果图
图2 未修改body默认样式效果图（有内边距存在）
2.简单的二列及三列布局（效果如下面的图3所示）
<html>
<head>
<title>布局练习</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding: 0;
font-size:30px;
font-weight: bold;
}
div{
text-align:center;
line-height:100px;
}
.main{
height:300px;
width: 800px;
margin: 0 auto;
background: gray;
}
.left{
width: 20%;
height: 300px;
float:left;
background: red;
}
.right{
width: 80%;
float: right;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
图3 两列布局效果
在实现过程中，发现两个div块开始不在同一行，div是块级元素因此会默认占一行。然后给左边块添加了float属性让其脱离文档流，浮动显示。这里值得注意的有两个点：
（1）margin:如下图所示：
当设置了float，div元素不占文档实际高度，脱离了文档流(left相当于空气)，因此，在给右边的div设置上边距时，可以看到效果，是距父元素的距离，即自己本身的上外边距。
（2）反之，当未脱离文档流时，左边的div占了实际高度，设置的外边距则是以left所在div块为基准来定位的，如下图所示：
3.混合布局
一般在进行布局时，从结构和语义入手，注重结构，最后再给其加上css样式。一般设计时尽可能地将结构降到最简，可以用一个div解决的尽量不要要两个。
下面的混合布局，顶部有一个div，自适应，然后接着下面是大的div，包含左右两个部分，接着是底部div。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px;margin:0 auto;}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px;margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc;float:left;}
.right{ width:740px; height:600px;background:#FbC;float:right;}
.footer{ height:50px; background:#9F9;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">right
</div>
</div>
<div class="footer">footer</div>
</body>
</html>效果如下图所示，底部的div块跑到了head的下面，原因也是和上面一样，由于left和right脱离了文档流，因此，footer当然就当他们不存在了。因此如果想要达到该效果，在设置footer的样式时，加上clear:both即可清楚上面的浮动。
另外：
（1）浏览器在加载文件进行渲染时，是从上到下依次进行渲染，因此如果有些需要先加载渲染的，把位置调到前面就可以；
（2）关于float和position的用法：固定宽度的元素排成一行时用float，存在自适应宽度的若干元素排成一行时用position。
（3）！！！关于float没有继承性，因此虽然浮动元素不能设置其宽高，这个说法是错误的！！对于块级元素，float后变为行内元素不可设置高度；相反的当行内元素float后变为块级后可进行设置。
4.响应式布局
（1）CSS-Media Query:
常见的属性：
- device-width,deviece-height——屏幕宽高（物理设备）
- width,height ——渲染窗口宽高（屏幕可视的）
- orientation ——设备方向（竖屏或横屏展示）
- resolution ——设备分辨率（不同于像素）
6.瀑布流布局：如早期的蘑菇街，现基本上不用了。
5.练习（跟着慕课网上的教程，实现一条微博内容的简单实现）
实现代码：
<html>
<head>
<title>布局练习</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding: 0;
font-size:30px;
font-weight: bold;
}
.main{
width: 458px;
padding: 20px;
margin-left:100px;
background: #9cf;
border: 1px solid gray;
position: relative;
}
//下面选择器不知道为什么选择不到图片
.main .left image{
float: left;
margin:-20px 0 0 -130px;
}
.main .right p{
font-size: 12px;
line-height: 25px;
}
.main .right span{
position: absolute;
right: 20px;
top:10px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<image src="C:\Users\Desktop\Koala.jpg" width="100px" height="100px">
</div>
<div class="right">
<h6>樱桃小丸子</h6>
<span>10分钟前</span>
<p>网站重构随着这个概念的出现，也带来了DIV结构的流行，因此也就出现了我们口头说的“DIV+CSS做网站”。单从这个DIV+CSS的叫法来分析，可以了解到CSS已经被大家用在了页面布局上了。单一个页面不是只有控制DIV就控制了全面，还有很多其他的HTML标记，以前用table布局的页面，一样可以用CSS来控制它
</p>
</div>
</div>
</body>
</html>
效果如下：
？？设置image样式时，无论是通过.main .left image或是.main image都不能选择到该图片，而.main .left却可以？？？
原因：根本的原因是我自己将标签写错了，应该是 ，而src图片能够显示出来的原因是由于新版的浏览器能够识别 ，但是由于CSS解释器和html的是不一样的，因此，上面的选择器选择不到该图片。可以修改为一下两种情况，都是可以的。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
又过了差不多一个多月的时间，又再次回过头来重新学习。因为CSS对我来说真得感觉到超级难。这不，超级简单的代码还是有问题：
<html>
<head>
<style type="text/css">
#main{
width: 600px;
margin: 10px auto;
background: red;
}
</style>
</head>
<div id="main">你猜</div>
<div id="main1" style="width: 600px;
margin: 40px auto;
padding: 50px;
background: orange;
border-width:10px;">什么</div>
</html>
当第二个块级元素的样式放在style标签中时，样式无效！
<style type="text/css">
#main{
width: 600px;
margin: 10px auto;
background: red;
},
#main1{
width: 600px;
margin: 40px auto;
padding: 50px;
background: orange;
border-width:10px;
}
</style>
T T这么瓜的问题，我居然遇到了，结果就是平常写惯了框架，理所当然地加逗号。。去掉第一个id选择器后面的逗号即可。
结构和层叠
1.特殊性
如下所示对CSS权威指南中的实例验证，疑惑记录在此，希望随着学习之后能有所明白。分明第一个兄弟选择器的优先权高于所有的p，那么p不应该只具有h1 + p 下面的样式吗？
（1）代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
h1 + p {color:black; font-style: italic;} /*0,0,0,2*/
p {color: gray; background: white; font-style: normal;} /*0,0,0,1*/
*.aside {color: black; background: silver;} /*0,0,1,0*/
</style>
</head>
<body>
<h1>Greetings!</h1>
<p class="aside">It's a fine way to start a day, don't you think?</p>
<p> there are many ways to greet a person, but the words are not as important as the act of greeting itself.</p>
<h1>Salutations!</h1>
<p>There is nothing finer than a hearty welcome from one's fellow man.</p>
<p class="aside">Although a thick and juicy hamburager with bacon and mushrooms run a colse second.</p>
</body>
</html>（2）效果
经过验证后发现，兄弟连接符只能选择一个元素！！
2.有序列表和无序列表
疑问：无序列表通过设置list-style-type属性，也可标识顺序；同样的有序列表也可以通过设置该属性，使列表标识以方块或者圆显示，，那么这时候和有序列表还有什么区别？
<html>
<head>
<style type="text/css">
ul.square {list-style-type:square} //无序列表，设置列表标识为方块
ol.upper-roman {list-style-type:upper-roman}
</style>
</head>
<body>
<p>Type circle:</p>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type square:</p>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type upper-roman:</p>
<ol class="upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p>Type lower-alpha:</p>
<ol class="lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
如图所示的上面两个为无序列表，下面的两个为有序列表，无序列表的默认标识为实心圆点，有序列表的默认标识为阿拉伯数字1、2……
当设置无序列表的list-style-type为decimal时，设置有序列表的list-style-type为circle时，结果如下：
所以有序和无序列表可以借助此属性相互转换吗？
3.CSS外边距合并
外边距合并的几种情况，后两种都没有效果。不知道为什么包含情况和空元素均没有出现外边距合并。
3.1 包含情况（即一个div里包含了另外的div）
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>
结果图：
蓝色块部分没有设置它的边框和padding，结果最后的外边距还是为10px???
、、、、、、、、、、、、、、、、、、、、、、
其实，上面又是我的理解问题。还是看图吧，按提示：
（1）那我就试一试设置外边div的内边距padding:10px、边框为1px。
由上面的两张效果图，可以知道没有合并的情况下，内部div会以外部div的内容为基准来设置自己的margin-top的值，从而定位，如第二张图那样。margin-top是距离out div的内容顶部的那段距离。
（2）没有设置外部div的内边框和border时，外部div的内容就直接是红色背景部分，但是内部的div块并没有依赖于他定位，否则就应该离红色方块的上边距10px。就是合并后，两个margin-top都重叠了，因此，虽然内部为10px（为了方便观察，我将外部div的margin-top改成了20px），但是两者合并对外整体展现20px，实际上检查元素发现内部的外边距为10px，不过在合并后被包含在内边距的20px里，正好为其一半。
3.2空元素（有外边距，但没有边框或填充）
（1）当有padding时，如下图所示，padding上下边距加起来就是中间的红色区域，红色区域外的上下部分则分别是上下外边距。p由于margin和padding都为零，直接如图所示没有间隙。
（2）当没有padding时，效果如下：
为了方便观察，将margin-bottom修改为40px，此时空元素情况下：
综上，我想可以这样理解。空元素的情况下（无padding和border），当上下外边距相等时，上下外边距合并，对外表现为上（或下）边距，也就是第二张图的20px；当上下外边距不相等时，上下外边距的合并，对外表现为边距较大的那一个，正是 空隙处的20px+原来的margin-top:20px=>也就是40px，不看里面，直接看p元素的定位，就知道，上面的空元素合并成立40px。
千万不要被检查元素时的盒子模型中的边距给绕晕了，右下角的盒子模型，展示的是原本的属性值。最后的要看对外展现的实际效果（即p上边的距离）。