黑马程序员技术交流社区

标题: 技术交流贴 [打印本页]

---

作者: li_3659    时间: 2019-10-15 00:00
标题: 技术交流贴
基础班的学习已经快有一个月了，HTML和css的知识点也已经全部学完，虽然都是一些基础的知识，但是在以后用的比较多。从之前的一无所知，到现在可以写出一些静态页面。
html主要是一些标签的学习，这些标签都应该熟记于心。标签分为双标签但标签，例如：h1~h5，spandiv等都是双标签，input、hr、br等是单标签。
HTML可以做出页面的骨架，而css则可以对界面布局进行美化。我这边聊一下我目前掌握的不是很熟练的几个知识点：
一、外边距margin的影响
有父子级嵌套关系的盒子外边距塌陷
问题描述：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
1、为父级设置上边框（不建议使用）
border-top:1pxsolidtransparent;
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；
不建议使用，因为多了一像素的内边距需要减去padding-top:1px;
3、直接给父级添加overflow:hidden;（强烈推荐使用）
二、溢出固定宽高范围的文字省略号显示.
        white-space:normal;默认处理，文字一行显示不下就折行显示；
white-space:nowrap;强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden;使用，然后想要出现省略好配合下面属性：
        text-overflow:clip;不显示省略号，直接裁剪；
        text-overflow:ellipsis;隐藏的内容以省略号显示；
三部曲
第一步：强制文字在一行显示white-space:nowrap;
第二步：将超出范围的文本隐藏overflow:hidden;
第三步：将超出的文本用省略号显示text-overflow:ellipsis;
注意：三部曲使用的环境一定是盒子的宽高是固定的。
三、选项卡的布局思路：
基本集结构
一个大父级盒子.tab嵌套上下两个子级盒子tab_nav和tab_box，tab_nav里面放导航，tab_box里面放需要切换的内容，注意，导航里面有几个li，我的tab_box里面就要放几个div内容盒子tab_nr,但是实际我们只需显示一个，其他隐藏，最后通过JS实现点击切换；
1、给tab的盒子给固定的宽高
2、设置tab_nav的宽高，然后将里面ul下的li左浮动设置想要的宽高
3、如果导航里面的li有鼠标经过样式或者默认选中样式我们可以单独设置
4、设置tab_box的固定宽高，然后设置路面的对应li的子盒子的宽高
5、由于咱们在实际开发中默认的内容是切换显示，只需要显示一个其他隐藏，我们需要使用display:none;全部隐藏，然后再去给想要显示内容给盒子添加行内样式style=”diapaly:block;”

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2