6-css样式
背景颜色background-color
背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb
背景图片background-image
背景图片的大小可以和容器大小不一样
背景图片不会占位
如果容器大，背景图片小，背景图片会平铺 铺满整个容器
背景图片位置background-position
背景图片定位的值是两个单位，分别代表坐标x,y轴
背景图片定位的值可以是应为left,right,top,bottom,center
背景图片重复background-repeat
no-repeat数组图像不重复，常用
round自动缩放直到适应并填充整个容器
space以相同的间距平铺且填充整个容器
背景图片定位background-attachment
background-attachment:fixed
背景图像是否固定或者随着页面的其余部分滚动
background-attachment的值可以是scroll，fixed
background缩写
background: #ff0000 url(bg01.jpg) no-repeat fixed center
字体样式
字体族：font-family
字体大小：font-size
字体粗细：font-weight
font-weight：400
normal默认
bold加粗
bolder
lighter
字体颜色color
字体斜体：font-style
font-style:italic-
normal文本正常显示 -
italic文本斜体显示 -
oblique文本倾斜显示
文本属性
行高line-height
line-height:50px
可以将父元素的高度撑起来
文本水平对齐方式：text-align
left，center，right
文本所在行高的垂直对齐方式：vertical-align
baseline默认
sub垂直对齐文本的下标，和sub标签一样的效果
super垂直对齐文本的上标，和sup标签一样的效果
top对象的顶端与所在容器的顶端对齐
text-top对象的顶端与所在行文字顶端对齐
middle元素对象基于基线垂直对齐
bottom对象的底端与所在行的文字底部对齐
text-bottom对象的底端与所在行文字的底端对齐
文本缩进text-indent
text-indent:2em
通常用在段落开始位置的首行缩进
字母之间的间距letter-spacing
单词之间间距：word-spacing
文本的大小写text-transform
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母
lowercase定义仅有小写字母
文本的装饰text-decoration
none默认
underline下划线
overline上化线
line-through中线
自动换行word-wrap
word-wrap: break-word
基本样式
width,height
元素默认没有高度，需要设置高度，让元素的内容将元素撑高
鼠标样式cursor
定义鼠标的样式cursor:pointer
default默认，pointer小手形状，move移动形状
透明度opacity
opacity:0.3
透明度的值可以使0到1之间的数字，0代表透明，1代表完全不透明
透明的元素只是看不见，但是还占据文档流。
可见性visibility
visibility:hidden
visible元素可见
hidden元素不可见
collapse当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局
溢出隐藏overflow
设置当对象的内容超过其指定高度及宽度时如何显示内容
visible默认值，内容不会被修剪，会呈现在元素框之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
边框颜色outline
input文本框自带边框，且样式丑陋
outline:none清除边框
样式重置
清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线
盒模型样式
块状元素，内联元素，内联壮元素
元素分类转换display
block,将元素转换为块级元素
inline,将元素转换为行级元素
inline-block,将元素转换为内联块元素
none将元素隐藏
描边border
线条的样式：
dashed虚线,dotted点线，solid实线
css样式中允许只为一个方向的边框设置样式
下描边border-bottom
上描边border-top
右描边border-right
左描边border-left
间距margin
内填充padding
浮动float
浮动原理：浮动使元素脱离文档普通流，漂浮在普通流之上的
浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或向右浮动，
知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它
浮动会产生块级框，而不管该元素本身是什么
清除浮动带来的影响
clear清除浮动
none不清除,left不允许左边有浮动对象，right,both
利用伪类实现清除浮动
.clearFix{
content="";
display: block;
width: 0;
height: 0;
clear: both;
}
定位position
层模型，绝对定位（相对于父类）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute绝对定位，这条语句的作用加你个元素
从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个
具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
position:absolute
div{
width: 200px;
height: 200px;
border: 2px red solid;
position: absolute;
left: 100px;
top: 20px;
}
层模型-相对定位（相对于原位置）
position: relative
#div{
width: 200px;
height: 200px;
border: 2px red solid;
position: relative;
left: 100px;
top: 20px;
}
层模型-固定定位（相对于网页窗口）
position: fixed
本文地址：https://blog.csdn.net/qq_36232611/article/details/106089708