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. Syste类

    System类的概述 System 类包含一些有用的类字段和方法.它不能被实例化. 成员方法 public static void gc()  运行垃圾回收器. public static void ...

  2. SQL语言Select经典语句

    -- 示例数据 Select * From Employee Select * From Department -- 返回工资最高的员工的信息 Select * From Employee where ...

  3. C#依赖注入实例

    http://qing.weibo.com/tj/400082fa33001h7x.html 1.5 实现依赖注入1.5.1 背景介绍 设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系, ...

  4. Realsense D430 save

    rs-save-to-disk.cpp // License: Apache 2.0. See LICENSE file in root directory. // Copyright(c) 2015 ...

  5. MySQL高性能优化指导思路

    MySQL架构图: 连接池组件.管理服务和工具组件.SQL接口组件.查询分析器组件.优化器组件.缓冲组件.插件式存储引擎.物理文件: 1.连接层:主要完成一些类似于连接处理,授权认证及相关的方案: 2 ...

  6. （十六）集合框架（Collection和Map）和比较器（Comparable和comparator）

    一.集合框架 1.1 为什么要使用集合框架? 当我们需要保持一组一样(类型相同)的元素的时候,我们应该使用一个容器来保存,数组就是这样一个容器. 那么,数组的缺点是什么呢? 数组一旦定义,长度将不能再 ...

  7. .Net Core 请求上下文IHttpContextAccessor

    namespace Microsoft.AspNetCore.Http { public interface IHttpContextAccessor { HttpContext HttpContex ...

  8. Mac下用apache搭建一个局域网服务器

    一:由于MacOX系统下自带Apache环境,所以我们在Mac系统下用Apache配置. Mac系统:10.14.4 二:启动Apache 启动 在终端输入:sudo apachectl start验 ...

  9. Memcache安装配置

    介绍 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调 ...

  10. 服务器NGINX连接数

    kill -HUP 1900  重启某个进程! 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} ...