前端知识复习一(css)

1.清楚浮动

  父盒子高度为0,子盒子全部定位、浮动。子盒子不会撑开父盒子,下面的盒子会顶上来

  清楚方法:

    clear:both;

    overflow:hidden;

    加空标签

    单/双

//双标签
.clearfix:berore , .clearfix:after {
      content:".";
      didsplay:table;
}
.fixclear:after{
      clear:both;
}
.fixclear{
      *zoom:1;
}
//单标签
.fixclear:after{
    content:"0";
    display:block;
    height:0;
    ling-height:0;
    visibility:hidden;
    clear:both;
}
.fixclear{
    *zoom:1;//兼容IE
}

2.隐藏盒子的物种方法

  1.display:none;  隐藏盒子,不占位置

  2.overflow:hidden;  隐藏溢出部分

  3.visibility:hidden:  隐藏盒子,占位置

  4.opacity:0;  隐藏盒子,占位置(设置透明之后,里面包含的内容也透明)

  5.position-left/top:-999em;  隐藏盒子,不占位置

3.有高度的盒子,子盒子高度超过父盒子高度,父盒子会被撑破;

4.没有高度的盒子,子盒子会撑开父盒子

5.浮动的盒子遮挡不住标准流的文字

6.cursor:pointer;模拟鼠标小手

7.dotted  点线  dashed  虚线

8.层级

  浮动的比标准的高。定位的比浮动的高

  z-index为负值的比标准流的盒子层级低

    

      

时间: 2024-10-18 14:41:49

前端知识复习一(css)的相关文章

前端知识——HTML、CSS

一.HTML <!DOCTYPE html>文档类型, 确定使用什么规则来解析,这样浏览器才能知道你使用的类型 head meta charset=utf-8 告诉浏览器编码是什么 </>自闭合标签,一般会在后面加上一个斜杠 title 只有这个是用户可以看到的 <title name="wzc"></title>主动闭合,只要在标签里面写上XXX=XXX就是标签的属性 刷新和跳转 <meta http-equiv="RE

前端知识整理-DIV+CSS 之页面布局

终于收到了第一份面试邀请. 时间是下周一. 也是为了验证自己的修炼水平 进行一下知识整理 顺带 查漏补缺 也给后来的同学 提供一些参考 我们用实例来总结: 假设 进行三栏布局 左右300px 中间自适应 我们有几种解决方案呢? 第一种,我们用float 第二种,我们用绝对布局 以上两种过于简单 不解释了 第三种,就是flaxbox了 flexbox就是我心目中的最佳解决方案了,很多坑都是用flex来解决的 代码如下: <head> html *{ display:flax; } .left{

前端知识复习二(js)

JS的作用 页面特效 移动端 异步交互(AJAX) 服务器端开发(node.js) 由ECMAScript和dom(操作网页上的api).bom组成(操作浏览器的部分api) 输出到页面内容 console.log(“输出到控制台”): document.write(“输出到页面”): prompt(“输入内容”): confirm(“弹出带有是否选择按钮的窗口”): alert(); 变量最长255个字符 数据类型 简单类型 number.string.boolean.undefined 复杂

Web 前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

web前端知识总结

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识--做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的多,草图大家权当没看见. 在看内容之前,先看一下这个知识框架的

移动前端知识的一些总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 ?html 代码<meta name="viewport" content="w

前端知识学习步骤

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:龚一峰链接:https://www.zhihu.com/question/19862294/answer/44311692来源:知乎 css 编写规范 http://cssguidelin.es/ 前端性能优化的24种方法 http://browserdiet.com/en/ 学习js正确的方法 JS: The Right Way 很有趣的js编程教材(才出的) Eloquent JavaScript 设计师写的js入门教

web前端知识体系大全

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的

前端知识体系之入门篇总结(一)

利用国庆节时间,把前端学习的知识碎片进行了整理,希望能在前端之路继续努力. 前端是一个范围很大的概念,其领域包括在了计算系统中的方方面面,可以说所有与用户交互行为相关的程序开发工作都是前端的范围,这包括一个数字仪表的显示设计或者一个手机APP.通常意义上讲,前端指的是Web前端的开发工作,而学习前端也是从Web前端知识开始的. 这篇blog面向对前端没有入门或者已经有一定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者,其要旨是整理一个普通网页开发过程中所能用到的知识点.与其它类似的教程