网页制作的总结

一. 盒子模型

在css中,width和height指的是内容区域的宽度和高度,增加内边距, 边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。

二.清除浮动,清除默认样式

````
 /*清除默认样式*/
body{
    margin: 0px;
    padding: 0px;
}

/*清除浮动*/
.clearfix {
    zoom: 1;
    display: table;
}
````

三.使用float应该注意

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

  • 注意,图片本身有高度和宽度。其他浮动元素会碰到它的边框停下。 这就是文字环绕图片的原理。
  • 浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素,它将塌陷具有零高度。你可以按以下方法处理:
  1. 在浮动元素后加个div设置clear: both; height:0,overflow:hidden
  2. 使用clearfix;
  3. 设置父元素浮动;

四.制作弹出层

需要的知识点:

  • 定位:absolute,relative,fixed
  • 事件:onload,onclick
  • DOM操作:getElementById(),scrollHeight(),clientHeight(),createElement(),appendChild(),removeChild(). 静止定位:相对与当前状态的屏幕静止。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Boostrap

    xiaohejun
  • SSH2框架整合--实现登录

    先写上日志记录需要的属性文件,其他三个文件具体内容在编码时给出 log4j.properties

    xiaohejun
  • M斐波那契数列

    F[0] = a F1 = b F[n] = F[n-1] * F[n-2] ( n > 1 )

    xiaohejun
  • 带你熟悉CSS浮动

      浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来。

    阿豪聊干货
  • 前端常见技术点 - CSS / DOM / 布局(43问)

    这里总结一下 WEB 前端面试 CSS 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级...

    用户5997198
  • Exchange Server 2013之CAS服务器NLB负载均衡

    前面几篇博客介绍了Exchange 2013的部署方法以及数据库的DAG搭建方法,下面我们将对前端CAS服务器进行NLB负载均衡的组建。在Exchange 20...

    李珣
  • 总结伪类和伪元素(转)

    先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:

    山河木马
  • CSS——变形

    变形(Transform-)属性是一些对HTML元素进行线性仿射变形相关的CSS属性。

    Html5知典
  • Spark action 操作列表

    +以下内容来自 Spark 官方文档 Actions 小节, 更多内容可查看官方文档. 如有不当之处, 欢迎指正.

    用户1558438
  • 深入探索Java 8 Lambda表达式

    本文为 InfoQ 中文站特供稿件,首发地址为:http://www.infoq.com/cn/articles/Java-8-Lambdas-A-Peek-U...

    技术小黑屋

扫码关注云+社区

领取腾讯云代金券