字体和段落样式: 大小、粗细、下划线、行高、首字母大小写
color: red; 字体颜色red为红色
font-style: italic; 字体倾斜和下面的一样
font-style: obligue; 偏斜体和上面的一样
font-style: normal; 正常字体(没任何效果)
font-weight: bold; 字体加粗,为700像素
font-weight: bolder; 字体加粗:为900像素加粗
font-weight: normal; 字体加粗:为400像素就是不加粗
font-size: 20px; 字体粗细:为20像素,单位px
font-size: bold; 字体粗细:为700像素加粗
font-size: lighter; 字体粗细:为400像素
font-size: x-large; 字体大小为:特别大x和xx都可以
font-size: xx-small; 字体大小为:极小x和xx都可以
font-familg: 华为文云,楷提; 字体样式
text-decoration: underline; 文本装饰:下划线
text-decoration: overline; 文本装饰:上划线
text-decoration:none; 文本装饰:取消下划线
text-decoration:line-through; 文本装饰:删除线
text-transform: capitalize; 首字母大写(只对字母有效)
text-transform: lowercase; 全部小写 (只对字母有效)
text-transform: uppercase; 全部大写 (只对字母有效)
text-indent: 2em; 首行缩进:2字符单位em,也可以写xp
word-spacing: 10px; 词间距英文单词之间,单位px
letter-spacing: 10px; 字间距所有字符之间,单位px
line-height: 10px; 行高10像素,单位px
line-height: normal; 行高正常(没任何效果)
对齐方式:
legt左/center中/right右/top顶端/middle居中/bottom底部/baseline基线对齐
text-align: justifg; 两端对齐
text-align: legt; 左对齐
text-align: center; 中对齐
text-align: right; 右对齐
vertical-align: top; 顶部对齐、(针对行内元素、行内块元素有效)
vertical-align: middle; 居中对齐、(针对行内元素、行内块元素有效)
vertical-align: bottom; 底部对齐、(针对行内元素、行内块元素有效)
vertical-align: baseline; 基线对齐、(针对行内元素、行内块元素有效)
图片+背景+背景图片的属性+图片重复(精灵图):
background-repeat: no-repeat; 图片不重复
background-repeat: repeat-x; 图片垂直(上下)方向重复
background-repeat: repeat-y; 图片水平(左右)方向重复
background-attachment: fixed; 固定
background-attachment: scrou; 滚动
background-image: url(图片路径); 背景图片
background-size: 100px 100px; 背景图片宽、高(大、小),单位px
background-position: center center; 水平方向( legt左/center中/right右),垂直方向(top上/cerlter中/bottom下)
background: #000 url() no-repeat fixed top; 简称:颜色,路径,不重出,固定,上;
background-position: x y; 背景图片(精灵图)x是方向左右也y是方向上下
background-color: red; 背景颜色为红色,默认transparent(透明色)
background: rgba(0,0,0,0.3); 背景透明(只有0.3这个可以改);
background: linear-gradient(颜色,颜色); 背景颜色渐变(可以设置多种颜色)
background: radial-imageg- radient(角度deg 颜色, 颜色 10%, 颜色 20%); 重复线性渐变
background: radial-radient-imageg (颜色, 颜色 10%, 颜色 15%); 重复的径向渐变
background-repeat: repeat;
项目符号:ui标签里面的li
list-style-type: disc; 实心圆项目符号(默认)
list-style-type: circle; 空心圆项目符号
list-style-type: spuare; 实心放块项目符号
list-style-type: none; 取消项目符号
list-style-image: url(图片地址); 便用图片作为项目符号
list-style-position: inside; 项目符号位置,在里面
边框:
border:10px red solid; 边框:粗细 颜色 实现solid
border:10px red dashed; 边框:粗细 颜色 虚线dashed
border:10px red dotted; 边框:粗细 颜色 点线dotted
盒子属性:边框、圆角 、内填充、外填充 、浮动、溢出、行内块
盒子标签: <div>内容</div>
border:10px red solid; 边框:粗细 颜色 实现solid
border:10px red dashed; 边框:粗细 颜色 虚线dashed
border:10px red dotted; 边框:粗细 颜色 点线dotted
border-radius: 20px 20px 20px 20px; 圆角矩形:左上角、右上角、右下、左下
border-radius: 20px 20px 20px; 圆角矩形:左上、右上右下、左下
border-radius: 20px 20px; 圆角矩形:左上右上、右下左下
border-radius: 20px ; 圆角矩形:四角
padding: 20px 20px 20px 20px ; 内填充属性(边框大小):上 右 下 左
padding: 20px 20px 20px ; 内填充属性(边框大小):上、右 左、下
padding: 20px 20px ; 内填充属性(边框大小):上 下、右 左
padding: 20px; 内填充属性(边框大小):四角
padding-top: 100px; 内填充-上,内容到边框之间距离
padding-right: 100px; 内填充-右,内容到边框之间距离
padding-bottom: 100px; 内填充-下,内容到边框之间距离
padding-left: 100px; 内填充-左,内容到边框之间距离
margin-top: 100px; 外边距-上,边框与边框之间的距离
margin-right: 100px; 外边距-右,边框与边框之间的距离
margin-bottom: 100px; 外边距-下,边框与边框之间的距离
margin-left: 100px; 外边距-左,边框与边框之间的距离
float: left; 左浮动
float: right; 右浮动
float: none; 取消浮动
clear: both; 清除所有浮动
clear: left; 清除左浮动
clear: right; 清除右浮动
clear: none; 不清除浮动
overflow: hidden; 溢出的内容会被隐藏
overflow: visible; 溢出的内容任然显示(默认)
overflow: auto; 溢出的内容多的话盒子会默认显示滚动滑轮,不多不显示滑轮
overflow: scroll; 溢出的内容盒子默认显示滚动滑轮
white-space: nowrap; 强制在一行内显示,不换行
text-overflow: ellipsis; 当前内容超出,出现省略号
display: inline; 行内元素,(不读占一行,不可设置宽高)
display: block; 块级元素,(不读占一行,可设置宽高)
display: inline-block; 行内块元素,(不读占一行,不可设置宽高)
display: flex; 自适应布局
display: none; 不显示
margin: 0 auto; 块级元素水平居中
box-sizing: border-box; 固定盒子大小
position:fixed; 固定定位
position:relative; 可以和页面一起动的定位
定位:绝对定位、相对定位
## 省略号 ##
white-space:nowrap;强制一行
overflow:hidden;溢出隐藏
text-overflow:ellipsis;省略号
## overflow溢出 ##
* overflow: hidden;溢出隐藏
* overflow: visible;溢出可见(默认)
* overflow: auto;自动:如果有溢出的内容,盒子会显示滚动条
* overflow: scroll;内容被修剪,超出的内容可以通过滚动条查看
* overflow-x: auto;内容超过指定宽度的时候显示滚动条(要加上强制一行才会有效果white-space: nowrap;)
* overflow-y: auto;内容超过指定高度的时候显示滚动条
## visibility设置可见 ##
* visibility: hidden;隐藏内容,但是占用空间
* display: none;隐藏内容,但是不占用空间
## 相对定位 ##
position:relative;相对于它自己原来的位置来说
注意:要与top、bottom、left、right联合使用
## 绝对定位 ##
position:absolute;相对于浏览器来说
注意:要与top、bottom、left、right联合使用
## 静态定位 ##
position:static;默认
## 固定定位 ##
position:fixed;生成固定定位的元素,相对于浏览器窗口进行定位
注意:可与top、bottom、left、right联合使用
html:盒子、浮动、定位
父相子绝:父元素用相对定位,子元素用绝对定位
## 层叠顺序 ##
z-index: 数值(不要加单位);
* 数值为整数(负整数、0、正整数)
* 数值越大,层叠级别越高