居中

  • 常用居中
elemP{
text-align: center;
}
elelmP elemC{
display: inline-block;
}
elemP{
display: table;
margin-left: auto;
margin-right: auto;
}
elelmP elemC{
display: table-cell;
}
elemP{
height: Xpx;
line-height: Xpx;
}
       elemP{
position: relative;
height: 100px; //必须设置高度
}
elelmP elemC{
position: absolute;
margin: auto;
width: ; //设置百分比动态或固定值
height: ;
overflow: auto; //防止可能的溢出
top: 0;
left: 0;
bottom: 0;
right: 0;
}
* 视区内居中
      elemC{
position: fixed; //
z-index: 9999; //
margin: auto;
width: ;
height: ;
overflow: auto;
top: 0;left: 0;bottom: 0;right: 0;
}
* 放置到边栏
      elemC{
position: absolute;
margin: auto;
width: ;
height: ;
overflow: auto;
top: 0;left: 0;bottom: 0;right: 0;
left/right/top/bottom: auto; //
}
*  自适应
      elemC{
position: absolute;
margin: auto;
width: ;
height: ;
overflow: auto;
top: 0;left: 0;bottom: 0;right: 0;
min-width: ; //
max-width: ; //
}
  • 其他居中技术

    • 使用负外边距 //属于固定宽高的情况下
    elemC{
width: ;
height: ;
padding: ;
position: absolute;
top: 50%; left: 50%;
margin-left: -px; /* (width + padding)/2 */
margin-top: -px; /* (height + padding)/2 */
}
* 使用平移
    elemC{
width:;
height: ;
position: absolute;
margin: auto;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}

布局

浮动布局

  • float: 注意设置float是影响周围元素
  • clear: 浮动布局后在包裹元素设置一个clear:both消除对其他元素的影响,不过更常用的是如下方法:
.clearfix:after{
content: "";
display: block;
clear: both;
visibility: hidden;
}

box-sizing

  • content-box:(默认值)

    • element值 = content(text) + padding + border + margin;
  • border-box:(IE传统盒子模型)
    • element值 = content(text + padding + border) + margin;
  • inherit(继承)

溢出

overflow

  • visible: 注意不剪切内容
  • auto: 超出即添加滚动条
  • hidden: 超出即隐藏
  • scroll: 添加滚动条

text-overflow (注意在设置overflow: hidden; 后才有意义)

  • clip: 默认
  • ellipsis: 隐藏后,超出部分显示省略号

white-space

  • nowrap: 强制显示在一行

css布局2的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  10. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

随机推荐

  1. linux 配置tomcat运行远程监控(JMX)

    在实际使用中,我们经常要监控tomcat的运行性能.需要配置相应的参数提供远程连接来监控tomcat服务器的性能.本文详细介绍如何一步一步的配置tomcat相应参数.允许远程连接监控. 工具/原料 v ...

  2. 【python】入门学习(三)

    for循环 for i in range():   #注意冒号 range中默认从0开始 或者从指定的数字开始 到给定数字的前一个数字结束 递增递减皆是如此 for循环提供变量的自动初始化 for i ...

  3. Alcatraz安装在xcode7失败执行下面代码

    1.步奏rm -rf ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins/Alcatraz.xcplugin 2.步奏 rm ...

  4. 【2016-10-11】Linux系统常用的关机或重启命令shutdown、reboot、halt、poweroff、init 0及init 6的联系与区别

    Linux下常用的关机/重启命令一般包括: shutdown.reboot.halt.poweroff等,当然了我们可以使用init 运行等级runlevel 0即halt来关机,或使用init 运行 ...

  5. 使用vsphere client 克隆虚拟机

    免费的VMWare ESXi5.0非常强大,于是在vSphere5.0平台中ESXi取代了ESX.,使用ESXi经常会遇到这样的问题,我需要建立多个虚拟机,都是windows2003操作系统,难道必须 ...

  6. 51nod1066(bash博弈)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1066 题意:中文题诶- 思路:感觉博弈全靠yy- 在双方都没有 ...

  7. Android 反编译 -- apktool、dex2jar、jd-gui

    原文:http://blog.csdn.net/vipzjyno1/article/details/21039349/ apktool 最新官网: http://ibotpeaches.github. ...

  8. C++11的模板新特性-变长参数的模板

    这个特性很赞,直接给例子吧,假如我要设计一个类,CachedFetcher内部可能使用std::map也可能使用std::unordered_map,也可能是其它的map,怎么设计呢?没有C++11变 ...

  9. ****CodeIgniter使用cli模式运行,把php作为shell编程

    shell简介 在计算机科学中,Shell俗称壳(用来区别于核).而我们常说的shell简单理解就是一个命令行界面,它使得用户能与操作系统的内核进行交互操作. 常见的shell环境有:MS-DOS.B ...

  10. Shell编程基础教程3--Shell输入与输出

    3.Shell输入与输出    3.1.echo        echo命令可以显示文本行或变量,或者把字符串输出到文件        echo [option] string             ...