这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
背景样式:
background-color 背景色
background-image 背景图
url(背景地址)
background-repeat:背景图片的平铺方式 repeat-x:x轴平铺 repeat-y:y轴平铺 repeat(x,y)x,y平铺 no-repeat都不平铺
background-position:背景图片的位置 x,y
background-attachment:背景图随滚动条的移动方式 scroll:默认值(背景位置是按照当前元素进行偏移的)fixed(背景位置是按照浏览器进行偏移的)
边框样式:
border-style:边框样式 solid:实线 dashed:虚线 dotted:点线
border-width:边框大小 px。。。
border-color:边框颜色
border-radius:设置圆角 四个值
字体类型:
font-family
字体大小:
font-size (单位:px)
字体粗细:
font-weight
字体样式:
font-style :斜体:*italic* 倾斜:*oblique*
文本修饰(text-decoration):
下划线:underline
上划线:overline
删除线:line-through
文本大小写(text-transform):
大写:uppercase
小写:lowercase
首行缩进:
text-indent(em为单位)
文本行高:
line-height(定义行高)
文本对齐:
text-align(right。。)
文本装饰线:
text-decoration(可选值(underline:下划线 line-through:删除线 none:删除装饰线))
文本选中(不可选中):
user-selcet(none:文本不可选中)
文本换行:
white-spaceno(wrap不换行 normal:文本正常换行)
文字超出部分显示状态:
text-overflow:ellipsis
垂直对齐:
vertical-align
字之间的间距:
letter-spacing
词之间的间距:
word-spacing
容器的边距:
padding 内边距填充:只写一个值(上下左右) 二个值(上下、左右) 四个值(上、右、下、左)
内容边框:
content
外边距(外填充):
margin 与(paddding一样)
transform:rotate()旋转多少度 deg度数 scale()变形放大 animation:调用 动画 infinite alternate无限交替
单独控制元素显示状态:
visibility (隐藏:hidden 显示:visible)
设置元素的不透明值:
opacity(0-1)
轮廓属性:
和边框一样:(outline)不会改变元素的实际所在区域
盒子阴影:
box-shadow写法:x轴 y轴 颜色 进阶写法:x y 模糊半径 扩散范围 颜色 阴影指定扩散方向: 默认值:outset:向外扩散 inset:向内扩散
盒子模型:
box-sizing 怪异盒(border-box) 标准盒(content-box)
圆角属性:
border-radius
最大宽度:
max-width 盒子最大到多少,盒子可以小于多少,小于多少盒子自动缩小
最小宽度:
min-width 保证盒子不能小于多少,盒子会正常显示