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 可选。阴影颜色