1、display   block块级元素（div、p等） inline 行内元素（a、span等）

　　常见的例子：把li修改成inline ，制作成水平菜单

2、max-width 来适应不同浏览器窗口大小，IE7+都支持这一属性

3、box-sizing:border-box  将元素设置这一属性时，元素的内边距和边框不会影响其内容宽度，再也不需要计算内容宽度的值了。

　　缺点就是不同浏览器内核要分别设置，并只支持IE8+

4、position

5、浮动与display:inline-block 的区别与用法  教程见 http://zh.learnlayout.com/toc.html

css布局笔记的更多相关文章

  1. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  2. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  3. css布局笔记（二）Flex

    flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{di ...

  4. css布局笔记（一）

    布局方式 一列布局 通常固定宽高,用margin:0 auto:居中显示 两列布局 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清 ...

  5. CSS布局基础

    (初级)css布局 一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border ...

  6. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  7. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  8. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  9. HTML&CSS精选笔记_布局与兼容性

    布局与兼容性 CSS布局 版心和布局流程 为什么要应用布局? 阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对 ...

随机推荐

  1. com.alibaba.fastjson.JSONObject;的使用

    转: com.alibaba.fastjson.JSONObject;的使用 2018-11-04 23:51:23 mameng1998 阅读数 6404更多 分类专栏: java   1  POM ...

  2. RVCT编译错误 Cannot obtain license for Compiler

    找不到文件 找不到文件 Error: C9932E: Cannot obtain license for Compiler (feature compiler) with license versio ...

  3. 《海会圣贤》高清字幕版（由香港佛陀教育协会发布DVD恭敬转成）

    常念阿彌陀佛 2015-09-22 视频(建议WIFI下收看)时长72分钟 https://v.qq.com/x/page/f0166amk57h.html 香港佛陀教育协会发布DVD   DVD+高 ...

  4. 【c# 学习笔记】继承

    在c#中,一个类可以继承另外一个已有的类(密封类除外),被继承的类称为基类(或父类),继承的类称为派生类(或子类),子类将获得基类 除构造函数和析构函数以外的所有成员.此外,静态类是密封的,也不能被继 ...

  5. charles 开始/暂停记录

    本文参考:charles 开始/暂停记录 1.1. stop/start recording 和 2.1 recording settings 是常用的功能了:这里需要注意就是后面的session1代 ...

  6. python 问题解决：UnicodeEncodeError: 'ascii' codec can't encode character u'\uff08'

    第一种方案(90%情况下,大部分帖子都是这个)一般报错到代码都是自己写到代码,代码上添加 import sysreload(sys)sys.setdefaultencoding('utf-8') 第二 ...

  7. cocos creator 判断滑动方向

    定义变量 public firstX = null; public firsty = null; 点击 获取坐标 this.viewNode.on(cc.Node.EventType.TOUCH_ST ...

  8. Node中导入模块require和import??

    转自:https://blog.csdn.net/wxl1555/article/details/80852326 S6标准发布后,module成为标准,标准的使用是以export指令导出接口,以im ...

  9. Java线程池的使用方式，核心运行原理、以及注意事项

    为什么需要线程池 java中为了提高并发度,可以使用多线程共同执行,但是如果有大量线程短时间之内被创建和销毁,会占用大量的系统时间,影响系统效率. 为了解决上面的问题,java中引入了线程池,可以使创 ...

  10. 乐字节Java变量与数据类型之一：Java编程规范，关键字与标识符

    大家好,我是乐字节的小乐,这次要给大家带来的是Java变量与数据类型.本文是第一集:Java编程规范,关键字与标识符. 一.编程规范 任何地方的名字都需要见名知意: 代码适当缩进 书写过程成对编程 对 ...