布局方式

  • 一列布局

    通常固定宽高,用margin:0 auto;居中显示
  • 两列布局

    说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。设置左左浮动,或设置左右浮动(这是需要确定父级元素的宽度)。如何父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响 。对于自己相邻元素清除浮动产生的影响用:clear:both;。
  • 三列布局

    两列定宽中间自适应:首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响!或者为父级元素设置relative属性,再为子元素设置absolute属性,再分别定位,调间距。
  • 混合布局

    在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。

对齐方式

  • 水平居中

    • 行内元素的水平居中

      如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内水平居中,将子元素的display设置为inline-block,是子元素变成行内元素
    • 块状元素的水平居中(定宽)

      当被设置为定宽块级元素时,设置左右margin值为auto来实现居中。
    • 块级元素的水平居中(不定宽)

      可以直接给不定宽的块级元素设置text-align:center来实现,也可以给父元素设置text-align:center来实现居中效果。

      当不定宽块级元素的宽度不要占一行时,可以设置display为inlin或inline-block来实现。
  • 垂直居中

    父元素是盒子容器且高度已设定

    • 子元素是行内元素,高度由其内容撑开

      设定父元素的line-height为其高度来设置垂直居中
    • 子元素是块级元素但是子元素高度没有设定

      无法用margin,padding来设置,通过给父元素设置display:table-cell;verticle-align:middle来解决。
    • 子元素是块级元素且高度已设定

      计算子元素的margin-top或margin-bottom,计算方法为(父元素高度-子元素高度)/2。
  • 水平垂直居中

    • 水平对齐+行高

      text-align+line-height实现单行文本水平垂直居中
    • 水平+垂直对齐
      • text-align+verticle-align

        在父元素设置text-align和verticle-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素。
      • 若子元素是图像,可不使用table-cell,而是其用行高代替高度,且字体大小设置为0。子元素本设置为verticle-align:middle。
        <style>
        .parent{
        text-align: center;
        line-height: 100px;
        font-size: 0;
        }
        .child{
        vertical-align: middle;
        }
        </style> <div class="parent" style="background-color: gray; width:200px; ">
        <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
        </div>
  • 相对+绝对定位

    使用absolute,利用绝对定位元素的盒模型特性,在偏移值为确定值的基础上,设置margin:auto

    <style>
    .parent{
    position: relative;
    }
    .child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 80px;
    margin: auto;
    }
    </style> <div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
    <div class="child" style="background-color: lightblue;">测试文字</div>
    </div>

    参考:http://www.cnblogs.com/chaixiaozhi/p/8486647.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布局笔记

    1.display   block块级元素(div.p等) inline 行内元素(a.span等) 常见的例子:把li修改成inline ,制作成水平菜单 2.max-width 来适应不同浏览器窗 ...

  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. face++

    1.链表反转 2.快排 3.m*k   n*k两矩阵计算欧几里得距离np.tile 4.链表排序,要求时间复杂度小于O(N^2),空间O(1),不允许改变链表的值 5.2sum及其变体 6.给一个数组 ...

  2. notepad++怎样添加文件目录

    需要安装一个Explorer.dll文件 方法一:这个方法我个人试了不成功,可能因为版本问题,进入后选择Explorer进行安装 方法二:网上下载      Explorer.dll文件,放到\\No ...

  3. Gradle Goodness: Run a Build Script With a Different Name

    Normally Gradle looks for a build script file with the name build.gradle in the current directory to ...

  4. XAMPP启动mysql问题

    Problem detected!21:57:44 [mysql] Port 3306 in use by ""E:\MySQL\bin\mysqld" --defaul ...

  5. 有关dubbo面试的那些事儿

    dubbo是什么 dubbo是一个分布式框架,远程服务调用的分布式框架,其核心部分包含: 集群容错:提供基于接口方法的透明远程过程调用,包括多协议支持,以及软负载均衡,失败容错,地址路由,动态配置等集 ...

  6. 关于osi的7层与tcp的4层网络协议的理解

    osi 七层模型 应用层 提供接口 表示层 机器语言的二进制转换 对话层 决定是否传输 传输层 确定可不可靠 排差错 控流 网络层 提供逻辑地址 选路 数据链路层 mac 错误检测 物理层 设备间的比 ...

  7. 在阿里云的CentOS 6.5 上面安装 timidity++ 和 ffmpeg(含libmp3lame) 实现命令行将midi转换为mp3

    首先使用yum安装需要的组件 yum install -y automake autoconf libtool gcc gcc-c++ yasm yasm-devel 然后从sourceforge下载 ...

  8. 一起来学大数据——走进Linux之门,学习大数据的重中之重

    昨天我们看了有关大数据Hadoop的一些知识点,但是要在学习大数据之前,我们还是要为大数据的环境做一些的部署. 那么,今天我们就来讲讲开启我们大数据之路的Linux,跟上我们的脚步yo~ Linux介 ...

  9. 使用jenkins中遇到的问题汇总/持续更新

    jenkins产生大量日志文件 question: [DNSQuestion@1446063419 type: TYPE_IGNORE index 0, class: CLASS_UNKNOWN in ...

  10. html表单相关标签及属性

    1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 2.<label> ...