CSS2

盒子模型

• 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
• Margin(外边距)：元素与其他元素的距离（边框以外的距离），外边距是透明的，需要修改-style才能看见，设置负像素有效果，效果会体现在父标签上，但如果给父级标签添加边框，效果就不会体现
  • margin复合样式
    • auto：左右居中，没有上下居中
    • margin-left:auto：左居中
    • margin-right:auto：右居中
  • margin-top上外边距，margin-bottom下外边距：取两者之间的较大值
  • margin-right右外边距，margin-left左外边距：取两者的和
  • overflow:hidden;：解决内边距重叠问题，超出隐藏，清除浮动
• Border(边框) - 围绕在内边距和内容外的边框
  • border复合样式：width style coloe
  • border-color边框颜色
    • 一个值的时候代表四个方向值一样，顺序为：上 右 下 左
    • 两个值的时候：上下 右左
    • 三个值的时候：上 下右 左
    • 四个值的时候：上 右 下 左
  • border-width边框宽度
  • border-style边框样式
    • solid:实线
    • dashed:虚线
    • dotted:点线
    • double:双边框
  • border-left左边框
    • -width
    • -style
  • border-right右边框
  • border-top上边框
  • border-bottom下边框
  • border-radius: 50%：圆角度（50%是一个圆）
• Padding(内边距)：边框与内容之间的距离，内边距是透明的
  • padding复合样式
  • padding-top上内边距
  • padding-bottom下内边距
  • padding-right右内边距
  • padding-left左内边距
• Content(内容) - 盒子的内容，显示文本和图像
• display:inline-block：排列在同一行
• opacity:百分比：透明度
• vertical-align:middle/top/botton：对齐
• 一个盒子的大小，就是：内容高宽 + 内边距 + 边框
  

CSS浮动

• 其实就是对齐在同一行
• 完全可以用display代替
• 浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流
• 优点：使元素脱离文档流，按照指定的(左右)方向移动，遇到父级边界或者相邻元素停下来，即遇到父元素或者别的浮动元素，浮动元素不占空间
• 缺点：浮动会带来高度塌陷的问题

浮动的实现

• float设置浮动，float:left为左浮动

解决高度坍塌的办法

• 给父级增加高度（不推荐使用）
• 给父级加 overflow：hidden，即设置超出部分隐藏，但如果是导航栏有下拉元素也会被隐藏
• 添加一个空的div，通过子级元素撑起来，会增加无意义元素
• 使用伪元素：.clearfix（:after{ content: ""; display: block; clear: both;}）即添加括号中的内容，也可以用before，before是在前面添加伪元素

CSS定位

• static 静态定位(没有定位)，默认
• fixed 固定定位，相对于浏览器窗口进行定位方形词； left 、right、 top、 bottom
• relative 相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置
• absolute 绝对定位，没有占据位置，使元素完全脱离文档流； 没有定位父级，则相对整个文档发生偏移； 参考最近非static定位的父级进行定位

<style>
	
	.rap{
	width:200px;
	height:200px;
	background:red;
	/*固定定位*/
	position:fixed;
	botton:0;
	right:0;
	
	/*相对定位*/
	position:relative;
	left:50px;/*只有定位之后才有这个属性，否则没有*/
	
	/*绝对定位*/
	position:absolute;
	/*没有父级的话相对于文档流定位*/
	/*有定位父级时，子相对于父级定位*/
	/*父级和定位父级是两个概念，定位父级是最近的父级*/
	left:50px;
	}
	
	/*层级：当多个窗口在一起的时候会有覆盖，那么到底该显示那个，可以通过层级来控制，z-index 默认都是0，可以通过这个来控制优先级*/
	.l1{
	z-index:1;/*默认都是0，数值越大，层级越高，类似ps的图层*/
	}
</style>

重置样式

• 浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致
• 公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS
• 我们可以使用别人提供的 ResetCSS 来去掉浏览器的样式，重新开始写自己的样式