css3设计模式，常用布局

html-css016

css3设计模式，常用布局,第1张

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局

3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分：

子元素纵向等距排列：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

<!DOCTYPE html>

<head>

<meta charset='UTF-8' />

<title>Transparent Borders</title>

<link rel='stylesheet' type='text/css' href='css/style.css' />

<style>

#lightbox { 

background-color: white

-moz-background-clip: padding     /* Firefox 3.6 */

-webkit-background-clip: padding  /* Safari 4? Chrome 6? */

background-clip: padding-box      /* Firefox 4, Safari 5, Opera 10, IE 9 */

 

border: 20px solid rgba(0,0,0,0.3)

/*-webkit-border-radius: 40px

-moz-border-radius: 40px

border-radius: 40px*/ 

padding: 30px

width: 250px

text-align: center

position: absolute 

top: 100px

left: 200px 

}

</style>

</head>

<body>

  

<div id="page-wrap">

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>

<div id="lightbox">

<h1>一个层就可以搞定</h1>

ye！！！！

</div>

</div>

</body>

</html>

一个层就可以搞定的了。。。用到background-clip

这里的效果是这样：

阴影什么的，自己加上就可以了。