id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333；  #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；


链接的伪类四种状态：
     a:link        未访问的链接（访问前）
     a:visited    已访问的链接（访问后）
     a:hover      鼠标移动到连接上（鼠标经过）
     a:active      选定的链接（按下鼠标的时候）
注意：以上的顺序不能颠倒；
实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；

标签显示模式（重点要理解）
实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
     块级元素：自己独占一行； --- 代表标签 div、h标签
     行内元素：一行可以共存多个；--- 代表标签  span 、a
     行内块元素：一行可以共存多个； --- 代表标签 img 、 input
块级元素(死记硬背)
特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；
       默认的宽度是父级的100%；
       是一个容器盒子，里面可以放行内或者块元素；
注意：p标签是块级元素，但是p标签里面不能放div标签；
      同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；
常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd
行内元素(死记硬背)
特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；
02、行内元素里面最好只放文本或者其他的行内元素；
常见的行内元素：a  span  u  s  del  strong   em  i  ins 等；
注意：超链接里面不能嵌套超链接；
      特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素：
一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；
一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；
三种显示模式相互转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
实体化三属性（重要滴很）
宽 width
高 height
背景 background
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

测量方法：从一行的顶线到另以行的顶线


背景的复合写法（死记硬背）
background:背景颜色  url（）  平铺方式  是否固定  X轴  Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；
分为：层叠性（覆盖性）、继承性、优先级；

盒子模型组成
     内容：  实体化宽高和里面的文字图片等等
     边框：  border
  内边距：   padding   拉开内容到盒子边缘的距离；
  外边距：   margin    拉开盒子与盒子之间的距离；

在调试工具里面  橙色表示外边距margin，黄色边框表示border，绿色色表示内边距padding，蓝色表示内容


Csss设置细线表格（死记硬背）
table,th,td{
     border:1px #ccc solid;
     border-collapse:collapse;
}
border-collapse:collapse;合并相邻的边框
注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写；


插入图片和背景图片区别（记住）
内容一般用插入图片，装饰性的小图标一般用背景图片；
插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；
背景图片移动位置用背景图片额度定位background-position进行设置；
并列垂直外边距合并（重点）
两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；
解决方案：不要同时设置，只给一个盒子设置即可；
嵌套垂直外边距合并
问题环境
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
  
解决方案：
1、为父级设置上边框（不用）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；
3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系
盒子阴影
语法：
box-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影；
水平阴影：让阴影在水平方向位移
垂直阴影：让阴影在垂直方向位移
模糊距离：阴影的羽化（虚实）大小
阴影大小：设置阴影的大小，一般不设置
阴影颜色：设置阴影的颜色
内/ 外阴影：默认是外阴影  ，inset是设置内阴影


文字阴影
语法：
text-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影；
水平阴影：让阴影在水平方向位移
垂直阴影：让阴影在垂直方向位移
模糊距离：阴影的羽化（虚实）大小
阴影大小：设置阴影的大小，一般不设置
阴影颜色：设置阴影的颜色
内/ 外阴影：默认是外阴影  ，inset是设置内阴影



实际的导航布局
Html结构
•        实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；
这么做的好处
01 li嵌套a语义清晰；
02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；
03  友情链接类似的小导航可以直接用a链接完成；9、关于图片插入底部留白
Html中插入图片的时候会出现2-4px的底部留白
解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；




将图片转换为块元素display:block;  --  不建议使用

列表布局父级盒子装不下最后一个掉下来问题
布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来，
解决方案：直接给父级盒子的宽度大于版心盒子即可；
banner 滚动图片的布局思路（重要）
一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；
Current是默认选中的样式

display显示与隐藏（重点）
•        隐藏：display:none;   === 属于不占位隐藏
•        显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏
•        占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
•        overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
•        overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
•        overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
实际工作中overflow:hideen;的用法（重点）
用户界面-鼠标样式
•        鼠标样式：cursor
•        小白（默认） cursor:default;
•        小手： cursor:pointer;
•        移动： cursor:move;
•        文本： cursor:text;
•        禁止： cursor:not-allowed;
用户界面-input轮廓线( 重要)
•        表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
我们直接在css的最上面设置公用的样式：
input {
        outline:none;
}
用户界面- textarea防止拖拽文本域( 重要)
•        Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；
我们直接在css的最上面设置公用的样式：
textarea{
                outline:none;
resize:none;
}
vertical实现图片和文字垂直对齐
•        vertical-align:middle;让行内元素、行内块元素垂直居中；
•        常见的行内元素：a、span
常见的行内块元素：img,input
注意：如果直接添加vertical-align:middle;不生效我们可以直接给父级盒子添加对应行高即可；
      我们一般在css的最顶部设置一个公用样式就可以，能解决2问题：第一个问题图片垂直居中，第二个问题，解决图片底部留白；
去除图片底侧空白缝隙
•        Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
•        01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；
•        02 直接将图片的显示模式更改为块级元素img{display:block;}
溢出的文字省略号显示（一定要会写）
•        white-space:normal; 默认处理，文字一行显示不下就折行显示；
•        white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
•        text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；
（重要的）让超出固定宽的的文字内容以省略号显示三部曲
第一步 ：让文字强制一行显示 ：white-space:nowrap;
第二步：让超出范围的文字隐藏 ： overflow:hidden;
第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;
使用精灵图的方法（重要）
第一步 --- 确定使用图标的大小，也就是量取图标的宽高
第二步 ----  引入精灵图作为背景图片，然后使用背景图片定位设置X和Y轴的位置



制作精灵图（了解）
•        我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
•        我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙。
•        在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
注意：在制作精灵图的是分辨率一律设置为72，导出图片的时候最好的透明的PNG格式；
滑动门原理
•        一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
•        设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
•        盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•        子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;
盒子边框突出显示效果
想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：如果我所有的盒子都在标准流里面，我们只需要设置鼠标经过当前盒子的时候，给当前盒子添加一个position: relative;相对定位（相对定位是不会改变盒子的显示模式的还占位）实现突出效果；
情况2：如果所有的盒子已经设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值，修改盒子的堆叠层次，z-index值越大盒子就会越上面；
css实现三角形效果
第一步 ，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333；  #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；


链接的伪类四种状态：
     a:link        未访问的链接（访问前）
     a:visited    已访问的链接（访问后）
     a:hover      鼠标移动到连接上（鼠标经过）
     a:active      选定的链接（按下鼠标的时候）
注意：以上的顺序不能颠倒；
实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；

标签显示模式（重点要理解）
实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
     块级元素：自己独占一行； --- 代表标签 div、h标签
     行内元素：一行可以共存多个；--- 代表标签  span 、a
     行内块元素：一行可以共存多个； --- 代表标签 img 、 input
块级元素(死记硬背)
特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；
       默认的宽度是父级的100%；
       是一个容器盒子，里面可以放行内或者块元素；
注意：p标签是块级元素，但是p标签里面不能放div标签；
      同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；
常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd
行内元素(死记硬背)
特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；
02、行内元素里面最好只放文本或者其他的行内元素；
常见的行内元素：a  span  u  s  del  strong   em  i  ins 等；
注意：超链接里面不能嵌套超链接；
      特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素：
一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；
一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；
三种显示模式相互转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
实体化三属性（重要滴很）
宽 width
高 height
背景 background
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

测量方法：从一行的顶线到另以行的顶线


背景的复合写法（死记硬背）
background:背景颜色  url（）  平铺方式  是否固定  X轴  Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；
分为：层叠性（覆盖性）、继承性、优先级；

盒子模型组成
     内容：  实体化宽高和里面的文字图片等等
     边框：  border
  内边距：   padding   拉开内容到盒子边缘的距离；
  外边距：   margin    拉开盒子与盒子之间的距离；

在调试工具里面  橙色表示外边距margin，黄色边框表示border，绿色色表示内边距padding，蓝色表示内容


Csss设置细线表格（死记硬背）
table,th,td{
     border:1px #ccc solid;
     border-collapse:collapse;
}
border-collapse:collapse;合并相邻的边框
注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写；


插入图片和背景图片区别（记住）
内容一般用插入图片，装饰性的小图标一般用背景图片；
插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；
背景图片移动位置用背景图片额度定位background-position进行设置；
并列垂直外边距合并（重点）
两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；
解决方案：不要同时设置，只给一个盒子设置即可；
嵌套垂直外边距合并
问题环境
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
  
解决方案：
1、为父级设置上边框（不用）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；
3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系
盒子阴影
语法：
box-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影；
水平阴影：让阴影在水平方向位移
垂直阴影：让阴影在垂直方向位移
模糊距离：阴影的羽化（虚实）大小
阴影大小：设置阴影的大小，一般不设置
阴影颜色：设置阴影的颜色
内/ 外阴影：默认是外阴影  ，inset是设置内阴影


文字阴影
语法：
text-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影；
水平阴影：让阴影在水平方向位移
垂直阴影：让阴影在垂直方向位移
模糊距离：阴影的羽化（虚实）大小
阴影大小：设置阴影的大小，一般不设置
阴影颜色：设置阴影的颜色
内/ 外阴影：默认是外阴影  ，inset是设置内阴影



实际的导航布局
Html结构
•        实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；
这么做的好处
01 li嵌套a语义清晰；
02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；
03  友情链接类似的小导航可以直接用a链接完成；9、关于图片插入底部留白
Html中插入图片的时候会出现2-4px的底部留白
解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；




将图片转换为块元素display:block;  --  不建议使用

列表布局父级盒子装不下最后一个掉下来问题
布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来，
解决方案：直接给父级盒子的宽度大于版心盒子即可；
banner 滚动图片的布局思路（重要）
一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；
Current是默认选中的样式

display显示与隐藏（重点）
•        隐藏：display:none;   === 属于不占位隐藏
•        显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏
•        占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
•        overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
•        overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
•        overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
实际工作中overflow:hideen;的用法（重点）
用户界面-鼠标样式
•        鼠标样式：cursor
•        小白（默认） cursor:default;
•        小手： cursor:pointer;
•        移动： cursor:move;
•        文本： cursor:text;
•        禁止： cursor:not-allowed;
用户界面-input轮廓线( 重要)
•        表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
我们直接在css的最上面设置公用的样式：
input {
        outline:none;
}
用户界面- textarea防止拖拽文本域( 重要)
•        Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；
我们直接在css的最上面设置公用的样式：
textarea{
                outline:none;
resize:none;
}
vertical实现图片和文字垂直对齐
•        vertical-align:middle;让行内元素、行内块元素垂直居中；
•        常见的行内元素：a、span
常见的行内块元素：img,input
注意：如果直接添加vertical-align:middle;不生效我们可以直接给父级盒子添加对应行高即可；
      我们一般在css的最顶部设置一个公用样式就可以，能解决2问题：第一个问题图片垂直居中，第二个问题，解决图片底部留白；
去除图片底侧空白缝隙
•        Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
•        01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；
•        02 直接将图片的显示模式更改为块级元素img{display:block;}
溢出的文字省略号显示（一定要会写）
•        white-space:normal; 默认处理，文字一行显示不下就折行显示；
•        white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
•        text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；
（重要的）让超出固定宽的的文字内容以省略号显示三部曲
第一步 ：让文字强制一行显示 ：white-space:nowrap;
第二步：让超出范围的文字隐藏 ： overflow:hidden;
第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;
使用精灵图的方法（重要）
第一步 --- 确定使用图标的大小，也就是量取图标的宽高
第二步 ----  引入精灵图作为背景图片，然后使用背景图片定位设置X和Y轴的位置



制作精灵图（了解）
•        我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
•        我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙。
•        在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
注意：在制作精灵图的是分辨率一律设置为72，导出图片的时候最好的透明的PNG格式；
滑动门原理
•        一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
•        设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
•        盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•        子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;
盒子边框突出显示效果
想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：如果我所有的盒子都在标准流里面，我们只需要设置鼠标经过当前盒子的时候，给当前盒子添加一个position: relative;相对定位（相对定位是不会改变盒子的显示模式的还占位）实现突出效果；
情况2：如果所有的盒子已经设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值，修改盒子的堆叠层次，z-index值越大盒子就会越上面；
css实现三角形效果
第一步 ，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;