``` 1.CSS基础语法格式：选择器{属性1：值1；属性2：值2；}//最后一个值的后面“；”可以要可以不要单位： 1.px像素 2.%百分比父容器 -> 600px, 当前容器 -> 300px 基本样式： width、height、background-color 注释： /*内容*/ 2.CSS样式的引入方式 1.内联样式 style属性 2.内部样式 style标签区别：内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开 3.外部样式引入一个单独的CSS文件，name.css 使用标签引入外部资源，rel属性指定资源跟页面的关系，href地址样式引入的优先级： 1.在一个HTML元素内，内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式 2.在hea里添加的内部样式和引入的外部样式，后添加和引入的优先级高。 3.浏览器默认样式优先级最低 3.CSS中的颜色表示法？ 1.单词表示法直接写出单词 2.十六进制表示法 #000000 3.rgb三原色表示法： rgb(255,255,255) 4.CSS背景样式？ background-color background-img: url(); url(背景地址) 默认：会水平垂直铺满背景图 background-repeat:平铺方式 repeat-x x轴平铺 repeat-y y轴平铺 repeat ( x , y x和y都平铺) no-repeat 都不平铺 background-position：背景位置 x y : number(px,%) | 单词 x : left,center,right y : top,center,bottom background-attachment : 背景图随滚动条的移动方式 scroll ：默认值背景位置是按照当前元素进行偏移的 fixed ：背景位置是按浏览器进行偏移的 5.边框样式 border-style : 边框样式 solid ：实线 dashed ：虚线 dotted ：点线 hidden : 隐藏 border-width ：边框大小 px thin thick medium border-color ：边框颜色边框可以只针对一条边进行设置颜色：透明颜色 transparent 边框样式优先级： border-style:hidden > border-style:solid > boreder-style:none 复合： border-style: top right bottom left; border-style: top right+left bottom border-style: top+bottom left+right 简写： border:border-width border-style border-color 6.文字样式 font-family:字体类型 font-size:字体大小 font-weight:字体加粗 normal | bold font-style:字体样式 7.段落样式 text-decoration ：文本修饰下划线：underline 删除线：line-through 上划线：overline 不添加任何装饰：none text-transform：文本大小写（针对英文）小写：lowercase 大写: uppercase 只针对单词首字母大写：capitalize text-indent：文本缩进首行缩进 em单位：相对单位，1em永远都是跟字体大小相同 text-align：文本对齐方式对齐方式：left，right，center line-height：定义行高什么是行高：一行文字的高度，上边距跟下边距相等默认行高：不是固定值，而是变化的取值：1. number （px）| scale （比例值，跟文字大小成比例的） letter-spacing：字之间的间距 word-spaceing：词之间的间距（只针对英文）英文和数字不自动拆行问题： 1.word-break: break-all；(非常强烈的拆行) 2.word-wrap: break-word；(不是那么强烈的拆行) 8.选择器的类别：简单选择器：根据名称，ID，类别来选择元素 class可以定义多个样式的叠加组合选择器：根据元素之间的特定关系来选择元素 1.div标签 + 空格 + p标签：后代选择器后代选择器：匹配作为指定元素后代的所有元素 2.div标签 + > +p标签：子选择器子选择器：只能选择作为某元素的子元素，不能选择到孙辈的元素 3.div标签 + “+” + p标签：相邻的兄弟选择器 4.div标签 + ~ + p标签：一般兄弟选择器伪类选择器：根据某种状态来选择元素 a:link {} a:visited{} a:hover{} a:active{} link跟visited只能用于a标签 hover和active可以用作于所有标签伪元素选择器：为一个元素的指定部分设置样式通过伪元素选择器，可以设置元素指定部分的样式。主要用于设置元素内文本的首字母，首行的样式，或是在元素内容之前或之后插入其他内容 selector::pseudo-element{} selector是目标元素 pseudo-element是向目标元素内，添加伪元素，并对伪元素的内容进行修饰伪元素选择器： ::first-letter ::first-line ::before ::after ::selection 属性选择器：根据一个属性或属性值来选择元素 [attribute]:来查看html结构中，带有attribute属性的所有元素 [attribute="value"]:来查找HTML结构中，带有attribute属性，并且属性值为value的元素 [attribute~="value"]:来查找HTML结构中，带有attribute属性，并且在多个属性值中包含value的元素 [attribute|="value"]:来查找HTML结构中带有attribute属性，并且属性值以value或者是value-开头的元素通配符选择器：用来选择所有元素 9.列表样式有序列表无序列表属性： list-style-image: url() list-style-type: none等 list-style-position: outside inside 简写： list-style:list-style-type list-style-position list-style-image 10.CSS轮廓 outline-style:轮廓样式 dotted 点轮廓 dashed 虚线轮廓 solid 实线轮廓 double 双实线轮廓 none 无轮廓 hidden 隐藏轮廓 outline-color:轮廓颜色单词，三原色，十六进制 outline-width：轮廓宽度 thin 一般为1px medium 一般为3px thick 一般为5px 一个特定的尺寸：以px ， em为单位 outline-offset：轮廓偏移 px outline：轮廓简写 outline-width,outline-style,outline-color 注 outline-style是必须设置的 11.CSS边距属性 margin： auto 浏览器自动计算的边距 length 以px，pt，cm等为单位指定边距 % 以父元素宽度的百分比来指定边距简写： margin: 上边距px 右边距px 下边距px 左边距px 四个值 margin: 上边距px 左右边距px 下边距px 三个值 margin：上下边距px 左右边距px 两个值 margin：上下左右边距px 一个值注：边距塌陷 12.CSS填充 padding：简写： padding:顶部px 右部px 底部px 左部px 四个值 padding:顶部px 左右部px 底部px 三个值 padding：顶底部px 左右部px 两个值 padding：上下左右px 一个值 13.CSS盒模型标准盒模型怪异盒模型 14.CSS布局之显示属性 display: block 元素显示为块级元素 inline 元素显示为行内元素 none 隐藏元素 visibility: hidden 也可以隐藏元素，但是保留元素的原有空间 visible 可以重新显示样式 15.CSS布局之元素类型行内元素不能设置宽高样式行内元素可以设置边框线样式行内元素可以设置内填充样式行内元素可以设置左右方向的外边距样式 display： inline-block 既保留inline元素的特点，也保留block元素的特点设置一个元素的display属性只能改变该元素的显示方式，而不能真正的改变html元素的类型。 16.CSS嵌套规则规则1：块元素可以包含行内元素或某些块元素，但行内元素却不能包含块元素，它只能包含其他的行内元素规则2：块元素不能放在p元素里面规则3：有几个特殊的块级元素只能包含行内元素，不能再包含块元素，这几个特殊的元素是：h1-h6，p，dt 规则4：块级元素一般与块级元素并列，行内元素一般与行内元素并列 17.块级元素和行内元素块级元素：每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。常见的块级元素有：

~

，表格标签，水平分割线

,预格式化

,图像映射map，表单标签

    行内标签：
        行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。 
        一般不可以设置宽度，高度以及对齐等属性。 
        常见的行内元素有：,,,,,等
        默认的宽度就是它本身的宽度 

    行内块级元素：
        块级元素会独占一行
        高度，行高，外边距和内边距都可以单独设置
        宽度默认是容器的100%
        可以容纳内联元素和其他的块级元素

18.CSS布局之溢出处理
    overflow：
        visible 默认。溢出的内容没有被剪掉
        hidden 溢出的内容被剪切
        scroll 溢出的内容被剪掉了
        auto 类似于scroll

    overflow-y：
    overflow-x：
    text-overflow：

19.CSS布局之浮动基础
    float:
        left 左浮动
        right 右浮动
        none 不浮动

20.CSS布局之浮动清理
    clear:
        left 表示当前元素不受到左浮动的影响
        right 当前元素不受右浮动的影响
        both 左右都不受影响

21.CSS布局之定位
    position：
        static 静态定位
        relative 相对定位
            相对样式需要配合left，top,right,bottom这些定位属性才能生效
            relative 相对的是容器自身的屏幕坐标0 ，0点
            容器位置发生位移后，原来占据的空间依然会保留
            默认会覆盖没有定位的容器
        fixed 固定定位
            固定定位的元素是相对于浏览器视口定位的，这意味着即使发生滚动，它也始终保持在同一个位置
            top，right，bottom left属性被用来定位元素，但不是必须的
        absolute 绝对定位
            绝对定位的元素会脱离文档流
            绝对定位的参照点为，有定位设置的离他最近的祖先元素的0，0点坐标
            绝对定位的容器默认会覆盖没有定位的容器
        sticky 粘性定位
            父元素不能添加 overflow：hidden 或者 overflow：auto属性
            元素自身必须声明top ，bottom，left，right一个或是多个属性，否则就相当于静态定位了
            父元素的高度不能低于sticky定位元素的高度
            sticky定位元素仅在其父元素内生效
            粘性定位初始状态相当于static定位
            相对于父容器的定位条件符合时，容器变现为固定定位
            top，right，bottom，left至少声明一个，粘性定位才能生效

22.CSS定位的堆叠顺序
    盒模型的布局
        正常文档流，浮动，定位

    z-index：
        容器的堆叠顺序的计算，是先比较同级容器的。子容器是不会超出父容器的堆叠顺序的。
        
23.光标
    cursor：值
        光标的种类
        
24.宽高自适应
    通常才用：max-width max-height min-width min-height进行设置，同时width height 才用%





```