CSS布局

1.盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)，和实际内容(content)。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+content width
宽=margin+border+padding+width
高=margin+border+padding+height

如果给一个div定义width，指的是仅文本内容的宽度。

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。

2.页面布局

• 标准流：标准流中，块级元素独占一行，垂直放置。行级元素在水平方向上一个接一个的排列。

    如何在一行显示多个div元素？显然标准流已经无法满足需求，这就要用到浮动。 
  

• 浮动流 ：浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。 float:left;

• 清除浮动：clear:both/left/right;

    元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
  

---

详情可查看：CSS浮动讲解

---

3.块级元素和行内元素

• 块级元素：会独占一行，其宽度自动填满其父元素宽度。 如div，p，ul，li，ol，dl，dt，dd，form，hr，table 等。

• 行内元素（内联元素）：不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。如span，strong，em，i，b，a，br，img 等。

  • 块级元素居中：margin:0,auto;
  • 行内元素居中：父元素 text-align:center;

• 区别：

  （1）行内元素不会独占一行，而块级元素会独占一行。
  （2）块级元素可以设置 width, height属性，行内元素设置width, height无效。 【注意：块级元素即使设置了宽度，仍然是独占一行的】
  （3）块级元素可以设置margin 和 padding.
  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right
  都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

• 把行内元素变成块级元素：

                      display:block; 
                      display:inline-block;  /*行内块，变成块级元素并且在一行*/
  

  WebStorm注释：ctrl+shift+/
  html注释： <!--注释文本-->
  css注释： /*注释文本*/
  背景透明：png
  一般色彩丰富的banner图：jpg（压缩损失小）
  按钮，比较小的动图：gif（损失大）
  利用浮动清空掉图片间的缝隙。
  <a></a> 内元素属性需要单独定义，其不会继承父元素的属性。

 border-radius:10px;/*圆角效果*/
 border-radius:50%;/*在宽高相等时，变为圆*/
 vertical-align:top;/*垂直对齐方式top/bottom/middle*/
 outline:none;/*文本框获取焦点时去边框*/
 cursor: pointer;/*鼠标变成手状*/
<p>版权信息：&copy;软件技术系所有</p>/*圈c的输入方法*/

4.定位

<style>
     div{
     position:relative;/*相对定位*/
     position:absolute;/*绝对定位*/
     position:fixed;/*固定定位*/
     position:static;/*默认*/
     }
</style>

• position和top，bottom，left，right在一起使用；

• 相对定位是以原来默认位置相对发生位移（在原来地方还占空间），绝对定位是以它的父元素为参考点发生偏移，父元素没有相对定位或没有父元素的话，就是以浏览器为参考点。（不占空间）；

• 当浮动时加定位，浮动就不起作用了（两个不能一起用）；

• 使用absolute要定义父元素为relative ，父元素给相对定位和宽高即可，不用给top和right，定义绝对定位要定义元素的水平、垂直位置；

• 固定定位：页面侧边栏，即元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动；
  static定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left,right影响。

• 没有定位的话必须加行内块，否则元素的宽高不起作用。

• 空格：后代选择器，父元素下的子元素和后代元素都是一个样式；
  大于：父子选择器，不继承，仅仅父元素下的子元素是此样式。
  行高、字体大小、颜色等属性，除了不会继承，其他元素会继承父元素的属性。

5.

• 上下层叠样式：z-index:-1px;

    元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。
  

• 隐藏元素：
  display:none; 默认隐藏，相当于没写， 不占地方，还可以放其他东西.
  visibility:hidden; 可以隐藏某个元素，该元素虽然被隐藏了，但仍然会影响布局。
  二级菜单一般用 display:none;

• 雪碧图：不容易丢失图片。

• 有下拉菜单的超链接用ul>li做好。
• 小三角的定义：

<div style="">
border-top:10px solid #FFFFff;
border-left:10px solid #FF3300;
border-bottom:10px solid #FFFFff;
</div>
<p>&nbsp;</p>
<div  style="">
width:0px;
border-left:10px solid #FFFFff;
border-bottom:10px solid #FF3300;
border-right:10px solid #FFFFff;
</div>

效果图：

Google: F12 检查代码 ，* 代表通配符。

• CSS定义通用样式： 新建commen.css

*{
    margin:0;
    padding:0;/*清零*/
}
body{
    font:14px Arial,"微软雅黑";
}
.fl{
    float:left;/*左浮动*/
}
.fr{
    float:right;/*右浮动*/
}
a{
    text-decoration:none;/*去掉超链接的下划线*/
}
ul,li{
    list-style:none;/*去掉列表前的点*/
}
.clear{
    clear:both;/*清空浮动*/
}