技术贴【黑马web前端】

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

写静态页面首先就是要分析一下页面的布局，只有分析清楚了布局写的时候才能顺利的写出页面。布局分析无非就是看页面可分为多少个盒子（div），理清盒子与盒子之间的关系。

html的结构是必不可少的

<html>

<head>

<title>标题</tilte>

</head>

<body>

网页主体内容

</body>

</html>

盒子模型组成

内容： 实体化宽高和里面的文字图片等等

边框： border

内边距： padding 拉开内容到盒子边缘的距离；

外边距： margin 拉开盒子与盒子之间的距离；

浮动：

浮动布局的原理应用：让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left right none（不浮动默认就是） 浮动的特点浮：浮动之后的元素脱离了标准流； 漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；特：1、浮动之后的盒子的显示模式会更改为行内块元素的特点；2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

浮动和定位能防止外边距合并

• 如果盒子有嵌套关系，给子级添加了margin-top就会出现外边距塌陷，但是如果用了浮动或者绝对定位和固定定位，就不会出现这样的问题；

清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；

after伪元素法

/*声明清除浮动的样式*/

.clearfix:after {

content: "";

display: block;

height: 0;

visibility: hidden;

clear: both;

}

.clearfix {

*zoom: 1; /*ie6,7 专门清除浮动的样式*/

}

双伪元素清除浮动

/*声明清除浮动的样式*/

.clearfix:before ,.clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom: 1; /*ie6,7 专门清除浮动的样式*/

}

谁里面有浮动就在谁的开始标签身上添加class=“clearfix”

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

overflow溢出隐藏

• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；

• overflow:scroll; 显示横向和竖向的滚动条显示（不用）；

• overflow:auto;溢出滚动，将超出固定宽高范围的内容以滚动条的形式显示（不用）；

用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

css实现三角形效果

第一步 ，设置盒子的宽度高度为0

第二步，设置边框的宽度粗细border-width，最终显示为三角形

边框的线条样式 border-style

第三步，设置边框的颜色 border-color，4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；

第四步，为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

推荐了解热门学科

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前端】

相关阅读