CSS ? Layout Module : CSS 布局模型

https://www.w3.org/TR/css-grid-1/

CSS Grid Layout Module Level 1

W3C Working Draft, 19 May 2016

https://www.w3.org/TR/css3-multicol/

CSS Multi-column Layout Module

W3C Candidate Recommendation 12 April 2011

https://www.w3.org/TR/css-ruby-1/

CSS Ruby Layout Module Level 1

W3C Working Draft, 5 August 2014

https://www.w3.org/TR/css-inline-3/

CSS Inline Layout Module Level 3

W3C Working Draft, 24 May 2016

https://www.w3.org/TR/css-flexbox-1/

CSS Flexible Box Layout Module Level 1

W3C Candidate Recommendation, 26 May 2016

“Old” Flexbox and “New” Flexbox

https://css-tricks.com/old-flexbox-and-new-flexbox/

https://drafts.csswg.org/css-position/#sticky-pos

CSS Positioned Layout Module Level 3

Editor’s Draft, 19 August 2016

https://www.w3.org/TR/CSS21/visuren.html#fixed-positioning

https://www.w3.org/TR/css-flexbox-1/

CSS Template Layout Module

W3C Working Group Note 26 March 2015

9.3.1 Choosing a positioning scheme: 'position' property

The 'position' and 'float' properties determine which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.

'position'

Value:   static | relative | absolute | fixed | inherit

Initial:   static

Applies to:   all elements

Inherited:   no

Percentages:   N/A

Media:   visual

Computed value:   as specified

9.2.4 The 'display' property

'display'

Value:   inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Initial:   inline

Applies to:   all elements

Inherited:   no

Percentages:   N/A

Media:   all

Computed value:   see text

1. Introduction

This section is not normative.

CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:

block layout, designed for laying out documents

inline layout, designed for laying out text

table layout, designed for laying out 2D data in a tabular format

positioned layout, designed for very explicit positioning without much regard for other elements in the document

This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_mode

Layout mode

CSS 布局模式, 有时简称为布局, 是一种基于盒子与其兄弟姐妹盒子和祖辈盒子的交互方式，来确定盒子的位置和框的大小的算法. 有以下几种不同形式:

块布局(block layout), designed for laying out documents. The block layout contains document-centric features, like the ability to float elements or to lay them out over multiple columns.

行内布局(inline layout), designed for laying out text.

表格布局(table layout), designed for laying out tables.

定位布局(positioned layout), designed for positioning elements without much interaction with other elements.

弹性盒子布局( flexible box layout), designed for laying out complex pages that can be resized smoothly.

网格布局(grid layout), designed for laying out elements relative to a fixed grid.

https://www.w3.org/TR/css-overflow-3/

CSS Overflow Module Level 3

W3C Working Draft, 31 May 2016

学习CSS布局
http://zh.learnlayout.com/

"display"属性

display CSS property specifies

https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。

对于大多数元素它们的默认值通常是 block 或 inline 。

一个 block 元素通常被叫做块级元素，一个 inline 元素通常被叫做行内元素。

一个块级元素会新开始一行并且尽可能撑满容器。

一个行内元素可以在段落中 <span> 像这样 </span>包裹一些文字而不会打乱段落的布局。

另一个常用的display值是 none 。

一些特殊元素的默认 display 值是它，例如 script 。display:none ;通常被用于JavaScript 中，来实现在不删除元素的情况下，隐藏/显示元素。

display: none ; (真隐藏元素，不占空间)与 visibility: hidden; (假隐藏元素,占空间)。

display: none ; 看不到元素，且不会保留元素原来占用的显示空间,

visibility: hidden; 看不到元素，但是仍会保留元素原来占用的显示空间.

tips:

每个元素都有一个默认的 display 类型,不过你可以随时随地的重写它！

虽然“人工制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。

常见的例子是：使用 li {display: inline}，制作成水平菜单。

margin: auto;

设置块级元素的 width 可以阻止它从左到右撑满容器，然后你就可以设置左右外边距为 auto 来使其水平居中。

元素会占据你所指定的宽度width(像素/百分百)，剩余的宽度(window.width-div.width)会被左右外边距平均分配。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时(指定的宽度?px;)，浏览器会显示一个水平滚动条来容纳页面。

让我们再来改进下这个方案...(指定的宽度 ?%;)

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。(min-width)?

这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

demo:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin center</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			background: rgba(0,0,0,0.7);
		}
		.d{
			border: 1px solid red;
			margin: 0 0 10px;
		}
		.d1{
			background: rgba(0,255,0,0.7);
			/*width: 700px;*/
			/*
				唯一的问题是，当浏览器窗口比元素的宽度还要窄时(指定的宽度?px;)，浏览器会显示一个水平滚动条来容纳页面。
				改进方案...(指定的宽度 ?%;)
			*/
			width: 70%;
			margin: 0 auto 10px;
			/*
				div 自动居中(设置width=?,margin=auto)
				width: 50%;
				margin: auto;
			*/
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="d d1">
			<h1>title</h1>
		</div>
	</div>
</body>
</html>
image:

1

盒子模型

在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒子模型。

margin = margin-top + margin-bottom ;

border = border-top +border-bottom ;

padding = padding-top + padding-bottom ;

盒子长度： (margin+border+padding)+height ;

盒子宽度：(margin+border+padding)+width ;

当你设置了元素的长度，宽度，实际展现的元素可能会超出你设置的width：因为元素的边框和内边距可能会撑爆元素width，height。

两个盒子设置相同(width)宽度的元素，实际显示的盒子宽度却不一样。

? padding: auto 15px//Error: Invalid property value

demo:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BOX</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			background: rgba(0,0,0,0.7);
			width: 702px;
			/*height: 300px;*/
			margin: 10px auto;
			padding: 1px 0;
		}
		.d{
			border: 1px solid red;
			text-align: center;
			margin: 0 auto 10px;
			background: rgba(0,255,0,0.7);
			color: rgba(255,0,255,0.7);
		}
		.d0{
			color: rgba(255,255,255,0.7);
		}
		.d1{
			width: 700px;
			/*margin: auto;
			padding: auto;*/
		}
		.d2{
			width: 700px;
			margin: auto 30px;			
			padding: 15px;			
			/*
				存在bug，优先级 ？
				padding: 0 15px;
				//OK
				padding: auto 15px;
				//Error: Invalid property value(Chrome 测试)
			*/
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="d d0">
			<h1>Box-width: 700px;</h1>
		</div>
		<div class="d d1">
			<h1>true width: 700px;</h1>
		</div>
		<div class="d d2">
			<h1>false width: 700px;</h1>
		</div>
	</div>
</body>
</html>
image:

以前有一个代代相传的解决方案是数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。

值得庆幸地是你不需要再这么做了...

所以他们新增了一个叫做 box-sizing 的CSS属性。

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。？ margin ?

Create fluid layouts with HTML5 and CSS3
http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-3142768

A Complete Guide to Grid
https://css-tricks.com/snippets/css/complete-guide-grid/

CSS Layout - inline-block
http://www.w3schools.com/css/css_inline-block.asp

学习CSS布局
http://zh.learnlayout.com/toc.html

学习CSS布局
http://zh.learnlayout.com/

使用CSS3 Flexbox布局
http://www.w3cplus.com/css3/css3-flexbox-layout.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/使用弹性盒子进行高级布局
 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications

posted @ 2016-08-20 08:47 xgqfrms 阅读(217) 评论(6) 编辑收藏举报

刷新页面返回顶部

xgqfrms

welcome to xgqfrms's official blogs of cnblogs!

CSS ? Layout Module : CSS 布局模型

CSS Grid Layout Module Level 1

W3C Working Draft, 19 May 2016

CSS Multi-column Layout Module

W3C Candidate Recommendation 12 April 2011

CSS Ruby Layout Module Level 1

W3C Working Draft, 5 August 2014

CSS Inline Layout Module Level 3

W3C Working Draft, 24 May 2016

CSS Flexible Box Layout Module Level 1

W3C Candidate Recommendation, 26 May 2016

“Old” Flexbox and “New” Flexbox

CSS Positioned Layout Module Level 3

Editor’s Draft, 19 August 2016

CSS Template Layout Module

W3C Working Group Note 26 March 2015

9.3.1 Choosing a positioning scheme: 'position' property

9.2.4 The 'display' property

1. Introduction

Layout mode

CSS Overflow Module Level 3

W3C Working Draft, 31 May 2016

"display"属性

margin: auto;

公告

Value:	static \| relative \| absolute \| fixed \| inherit
Initial:	static
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	as specified

Value:	inline \| block \| list-item \| inline-block \| table \| inline-table \| table-row-group \| table-header-group \| table-footer-group \| table-row \| table-column-group \| table-column \| table-cell \| table-caption \| none \| inherit
Initial:	inline
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	all
Computed value:	see text