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. Ionic4.x 创建页面以及页面跳转

    创建页面: 1.cd 到项目目录 2.通过ionic g page 页面名称 3.创建完成组件以后会在 src 目录下面多一个 button 的目录,它既是一个页面也是一个 模块. 4.如果我们想在 ...

  2. angular 中的[ngClass]、[ngStyle]

    <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> </ ...

  3. ISO/IEC 9899:2011 条款6.4.7——头文件名

    6.4.7 头文件名 语法 1.header-name: <  h-char-sequence  >         "  q-char-sequence  " h-c ...

  4. rf笔记

    1.使用robot 用例绝对路径 可执行用例 2.robot --h 可以查看命令用法 3. 创建字典 *** Settings *** Library         Collections *** ...

  5. Docker 部署 ELK 收集 Nginx 日志

    一.简介 1.核心组成 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引 ...

  6. SpringCloud学习成长之路二 服务客户端（rest+ribbon）

    在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的. Spring cloud有两种服务调用方式,一种是ribbon+restTemplate,另一种是f ...

  7. 利用Python获取cookie的方法,相比java代码简便不少

    1.通过urllib库,是python的标准库,不需要另外引入,直接看代码,注意代码的缩进: # coding=UTF-8import cookielibimport urllib2 class Ry ...

  8. mariadb升级

    官方文档升级:https://mariadb.com/kb/en/library/upgrading/ 1.备份原来的数据库和配置文件 # mysqldump -u root -p -A > a ...

  9. ul根据后台添加li，并在点击li时，颜色随之变化

    在我们大多数时候都是通过<ul><li>...</li></ul>来实现同级的加载,但是也用很多时候li里的内容是不固定的.需要根据后台返回数据来生成. ...

  10. js 数组去重、去空（收藏）

    function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15, ...