盒模型
从内到外：content < padding < border < margin
border(边框)
同时设置四条边：
border-width:2px; /* 边框宽度 */
border-style:solid;
/* solid(单实线),double(双实线),dashed(虚线),dotted(点线)*/
border-color:white; /* 边框颜色默认和文字颜色保持一致*/
border:2px solid white; /* 组合写法(注意顺序)*/
四条边分开设置:
border-top:2px solid white;
border-left:2px solid white;
border-right:2px solid white;
border-bottom:2px solid white;
宽度组合写法：
border-width: 2px; /*四条边*/
border-width: 1px 2px; /*上下1px,左右2px*/
border-width: 1px 2px 3px; /*上1px,左右2px,下3px*/
border-width: 1px 2px 3px 4px; /*上1px,右2px,下3px,左4px*/
outline(轮廓线)
当某个元素获得焦点的时候会出现轮廓线,最典型的就是文本框
outline:2px solid red;
outline:none; （不要轮廓线）
outline与border的区别是什么？
1. outline不占页面空间,border占空间
2. outline不能四条边拆开设置
标准盒模型与怪异盒模型(IE盒模型)的区别
标准:width和height是不含border,padding的
怪异:width和height是包含border和padding
box-sizing(主流处理方案)
box-sizing:content-box; /* 默认情况 */
box-sizing:border-box; /* border和padding被包含在width,height之中*/
div{
width:100px;
height:100px;
box-sizing:border-box;
padding:10px;
}
最终在页面上,width和height会自动被减成 80 * 80
reset.css
通常会将通用的样式,比如去掉列表的点,去掉外边距,统一字体,统一字号等等。
这样可以比较好的兼容各浏览器,自己设置的尺寸不会受到影响
float
浮动会使元素脱离文档流,按照指定方向发生移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
float:left; /* 左浮动 */
float:right; /* 右浮动 */
float:none; /* 不浮动 */
特性:
1. 使块元素在一行显示
2. 脱离文档流
3. 提升层级
4. 内嵌元素自动转换为块元素
5. 不设置宽度的时,可以适应内容的宽度
清除浮动
1. clear:both; /*在浮动元素的最后加一个div设置clear*/
2. 父标签没有高度,子标签设置了浮动,此时父标签的高度就消失了
给父标签设置：overflow:hidden;
定位
position:static; /* 静态:默认值 */
position:relative; /* 相对定位 */
position:absolute; /* 绝对定位 */
position:fixed; /* 固定定位 */
relative:提升层级,可以使用left,right,top,bottom从原始位置进行偏移
absolute:提升层级,也可以使用left,right,top,bottom从已经定位的父元素
左上角进行偏移,如果父元素没有定位,就从html(页面左上角)偏移
脱离文档流
fixed:与绝对定位类似,区别在于始终相对浏览器窗口进行定位
z-index （z-index: number定位层级;）
z-index:3;
1. 层级必须加给定位元素
2. 数值越大层级越高
3. 层级要在同级元素之间作比较
overflow
overflow:visible; /*内容溢出就溢出,内容会显示在元素外面 */
overflow:hidden; /*溢出的部分被隐藏*/
overflow:scroll; /*不论内容是否放得下,都会显示滚动条的*/
overflow:auto; /*内容放得下不出现滚动条,内容放不下出现滚动条*/
vertical-align(垂直对齐方式)
vertical-align:top; /* 顶部对齐 */
vertical-align:middle; /* 垂直居中 */
vertical-align:bottom; /* 底部对齐 */
vertical-align:baseline;/* 基线对齐(默认) */
特性：
1. 块元素用不了的
2. 给要垂直对齐的那个元素添加,而text-align是给父元素添加
display属性
以什么形态来显示当前元素
div{display:inline;} /*当成行内元素*/
b{display:block;} /*当成块元素 */
div{display:inline-block;} /*当成行内块元素(在一行且能设置宽高)*/
div{display:table;} /*当成表格*/
div{display:table-cell;} /*当成td/th*/
div{display:none;} /*隐藏当前元素*/
==
垂直且水平居中的四种方法
