css样式2 布局 定位 层级 显示

css样式2 布局 定位 层级 显示

　　一、布局：定位，浮动，显示 ,盒子模型、层级 布局页面的时候：大色块 小色块 小色块...

　　　1、浮动：float:left right
　　　　设一个父标签，设定宽高，里面随便浮动
　　　　超出部分：overflow: hidden scroll
　　　　　　　　　　overflow-x
　　　　　　　　　　overflow-y
　　　2、盒子模型：
　　　　（1）从里到外：内容->内边距 -> 边框 -> 外边距
　　　　　　内容->padding->border->margin

　　　　（2）样式：盒子模型的样式分上　  下　　　左    右
　　　　　　　　　　　　　　　　　　top   bottom   left   right
　　　　　　①border:
　　　　　　　　正常写法：
　　　　　　　　　　border-left-width:1px;
　　　　　　　　　　border-left-style:solid;
　　　　　　　　　　border-left-color:#ccc;
　　　　　　　　简写 :
　　　　　　　　　　border-left:

　　　　　　②padding:
　　　　　　　　正常写法：
　　　　　　　　　　padding-left:22px;

　　　　　　　　简写：
　　　　　　　　　　padding:25px 50px 75px 100px;（上、右、下、左）
　　　　　　　　　　上填充为25px、右填充为50px、下填充为75px、左填充为100px

　　　　　　　　　　padding:25px 50px 75px;（上、左右、下）
　　　　　　　　　　上填充为25px、左右填充为50px、下填充为75px

　　　　　　　　　　padding:25px 50px;（上下、左右）
　　　　　　　　　　上下填充为25px、左右填充为50px

　　　　　　　　　　padding:25px;
　　　　　　　　　　所有的填充都是25px

　　　　（3）盒子模型自适应：box-sizing:border-box

　　　　（4）外边距：margin 第一个子标签设置margin会作用到父标签

　　　3、定位： 绝对定位 相对定位
　　　　　　position：fixed（绝对） absolute（绝对） relative（相对）
　　　　　　　　fixed：相对窗口定位 通过上下左右调位置
　　　　　　　　absolute:相对于body定位，相对于最近的有position样式属性的父标签定位，到body为止
　　　　　　　　relative:相对自身定位，通常用来限制子标签的absolute，有自身位置，通常用来微调

　　　4、层级：
　　　　　　z-index:

　　　5、显示：
　　　　　　display:none
　　　　　　visibility:hidden