定位属性居中
水平垂直居中
/* 居中元素Add CSS*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*居中元素根据内容给出宽度,也就是说可以居中包裹的子元素,但子元素宽度如果宽度超出550px将自动换行。*/
方式2:
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
margin: auto;
方式3:
/* 父元素Add CSS*/
width: 600px;
height: 600px;
display:flex;
/* 居中Add CSS*/
margin:auto;
/* 居中元素根据内容给出宽度,也就是说可以居中包裹的子元素,但子元素宽度超过祖先元素宽度将自动换行。*/
水平居中
方式1:
/* 居中Add CSS*/
width: 600px;
height: 600px;
margin:0 auto;
方式2:
/* 父元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
left:50%;
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
right:50%;
水平居中内联元素
父元素Add CSS
width: 600px;
text-align: center;
垂直居中内联元素
父元素Add CSS
height: 500px;
line-height: 500px;
定位的元素控制层叠顺序
position:abstract;
z-index:-1;
清除浮动的影响
1 父元素添加样式
overflow:hidden
2 父元素添加样式
overflow:auto
3 浮动元素后加空标签,并设置样式
clear:both
4 父元素设置宽高
5 父元素添加样式
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
让文字消失
父元素Add CSS
display: block;
text-indent: -999em;
图片处理
图片等比缩放
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
图片大于父元素居中
pa{text-aline:center;}
son{margin:0 -100%}
!important 增加样式权重 语法:
样式名:值 !importan;
图片元素在相对于内联元素垂直居中
vertical-align: middle;
屏幕惯性滚动
-webkit-overflow-scrolling:touch
网站前端三剑客之一CSS,网页表示层。
<link href="css/index.css" rel="stylesheet"> 外联样式
<style type="text/css"></style> 内部样式
<div style="属性: 值"></div> 标签样式
参考属性
尺寸
width 设置元素的宽度。
height 设置元素高度。
max-width 设置元素的最大宽度。
min-width 设置元素的最小宽度。
border 边框
border: 1px solid red; 设置四条边框的线宽、样式、颜色
border-top: 1px solid blue; 设置上边框的线宽、样式、颜色
background 背景
background-color: red; 设置背景的颜色;
background-image: url("images/background01.jpg"); 设置背景图像
background-position: center; 规定背景图像的位置。
background-size: 100%; 设置背景图像的大小。
background-repeat:noset; 设置背景图像重复规则。
background-origin: border-box; 设置背景图像在边框或在内容中显示。
background-clip:padding-box 设置背景在内边距或在内容中显示。
background-attachment:fixed; 设置背景图像是否固定或者随着页面的其余部分滚动。
display 元素显示类型
display:inline-block 内联块元素
① 元素并在一行 ② 支持全部样式
③ 宽高由内容决定 ④ 元素换行会产生间距
position 定位类型
position:relative; 相对定位 以自身元素进行定位,占据偏移前的位置
position:absolute; 绝对定位 以有定位属性的父级元素边界进行定位,直到body,不占位置
position:fixed; 绑定定位 以浏览器窗口进行定位,不占位置
top/right/buttom/left 与定位元素一同使用
float 浮动
float:left 左浮动
①浮动元素自动转换成内联块元素 ②浮动元素脱离标准流
③浮动元素停靠在父元素边界、其他浮动元素、未浮动元素
overflow 内容溢出
overflow:hidden; 隐藏溢出内容
vertical-align 垂直对齐
visibility 可见
z-index 堆叠顺序
边距
padding 内边距
padding: 5px; 设置四个方向的内边距
margin 外边距
margin: 5px; 设置四个方向的外边距
文本
text-align 文本对齐
text-align: center; 文本水平居中
line-height 行高
line-height:自身高度; 文本垂直居中
color 文本颜色
font 字体
font-family 设置字族
font-amily:"Microsoft yahei","宋体"; 设置第一、第二字体
font-size
font-size:14px; 14px大小的字体
outline 轮廓
transition 过渡
transition-property 需要过渡的属性名
transition-duration 持续时间
transition-timing-function 时间曲线
transition-delay 延时过渡
2D转换
transform
transform-origin 更改转换元素的位置
rotate(angle) 旋转角度
translate() 根据左和顶部位置给定的参数,从当前元素位置移动。
scale() 该元素增加或减少的大小(宽高)
动画
@keyframes 创建动画
animation 绑定动画