css基础（2）

css盒子模型

内边距

padding-top/bottom/left/right :px；

 padding会影响盒子本身大小，如果要盒子大小不变，让width和heigth减去多出来内边距即可。盒子没有指定宽度高度时padding不会撑大盒子

外边距

margin-top/botton/left/right:px；

块级盒子实现水平居中：盒子必须指定宽度，左右外边距设置为auto，行内，行内块元素水平居中：给父与元素添加 text-align：center；

边框

 border：大小  样式 颜色

如果不定义边框的样式，边框粗细和颜色都无法显示。   border-style：none无边框

 soild实线

dotted 原点边框，圆点半价是border-width值的一半

 dashed 虚线边框

double 双实线，宽度是border-width

 border-radius: px或百分比;

正方形变为圆形：设置为高度的一半，可以用百分比设置 

矩形变为圆角矩形：把设置高度的一半设置两个值时，对角线角修改

设置四个值时。按顺时针修改角

css浮动

 float: left / right /none;

清除浮动方法任选其一即可

给父元素添加双伪元素 

.clearfix::before,.clearfix:after {

            content: "";

            display: table;

  }

 .clearfix:after {

            clear: both;

 }

 .clearfix {

            *zoom:1;

}

给父元素添加after属性 

.clearfix:after {

            content: "";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

 }

.clearfix {

            *zoom: 1;

 }

给父元素添加overflow:hidden 属性 无法显示溢出的部分

css定位

子绝父相

 z-dindex：正数/负数/auto

 数越大优先级越高，如果数值相同按顺序后来居上

相对定位：position：relative；

相对定位会占有原先位置，它是相对与自己原来的位置移动的

绝对定位：position：absolute：

绝对定位不占有原先位置， 绝对定位在移动位置时，是按照祖先元素来移动

固定定位：position ：fixed

把某元素定位在浏览器可视区里，元素不会随浏览器滚动而移动，以浏览器可视窗口为准移动，跟父元素没有关系不占原先位置

css元素显示与隐藏

display:none 不保留原来位置

 visibility：visible 元素可见

visibility：hidden  元素隐藏 保留原来位置

overflow：visible 默认全部显示

overflow：hidden  隐藏超出的部分

overflow：scroll  添加滚动条显示超出部分，不超出也添加

oberflow：auto  在需要的时候添加滚动条

css盒子阴影

盒子阴影 ：box-shadow:

 h-shadow 必须写。水平阴影位置，允许负值

 v-shadow 必须写。垂直阴影位置，允许负值

blur 可选。模糊距离

spread 可选。阴影尺寸

color 可选。阴影颜色

 inset 可选。将外部阴影改为内部阴影，不写默认为外阴影，阴影不占用空间

文字阴影 ： text-shadow

h-shadow 必须写。水平阴影位置，允许负值

v-shadow 必须写。垂直阴影位置，允许负值

blur 可选。模糊距离

color 可选。阴影颜色