技术贴【黑马web前端】

更新时间:2019年07月26日 11时16分02秒来源:黑马程序员论坛

1.html是超文本语言，不是编程语言，主要由五类浏览器内核解析：
IE（Trident）
Firefox（Gecko）
safari（webkiit）
chrome（chromium/Blink）
Opera（blink）
表单的外头要用form 扩起来，学JS数据库要用，
注意单算标签，行内元素行内快元素，块级元素的区别。
h1标签只用一次一般配套标题LOGO方便搜索引擎的爬取。
实体化三属性宽高与背景色
路径要设对
2. css中书写位置三种
行内式（不推荐）
行外式（少）
外部式
用link链接对路径
  3选择器中常用类选择器class=“类名称”
标签元素选择器
id 选择器
通配符选择器
一般都是复合这用后代选择器选中后代所有一个空格表示了后代关系
子代选择器选中最近的子一代 “>”表示选中子级
并集选择器给多个位置相同样式一个逗号表示并集关系
交集选择器用的少标签选择器后面紧跟着书写类选择器
其中最易发生权重问题而导致样式不起效果
用chrome拍错。

3、盒模型中嵌套垂直外边距合并问题环境
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
为父级设置上边框
直接给父级设置padding-top如果父级有高度注意减去对应的高度；
直接给父级添加overflow:hidden;--- overflow:hidden;强制区分了父子级关系，但是溢出回隐藏多余的部分，
4.网页布局的三种机制
普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；
行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em；
浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
定位：将盒子在浏览器的某一个位置，后期会经常用到；
浮动的特点浮：
浮动之后的元素脱离了标准流；
漏：
盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特
浮动之后的盒子的显示模式会更改为行内块元素的特点；
浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；
如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
清除浮动的影响问题描述
在布局的时候如果父级盒子没有设置固定的高度，里面的子级盒子进行浮动设置，父级盒子就不会被撑开，就会影响我们后面的盒子布局；
清除浮动本质：
父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；
2额外标签法
在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：
<div style=“clear:both;”></div>
父级加overflow属性法
3直接给父级添加overflow:hidden;，强制的撑开父级的高度；
双伪元素清除浮动
/*声明清除浮动的样式*/
.clearfix:before,.clearfix:after {
   content: "";
   display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
         *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
5、定位定位布局：
定位模式+边偏移
边偏移：
top、bottom、left、right属性；
定位的精髓：
利用更改方向英文来进行位置设置；
6、定位模式
常见的定位模式分为：相对定位、绝对定位、固定定位
定位属性
定位属性：position 取值不同实现的效果不同
默认静态定位：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
固定定位以可是窗口为准定位，绝对定位以最近的有position的父级盒子为准，相对定位以自身在标准流的位置或浮动的位置为准定位。
6 盒子的隐藏display: noen || block 占位置
visibility: hidden || visited 不占位
overflow溢出隐藏
文字的隐藏
第一步：让文字强制一行显示：white-space:nowrap;
第二步：让超出范围的文字隐藏： overflow:hidden;
第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;
margin负值之美。解决边框的重合边加倍的问题。
icon图标的应用：下载阿里图标库解压拿出解压文件放入fonts文件夹中，与 .html文件同一级，在里面直接link: href="fonts/iconfont.css" 下面直接起类名 class="iconfont 图标名“”

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

技术贴【黑马web前端】

相关阅读