A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

BambooDu

初级黑马

  • 黑马币:17

  • 帖子:6

  • 精华:0

© BambooDu 初级黑马   /  2019-6-7 20:32  /  1063 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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   图标名“”

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马