css基础

1.css的编写方式

（1）优先级最高的行内样式         直接使用style属性写在开始标签中          针对一个标签

（2）内部样式表

在head标签中使用style标签包裹           

样式选择器 {样式语句}                针对当前html内所有满足的标签

（3）外部样式表

写在css文件中，通过link引入html                       一般先引入外部样式表，再编写内部样式表          

针对多个html

2.css选择器

（1）4种基本选择器

*        通配符选择器        选择所有标签

tag    标签选择器           匹配固定标签

.类名    类名选择器       匹配拥有类名的标签

#id     id选择器         匹配拥有id的标签

（2）5种符号选择器

,                 逗号左右满足一个即可

空格          子孙选择器

>               子级选择器

+               相邻下一个

~               下面多个

（3）其他选择器

属性  [attr]  拥有属性   [attr=]  拥有属性并且值等于    [attr^=]  拥有属性并且值以开头    [attr$=]

拥有属性并且值以结尾

伪类  状态  :hover  鼠标划入  :active  鼠标点下

顺序  :first-of-type  第一个       :last-of-type  最后一个      nth-of-type(n)   正数第n个         nth-last-of-type(n)  倒数第n个        n从1开始    odd  奇数  even  偶数

在正常选择器之后使用

3.css样式属性

（1）字体相关 font-

family  类型  多个字体使用逗号隔开

size  大小  默认是16px

weight  粗细  400 normal  700  bold

style  italic  斜体

（2）文本相关  text-

transform  capitalize  首字母大写  lowercase  全小写  uppercase  全大写

align  left 默认  center 居中  right  居右

indent  缩进  2em  2*font-size

decoration  none  去除下划线

（3）背景

color  背景色             image  图片  优先级高           repeat  重复  no-repeat           position  位置       left、right、center、top、bottom    100px 500px                size  100%  contain  长边展示完全  短边补空  cover  短边展示完全  长边隐藏

（4）列表    list-style  type  circle  空心圆  disc  实心圆  square  方块  lower-alpha  小写字母    lower-roman  罗马数字

position  outside  外侧      inside  内侧

image  url()             list-style:none  去除所有样式

4.css包围盒

一个元素占用空间信息

boder 上下左右  width style color 1px solide red

padding  内补 只有宽度  使用自己背景色

margin  外部 只有宽度    使用父元素背景色

padding 与 margins支持四种写法

一个数值  上下左右一样

二个数值  上下，左右

三个数值  上，左右，下

四个数值  上，右，下，左

更改包围盒计算方式  border-box  给定宽高包含边框和内补

5.css中的display

inline  行内元素  不可以给宽高

block  快元素，站一行，可以给宽高

inline-block  行内快，多个块在一行，可以给宽高

none  隐藏

6.css中的定位

static  静态定位  从左向右，从上向下排列

relative  相对定位  相对文档流静态定位 发生偏移

占用文档流位置

left

top

absolute  绝对定位  参考位置: 外层第一个非static的标签发生偏移  直到html    不占用文档流    left/top/right/bottom

fixed  固定定位  参考位置: 浏览器窗口

sticky  粘性定位  没有达到粘性位置  相当于静态定位  达到粘性位置  相当于固定定位

7.css浮动与清除

float  left  靠左排列  排列在上一个左浮动的右侧   right  靠右排列  排列在上一个右浮动的左侧

clear  left 左边不能有左浮动  right  右边不能有右浮动   both  清除左右浮动  后续元素不会被浮动元素覆盖

8.弹性容器

display:  flex

常用容器属性

flex-direction  row  row-reverse  columu  column-reverse

flex-wrap  wrap  no-wrap  wrap-reverse

justify-content             flex-start   主轴位置         flex-end   主轴结束位置         center   主轴居中      spance-between   中间有空白        space-around   两边中间都有空白

align-items     flex-start   交叉轴起始位置       flex-end   交叉轴结束      center   居中       当交叉轴方向只有一行使用交叉轴

align-content  flex-start   交叉轴起始位置   没有空白      flex-end   交叉轴结束   没有空白      center   居中   没有空白      当交叉轴有多行     使用多轴对齐

9.字体图标

自定义字体  @font-face   font-family: name   src:url()          font-family: name !important

iconfont   选择图标   加入购物车        下载字体文件        拷贝css与ttf          引入css,  使用对应的类名

10.渐变与动画

transition   all 0.5s linear

动画   animation   @keyframes name   0%{}   100%{}

animation: name 0.5s linear infinite

transform   rotate(）   translate()   scale()