来黑马学习已半月，在这期间也学习了前端基础HTML和CSS，学到了很多知识，下面来总结一下，HTML+CSS需要记忆的知识点，如下：




常见的浏览器：IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器；
Web标准的组成：结构标准（html）搭建页面的结构、表现标准/样式标准（css）页面样式的美化行为标准、（javascript）实现页面的交互效果；
常见的双标签：div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a常见的单标签：br、hr、img

加粗标签：        <b>单纯的加粗</b>     <strong>语义化强调</strong>

倾斜标签：        <i>单纯的加粗</i>        <em>语义化强调</em>  

删除线标签：      <s>单纯的加粗</s>      <del>语义化强调</del>

下划线标签：      <u>单纯的加粗</u>      <ins>语义化强调</ins>

单选按钮   <input type="radio" checked="checkde“  >

复选按钮   <input type="checkbox" checked="checkde" >

id选择器的命名规则：

不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；

链接的伪类四种状态：
     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;

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

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

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

   列表布局父级盒子装不下最后一个掉下来问题
布局的时候我们的版心是固定的，如果给子级盒子添加了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格式；

盒子边框突出显示效果
想要实现两条边框重叠我们直接用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;

滑动门原理

一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
      设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
     盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
     子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;

最重要的一点，是要学会使用调试工具去找错误。

chrome调试工具（重点）

01、快捷键F12调出调试工具，

02、在页面的空白处右键 ---- 检查，最好的老师，就是通过F12学会自己去排查错误！

此致完毕！

                                                                                                                                                             2019年6月8日

         来黑马学习已半月，在这期间也学习了前端基础HTML和CSS，学到了很多知识，下面来总结一下，HTML+CSS需要记忆的知识点，如下：




常见的浏览器：IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器；
Web标准的组成：结构标准（html）搭建页面的结构、表现标准/样式标准（css）页面样式的美化行为标准、（javascript）实现页面的交互效果；
常见的双标签：div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a常见的单标签：br、hr、img

加粗标签：        <b>单纯的加粗</b>     <strong>语义化强调</strong>

倾斜标签：        <i>单纯的加粗</i>        <em>语义化强调</em>  

删除线标签：      <s>单纯的加粗</s>      <del>语义化强调</del>

下划线标签：      <u>单纯的加粗</u>      <ins>语义化强调</ins>

单选按钮   <input type="radio" checked="checkde“  >

复选按钮   <input type="checkbox" checked="checkde" >

id选择器的命名规则：

不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；

链接的伪类四种状态：
     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;

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

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

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

   列表布局父级盒子装不下最后一个掉下来问题
布局的时候我们的版心是固定的，如果给子级盒子添加了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格式；

盒子边框突出显示效果
想要实现两条边框重叠我们直接用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;

滑动门原理

一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
      设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
     盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
     子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;

最重要的一点，是要学会使用调试工具去找错误。

chrome调试工具（重点）

01、快捷键F12调出调试工具，

02、在页面的空白处右键 ---- 检查，最好的老师，就是通过F12学会自己去排查错误！

此致完毕！

                                                                                                                                                             2019年6月8日