文档章节

css学习-布局

bosscheng
 bosscheng
发布于 2015/04/14 20:45
字数 280
阅读 69
收藏 2
点赞 0
评论 0
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
粉丝 78
博文 211
码字总数 91232
作品 0
南京
前端工程师
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

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

愚人码头 ⋅ 2017/12/12 ⋅ 0

DIV+CSS布局与程序开发关系?

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

名字已被取 ⋅ 2016/03/10 ⋅ 2

CSS技术学习资源

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

dhb_oschina ⋅ 2016/08/28 ⋅ 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

Vue学习曲线

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

iceuncle ⋅ 2017/11/28 ⋅ 0

CSS布局学习

以前对CSS布局有些接触,但是因为没有系统的学习过,导致每次在调整和修改起来都觉得比较困难,为了解决这个难啃的骨头花了两天时间系统的把目前比较主流的CSS布局方式系统的看了一遍,解决了...

颭夏 ⋅ 2017/02/19 ⋅ 0

HTML-CSS

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

掘金官方 ⋅ 01/04 ⋅ 0

web前端开发小白需要怎样学习才能迅速掌握前端技术?

  今天来和大家讲讲零基础小白学习web前端开发,需要怎样学习才能迅速掌握前端技术?学习前端开发又需要用到哪些开发工具呢?这里首先分享一下我自己的经验,我自己目前是搞后端开发【也就是...

Java编程语言基础入门博客 ⋅ 2017/04/14 ⋅ 0

web前端基础案例-鼠标悬停图文切换效果

酷鼠标悬停图文切换 效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企业布局思维运用,开发标准。 👇html代码: 👇css代码: 文章分享...

急速奔跑中的蜗牛 ⋅ 02/07 ⋅ 0

小白看学习前端内容

小白看学习前端内容 web前端工程师其实在不同的公司,有不同的职能,但是称呼都是类似的   1.做网站设计、网页界面开发   2.做网页界面开发   3.做网页界面开发、前台数据绑定和前台逻辑...

MyDear宸 ⋅ 2017/05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部