关闭

CSS布局系统

标签: css布局
119人阅读 评论(0) 收藏 举报
分类:

css 布局系统 包含 盒子模型 和 布局模型,把页面元素看作一个个盒子,布局就是一个个盒子的排列和摆放

一、盒子模型

从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

二、布局模型

(一)Flow(流动布局)

display设置block、 inline 、none 、 inline-block

(二)Position (层级布局或者Layer布局)

设置position

(三)Float(浮动布局)

设置float

(四)Flexbox

display 设置flex


参考链接:
http://www.cduyzh.com/css-layout/
https://weex.incubator.apache.org/cn/guide/intro/page-architecture.html
http://zh.learnlayout.com/toc.html

0
0
查看评论

CSS各种常用布局

三列布局自适应,高度占满 注意高度占满用100%时要对html和body先设置height:100%;因为每个元素的100%都是取决于父元素相同属性值。 宽度自适可以使用flex或width使用33.33%; 下面是使用flex,布局三列,使其自适。<!doctype html> <...
  • mzzzzq
  • mzzzzq
  • 2016-04-22 11:17
  • 2965

css-水平和垂直布局

1. 盒子模型margin外边距,border边框,padding内边距,element元素2. 水平布局2.1 盒子模型理解水平布局父元素width=子元素margin-left+border-left+padding-left+width+padding-right+border-right+m...
  • github_34514750
  • github_34514750
  • 2016-04-02 17:06
  • 2286

CSS的四种布局方式static/relative/fixed/absolute

本文所翻译的原文地址点击此处 static static布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。relative 相对布局是相对其在标准文档流中的位置而言的。设置其top/l...
  • luofeng457
  • luofeng457
  • 2017-04-22 18:02
  • 806

CSS等高布局的6种方式

前面的话   等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局   伪等高...
  • cometwo
  • cometwo
  • 2016-05-04 22:24
  • 8381

CSS基础知识-五(CSS定位、左右布局方法)

一、CSS定位 1、Float:left / right /none;------左浮动/右浮动/无 2、Position:absolute;----绝对定位 3、Position:relative;-----相对定位(top/right/bottom/left) 注意: 父级(大div) ...
  • u012054869
  • u012054869
  • 2016-05-31 20:12
  • 1338

web前端面试常见问题二 ------css布局(position)

web前端面试常见问题二                  ------css布局(position)    前言:博主我今年大三,web前端学了也有小半年啦,因为大四没课啦,所以...
  • u012763269
  • u012763269
  • 2015-06-22 14:02
  • 2003

CSS经典布局之弹性布局

当我们在浏览浏览器的时候,常常会放大/缩小浏览器的显示比例,或者在不同的设备上,所处的分辨率也不尽相同。因此,我们需要学习一个新的知识:弹性盒模型。 弹性盒模型 实现项目对齐,方向,排序(即使项目大小位置动态生成),能够动态修改子元素的宽度和高度,具有良好的适配性。 如图就是弹性布局一个大概范围...
  • u011318165
  • u011318165
  • 2015-08-23 18:04
  • 1521

CSS 布局经典问题初步整理

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
  • h3243212
  • h3243212
  • 2017-05-19 00:10
  • 1123

一个好例子:DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div...
  • u014801801
  • u014801801
  • 2016-12-11 22:20
  • 5578

css的3种布局方式

1.文档流布局方式,这是最基本的布局方式,就是按照文档顺序一个一个地显示,块元素独占一行,内联元素共享一行。 2.浮动布局方式,某个元素浮动之后,其后面的元素就当其不存在而占用其原来的地方,按照原来文档流布局方式布局。 可以通过清除(左或右)浮动清除掉浮动元素对后面的影响(clear)。可以向左向右...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015-10-14 20:18
  • 2748
    博客专栏