黑马程序员技术交流社区

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

---

作者: BambooDu    时间: 2019-6-7 20:32
标题: 技术贴
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   图标名“”

---

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

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