CSS学习笔记--布局

http://blog.csdn.net/magneto7/article/details/70854472

盒子模型

flex布局

响应式web设计之CSS3 Media Queries

1、盒子模型

盒子模型的相关属性

margin（外边距/边界）

border（边框）

padding（内边距/填充 ）



水平居中和垂直居中

水平居中包含两种情况：

块级元素的水平居中：

margin:0px auto;
.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute; left:50%; transform:translate(-50%);}

文字内容的水平居中：text-align: center;

垂直居中：

常见的单行文字的垂直居中可设置文字所在行的height与

行高样式属性一致，比如：

div{
width: 400px;
height: 400px;
**line-height: 400px;/***行高与div高度一致*/
}

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
/*第二种方法*/
.parent{position:relative;}
.child{positon:absolute; top:50%; transform:translate(0,-50%);}
/*第二种方法*/
.parent{display:flex; align-items:center;}

浮动属性

理解浮动属性首先要搞清楚，什么是文档流？

文档流：浏览器根据元素在html文档中出现的顺序，

从左向右，从上到下依次排列

浮动属性是CSS中的定位属性，用法如下：

float: 浮动方向(left、right、none);

.content {
**float:left;**
width:60%;
height:100%;
}

left为左浮动、right为右浮动、none是默认值表示不浮动

，设置元素的浮动，该元素将脱离文档流，向左或向右移动

直到它的外边距碰到父元素的边框或另一个浮动元素的边

框为止

clear清除

clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行

clear属性的取值：rigth、left、both、none

block，inline和inline-block概念和区别

block：块级元素

inline：内联元素

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

flex布局（弹性布局）

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。



容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

以下6个属性设置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}



flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {

flex-flow: || ;

}

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;

}



flex-start（默认值）：左对齐
9c25

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;

}



flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

项目的属性

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

响应式web设计之CSS3 Media Queries

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}