前端基础、技术贴 - 黑马程序员技术交流社区

加粗标签： 单纯的加粗 语义化强调

倾斜标签： 单纯的加粗 语义化强调

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

下划线标签： 单纯的加粗 <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学会自己去排查错误！