文档章节

css学习-布局

bosscheng
 bosscheng
发布于 2015/04/14 20:45
字数 280
阅读 69
收藏 2
css

css布局技术的根本都是三个基本概念:定位,浮动,外边距操纵。


在页面中水平居中

width:920px
margin:0 auto;

body{
    text-align:center // ie会误解让所有东西居中,而不只是文本。
}

创建两列和三列的基于浮动的布局

主要都是使用float来实现。

但是最好添加display:inline 来预防ie中的双外边距浮动产生的bug.

可以对

.content{
    overflow:hidden;
}

创建固定宽度、流式和弹性布局。

对于流式布局 : 尺寸是使用百分比而不是像素设置的。这使得流式布局能够相对于浏览器窗口进行伸缩。

但是在变小到时候 可以添加像素或者添加min-width.从而防止问题呢。

对于弹性布局:对于字号而不是浏览器宽度来设置元素宽度。以em为单位设置宽度,以确保在字号在增加的时候整个布局随着扩大。

创建高度相等的列

对于css3 可以通过 

column-count

column-witdh

column-gap

column-rule



css框架和css系统


© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 81
博文 302
码字总数 94883
作品 0
南京
前端工程师
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

本文首发于:www.css88.com/archives/86… 这篇文章是 CSS Grid 布局有用的资源和教程,帮你快速了解相关知识。同时还比较了 CSS Grid 、 Flexbox 、 Table 布局之间的区别,及适用情况。 CS...

愚人码头
2017/12/12
0
0
DIV+CSS布局与程序开发关系?

可以说两者有关系,又可以说没有关系。 两者有关系,那是程序和CSS布局都可以由一个人完成;没关系,是可以由不同人来完成。 程序是主要对数据处理、计算,比如表单数据交互数据、数字运算、...

名字已被取
2016/03/10
67
2
CSS技术学习资源

基础知识 对于CSS的学习常用属性的了解 w3school就不错。 Mozilla Development Network(MDN)中关于CSS入门教程的知识的文章,很全面。 布局 学习CSS布局 如何学习 张鑫旭大神也教我们如何做人...

dhb_oschina
2016/08/28
19
0
分享29本关于div+css的学习书籍(免费下载)

分享29本关于div+css的学习书籍(免费下载) 1、多浏览器兼容分析 2、浏览器兼容 3、CSS参考手册3.4 4、网页设计师 5、网页制作完全手册 6、十天学会DIV+CSS(WEB标准) 7、WEB设计版精华荟萃 ...

邓剑彬
2012/11/30
2.3K
2
Vue学习曲线

vue如今已是前端最火热的框架技术之一了,如何从0到掌握vue技术,在此介绍一下学习曲线和途径。 前端入门 以下是前端基础语言推荐的学习链接(过完一片后可以作为参考手册使用) html css js 另...

iceuncle
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
41
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
34
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
43
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
34
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
43
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部