1.定位 static:常规默认值 relative:相对定位,参照自身文档流中的位置进行偏移。 absolute:绝对定位,参照离自身最近的定位祖先元素进行定位,脱离了文档流。 fixed:参照视图窗口定位 2.布局 display改变元素的显示方式,具体值为:
none隐藏对象 inline内联元素 block块元素 inline-block内联块元素 run-in根据上下文决定是内联还是块级元素 flex弹性伸缩盒 inline-flex内联块级弹性伸缩盒float浮动,具体值为:
left左浮动 right右浮动clear清除浮动,具体值为:
left清除左浮动right清除右浮动both清除所有的浮动visiblity是否显示,具体值为:
visible 设置对象可视hidden 设置对象隐藏overflow内容溢出,具体值为:
hidden 隐藏溢出的内容scroll 隐藏溢出的内容,溢出的内容以滚动条的方式呈现auto 当内容没有溢出的时候不出现滚动条,当内容溢出的时候出现滚动条3.尺寸 width:宽度 min-width:最小宽度 max-width:最大宽度 height:高度 min-height最小高度 max-height最大高度
4.外边距 margin:可写4、3、2、1这几个值,4个值代表距上,右,下,左;3个值代表距上,左右,下;2个值代表上下,左右;1个值代表上右下左都是一样的大小。 margin-top:距离上边距离 margin-right:距离右边距离 margin-bottom:距离底部距离 margin-left:距离左边距离
5.内边距 padding:与margin一样就不说了 padding-top:距离上边距离 padding-right:距离右边距离 padding-bottom:距离底部距离 padding-left:距离左边距离
6.边框 border:可以将一些值放在一起 例:border: 1px solid red; border-width:边框宽度 border-style:设置边框样式 border-radius:边框圆角化 box-shadow:设置阴影 border-image:边框图片
7.背景 bakground:背景 background-color:背景颜色 bakground-image:背景图片 background-repeat:是否平铺 bakground-attachment:背景是否跟随内容一起滚动 background-position:设置背景图像在布局中的位置 bakground-size:背景图片的大小
8.颜色透明度 color opacity
9.字体 font font-weight:文字粗细 font-size:文字大小 font-family:文字字体
10.文本 text-transform:设置文本的大小写 white-space:设置空格的处理方式 word-wrap/overflow-wrap:设置超过指定容器的边界的时候是否换行 text-align:文字对齐方式 text-align-last:强制打断的行或者最后一行的对齐方式 word-spacing:单词之间的间距 letter-spacing:字符之间的间距 vertical-align:设置内联元素的垂直对齐方式 line-height:设置行高
11.文本装饰 text-decoration:文本装饰 text-decoration-line:设置文本装饰线的位置 text-decoration:设置文本装饰线的颜色 text-decoration:设置文本装饰线的样式 text-decoration-skip text-underline-position text-shadow:文字阴影
12.列表 list-style:列表样式 list-style-type:列表项目的标记 list-style-position:标记的位置 list-style-image:标记的图像
13.用户界面 text-overflow zoom:设置缩放比例 box-sizing:设置盒模型的组成方式
14.转换 transform: translate:平移效果 scale:放大或者缩小 rotate:旋转 skew:倾斜 transform-origin:以某个原点进行转化 perspective:设置观察者的位置 perspective-origin:改变观察者的基准点 transform-style:设置转化的3D效果
15.过渡 transition: transition-property:过渡属性 transition-duration:过渡时间 transition-timing-function:过渡的效果 transition-delay:延迟过渡
16.动画 Animation:@keyframes创建动画 animation-name:调用动画名称 animation-duration:动画的时间 animation-timing-function:动画的效果 animation-delay:动画的延迟 animation-iteration-count:动画的次数 animation-direction:动画缓动的方向 animation-play-state:停止动画 animation-fill-mode:动画时间之外的状态
17.媒体查询 @media 设备名 only (选取条件) not (选取条件)and (设备选取条件),设备二{sRules}