文档章节

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
粉丝 80
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

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

愚人码头
10/29
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
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方
01/04
0
0
Vue学习曲线

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

iceuncle
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS官方钱包keosd

EOS官方钱包的名称是keosd,它负责管理你的私钥,并且帮你进行交易的签名。 不过不幸的是,keosd钱包对普通用户并不友好,它是一个命令行程序,目前还没有像以太坊的mist那样的图形化界面,而...

汇智网教程
今天
32
0
ArrayList的实现原理以及实现线程安全

一、ArrayList概述 ArrayList是基于数组实现的,是一个动态的数字,可以自动扩容。 ArrayList不是线程安全的,效率比较高,只能用于单线程的环境中,在多线程环境中可以使用Collections.syn...

一看就喷亏的小猿
今天
38
0
Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
43
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
56
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部