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. SQL-W3School-函数：SQL SUM() 函数

    ylbtech-SQL-W3School-函数:SQL SUM() 函数 1.返回顶部 1. SUM() 函数 SUM 函数返回数值列的总数(总额). SQL SUM() 语法 SELECT SUM( ...

  2. EasyUI下拉框级联

    EasyUI用来实现后台界面还是可以的,毕竟面对的是小众群体而非广大的用户,简单为美.这里想聊的功能是一种下拉框的联动,比如我选中了下拉框A的某一项,那么下拉框B的选项就是甲乙丙丁,如果我选了A的另一 ...

  3. iOS 字符串和图片互转

    for (UIImage *myImg in _imgArray) { NSData *imageData = UIImageJPEGRepresentation(myImg,0.5); NSStri ...

  4. <configSections> 位置引起的错误

    今天在配置一个项目的时候,花了挺长时间配置完成,然后一启动项目,懵了,启动报错:错误显示 Configuration Error Description: An error occurred duri ...

  5. 【馨儿收藏】群星《2019最新好听DJ舞曲精选》全系列【WAV/在线/百度】（持续更新）

    本人作为一名音乐发烧友,一直喜欢追求无损音乐,平时在开发编程无聊的时候,希望享受音乐的过程,追求完美,我这边整理了一系列的比较不错,新的好听的无损音乐,希望大家能够喜欢. [馨儿收藏]群星<20 ...

  6. 【MM系列】在SAP里查看数据的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]在SAP里查看数据的方法   前言部 ...

  7. linux 网络配置及远程连接

    linux 网络配置及远程连接 前言 本文结合自己的经历主要讲述以Centos7为基础网络配置和远程连接的解决步骤 网络配置: 安装好centos7后,是上不了网的,配置步骤如下: (1).输入命令d ...

  8. 【miscellaneous】gstreamer构建的简单方法

    在博文"Gstreamer在Ubuntu上的安装和MP3的播放"中,写了在ubuntu上从头到尾构建gstreamer的详细过程,那是我在一次小项目培训中和队友一起努力了将近一周的 ...

  9. Andrew Ng机器学习课程13

    Andrew Ng机器学习课程13 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 引言:主要从一般的角度介绍EM算法及其思想,并推导了EM算法的收敛性.最后 ...

  10. php 云片国外短信实例

    <?php namespace Ruifi\App; class SmsL { public function smsIcode($moblie,$sms_code,$intl_code){ h ...