CSS笔记05

盒子模型

CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。

盒子边框（border）

1.盒子边框写法总结表

设置内容	样式属性	常用属性值
上边框	border-top-style:样式;border-top-width:宽度;border-top-color:颜色；border-top:宽度 样式 颜色
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色
样式综合设置	border-style：上边【右边，下边，左边】	none 无（默认）、solid单实线、dashed虚线、dotted点线、都变了双实线
宽度综合设置	border-width：上边【右边，下边，左边】	像素值
颜色综合设置	border-color：上边【右边，下边，左边】	颜色值、#十六进制，rgb(r,g,b)
边框综合设置	border:四边宽度，四边样式，四边颜色

2.表格的细线边框

table{border-collapse：collapse;}collapse单词是合并的意思
border-coolapse：collapse；表示边框合并在一起

3.圆角边框

语法格式：

border-radius： 左上角 右上角 右下角 左下角

内边距（padding）

padding属性用于设置内边距，是指边框与内容之间的距离。

1. padding-top：上内边距
2. padding-bottom：下内边距
3. padding-left：左内边距
4. padding-right：右内边距

值的个数	表达意思
1个值	padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值	padding:上下边距 左右边距 比如padding：3px 4px;表示上下3px，左右4px
3个值	padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

1. margin-top：上外边距
2. margin-bottom：下外边距
3. margin-left：左外边距
4. margin-right：右外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

content宽度和高度

1. 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）
2. 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边边距合并的情况
3. 如果一个和种子没有给定宽度/高度或者继承父亲的高度/宽度则padding不会影响本盒子大小

盒子模型布局稳定性

根据稳定性来分：
优先使用宽度（width）>内边距（padding）>外边距（margin）
原因：

1. margin会有外边距合并还有ie6下面margin加倍的bug，所以最后用
2. padding会影响盒子大小，需要进行加减计算其次使用

盒子阴影

语法格式：

box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

值	描述
h-shadow	必需—水平阴影的位置，允许负值
y-shadow	必需—垂直阴影的位置，允许负值
blur	可选—模糊距离
spread	可选—阴影的尺寸
color	可选—阴影的颜色
inset	可选—将外部阴影outset改为内部阴影

浮动（float）

普通流（normal flow）

普通流：实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动（float）

浮动：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
其基本语法格式如下：

选择器{float：属性值；}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动

清除浮动

清除浮动本质：清除浮动主要为了解决父级元素因为子级元素浮动引起内部高度wei0的问题

1.清楚浮动方法：
在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear：属性值}

属性值	描述
left	不允许左侧有浮动元素（清楚左侧浮动的影响）
right	不允许右侧有浮动元素（清楚右侧浮动的影响
both	同时清楚左右两侧浮动的影响

2.额外标签法

<div style="clear:both"></div>

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。
3.父级添加overflow属性方法
可以通过出发BFC的方法，可以实现清楚浮动效果
4.使用before 和after双伪元素清楚浮动
使用方法：

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

定位（position）

定位属性

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2、定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position：属性值；}
position属性的常用值

值	描述
static	自动定位
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

叠放次序（z-index）

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其趣致可为正整数、负整数和0.
注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

元素的显示与隐藏

display显示

display设置或检索对象是否及如何显示。
display：none隐藏对象 与它的是display：block除了转换为块级元素之外，同时还有显示元素的意思
特点：隐藏之后，不再保留位置

visibility可见性

设施或检索是否显示对象
visible：对象可视
hidden：对象隐藏
特点：隐藏之后，继续保留原有位置

overflow溢出

检索或设置当对象的内容超过其制定高度及宽度时如何管理内容。
visible：不简洁内容也不添加滚动条。
auto：超出自动显示滚动条，不超出不现实滚动条
hidden：不现实超过对象尺寸的内容，超出的部分隐藏掉。
scroll：不管超出内容否，总是显示滚动条。