1.CSS盒子模型 (box model)
CSS盒子模型是在网页设计中常用CSS技术所使用的一种思维模型,CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际的内容,通过对这些属性的设置可以丰富盒子的表现效果。
2.W3C标准|标准盒子模型 box-sizing: content-box;
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
3.IE盒子模型|怪异盒子模型box-sizing: border-box;
一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
4.CSS盒子模型的组成
content内容
内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等,内容区有三个属性width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时,溢出部分将不可见;为visible时,溢出的内容信息可见,只是被呈现在盒子的外部;当为scroll时,滚动条将被自动添加到盒子中,用户可以通过拉动滚动条显示内容信息;当为auto时,将由浏览器决定如何处理溢出部分。
padding内边距
内边距在边框和内容之间的距离。
border边框
边框围绕在内边距和内容外,border-style边框线样式: solid实线, dashed虚线, dotted点线,double双实线。 border-width边框宽度。 border-上下左右-width。border-color 边框颜色。 border-top /right/bottom/left单独一条边。
margin外边距
外边距在边框外周围的区域,它没有背景颜色,是完全透明的。
5.CSS盒子模型的定位position
<!-- 定位
static默认值
relative相对定位,相对浏览器定位,不脱离文档流
fixed固定定位
absolute绝对定位,脱离文档流,寻找父级是否有相对定位,如果有根据父级定位,
如果没有找到会忘父级的父级寻找,直到浏览器,才会根据浏览器定位
sticky粘性定位 -->
二
1. CSS overflow:设置当对象的内容超过其指定高度及宽度时如何管理内容的属性,是添加滚动条、还是隐藏剪切超出内容
overflow:hidden;溢出隐藏
visible默认值
scroll内容超过固定区域会出现滚动条
auto内容超出固定区域出现滚动条否则不出现
overflow-x:hidden;隐藏横向滚动条
overflow-y:hidden;隐藏纵向滚动条
2.关于选择器
后代选择器(以空格 分隔)
所有子元素选择器(以大于 > 号分隔)
相邻兄弟选择器(以加号 + 分隔)
所有普通兄弟选择器(以波浪号 ~ 分隔)
3.关于兼容
-khtml-苹果浏览器
-webkit-opacity兼容谷歌浏览器
-o-opacity兼容Opera浏览器
-moz-opacity兼容火狐浏览器
-ms-兼容IE,普通样式属性
{
兼容IE浏览器
opacity:0.5;
filter:alpha(opacity=50);
50指的是百分之50%
}