【CSS3】布局
浮动布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>header</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
</body>
</html>
*{
margin:;
padding:;
}
header{
height: 100px;
background:rgba(10,180,10,0.5);
}
aside{
width: 30%;
height:450px;
background:rgba(180,10,10,0.5);
float: left;
border:1px solid blue;/*aside的width加上section的width等于100%，此句会多出2px宽，影响正常布局。*/
box-sizing: border-box;/*content-box总宽不包括外边框。border-box总宽包括外边框，可以解决上面那个问题。*/
}
section{
width: 70%;
height: 450px;
background:rgba(10,10,180,0.5);
float: left;
}
footer{
height: 100px;
background:pink;
clear: left;
}
定位布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>header</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer> <div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
*{
margin:;
padding:;
}
body{
/*border:1px solid red;*/
width: 800px;
margin:0 auto;
position: relative;
}
header{
width: 800px;
height: 100px;
background:red;
}
aside{
width: 200px;
height: 300px;
background:green;
}
section{
width: 600px;
height: 300px;
background:blue;
position: absolute;
left: 200px;
top: 100px;
}
footer{
width: 800px;
height: 100px;
background:orange;
}
#div1{
width: 500px;
height: 400px;
background:rgba(200,20,20,0.2);
margin:50px;
position: relative;/*此属性设置后其子元素则相对父元素定位*/
}
#div2{
width: 100px;
height: 80px;
background:rgba(20,20,200,0.5);
position: absolute;/*以body左上角坐标为基准点*/
left: 10px;/*左上角距body左边距离*/
top: 10px;/*左上角距body上边距离*/
}
多列布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<h1>标题h1</h1>
<p>多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局</p>
<p>多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局</p>
</section>
</body>
</html>
p{
text-indent: 2rem;/*首先缩进*/
line-height: 2rem;/*行间距*/
}
section{
padding: 1em;
background:rgba(20,200,20,0.3);
column-width: 300px;
/*-webkit-column-width:300px;*/
-webkit-column-count:;
-webkit-column-rule-style: solid;
-webkit-column-rule-width: 2px;
-webkit-column-rule-color: red;
-webkit-column-gap: 40px;
}
h1{
background:rgba(180,18,18,0.7);
text-align: center;
-webkit-column-span:;/*规定元素可横跨的列数，默认为1，不横跨。all为横跨所有列。*/
}
弹性布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<h1>标题h1</h1>
<p id="p1">多列布局多列布局多列布局多列</p>
<p id="p2">多列布局多列布局多列布局多列布局多列布局</p>
<p id="p3">多列布局多列布局多列布局多列布局多</p>
<p id="p4">多列布局多列布局多列布局多列布局多</p>
<p id="p5">多列布局多列布局多列布局多列布局多</p>
<p id="p6">多列布局多列布局多列布局多列布局多</p>
<p id="p7">多列布局多列布局多列布局多列布局多</p>
<p id="p8">多列布局多列布局多列布局多列布局多</p>
<p id="p9">多列布局多列布局多列布局多列布局多</p>
</section>
</body>
</html>
p{
text-indent: 2rem;/*首先缩进*/
line-height: 2rem;/*行间距*/
width: 200px;
margin:20px;
}
p:nth-child(2){
background:rgba(190,19,19,0.5);
}
p:nth-child(3){
background:rgba(19,190,19,0.5);
}
p:nth-child(4){
background:rgba(19,19,190,0.5);
}
section{
width: 1000px;
height: 500px;
background: rgba(180,18,18,0.1);
display: flex;/*弹性盒子属性开启后浮动float、clear、vertical-align、CSS多列(CSS columns)将失效。*/
flex-direction:;/*row默认横向布局。row-reverse从右到左布局，且内容反转。column竖向布局。column-reverse纵向反转布局。*/
flex-wrap:;/*nowrap不换行。wrap换行。wrap-reverse换行且反转排列*/
justify-content: ;/*flex-start默认排列方式。flex-end从结束处开始对齐。center剧中排列。space-between两端分散等距排列对齐，两端无空。space-around类似space-between，但两端有空。*/
/*横向排列则x为主轴主y为侧轴，竖向排列则y为主轴x为侧轴。*/
align-items: ;/*flex-start默认顶端对齐。flex-end底端对齐。center剧中对齐。baseline基线对齐，基线可理解为小写字母a下划线，底线可理解为小写字母g下划线，顶线可理解为上写字母b上划线，中线可理解为小写字母a中划线。stretch拉伸。*/
align-content:;/*flex-start、flex-end、center、baseline、stretch*/
}
h1{
background: red;
height: 90px;
order:;/*值越小越靠前*/
}
#p1{
height: 200px;
order:;
flex-grow:;/*所有子元素设为1后则所有子元素会平均分配空间使得全部充满父元素。子元素扩展充满父元素时的比例因子*/
flex-shrink: ;/*父元素收缩时子元素所占空间的比例因子，值越大父元素收缩时子元素分担的越大即子元素收缩越多*/
flex-basis: 30px;/*设置固定值，不受其他元素收缩影响*/
}
#p2{
height: 180px;
}
#p3{
height: 160px;
/*align-self: flex-end;*//*作用同align-items，只中align-items设置在父元素上作用于子元素，align-self是设置在子元素上作用于子元素本身。*/
}
#p4{
background: pink;
height: 150px;
}
#p5{
background: orange;
height: 140px;
}
#p6{
background: pink;
height: 130px;
}
#p7{
background:green;
height: 120px;
}
#p8{
background: blue;
height: 110px;
}
#p9{
background: yellow;
height: 170px;
}
给HTML设置边框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
border:2px solid green;
margin:2px;/*给所有的加边框，包括html*/
}
body,html{
height: 100%;/*此设置会使div的高度百分比设置生效*/
}
div{
width: 100%;
height: 50%;
background:red;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
弹性盒子布局简单示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>header头部</header>
<section>
<nav>nav导航</nav>
<article>article正文</article>
<aside>aside右侧栏</aside>
</section>
<footer>footer底部</footer>
</body>
</html>
*{
margin:;
padding:;
}
body,html{
height: 100%;/*若不设置此属性则flex-grow不会生效*/
font-weight: bold;
font:2em 黑体;
}
header,footer{
background:rgba(110,11,11,0.5);
padding: 10px;
text-align: center;
line-height: 2rem;
color: #fff;
/*flex-grow: 1;*//*头底各占一份*/
}
section{
background:rgba(17,170,17,0.5);
/*flex-grow: 8;*//*中间占8份*/
flex-grow:;
display: flex;
flex-flow: row;
}
nav{
background:rgba(18,18,180,0.5);
width: 150px;
}
article{
min-width: 400px;
background:rgba(110,110,20,0.5);
flex-grow:;
}
aside{
background:rgba(30,120,120,0.5);
}
body{
display: flex;/*开启弹性盒子布局模式*/
flex-flow: column;
}
【CSS3】布局的更多相关文章
- 针对移动设备的CSS3布局
针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...
- 学习笔记 第十一章 CSS3布局基础
第11章 CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1 CSS盒模型基础 页面中所有元素基本显示形态为方形 ...
- web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- 说说css3布局
使用float属性或position属性布局的缺点 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&qu ...
- CSS3 布局
1.1 列布局 CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时 ...
- CSS3基础(3)——CSS3 布局属性全接触
一. 弹性盒模型 1.弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现 ...
- CSS3布局样式
CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...
- CSS3布局篇（多列布局）
我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...
随机推荐
- 猪圈密码python脚本实现
CTF比赛中,MISC题型中有时候会考到一种一种叫做"猪圈密码"(Pigpen_chiper)的简单加密方式.网上有个表可以对照地来实现解密,但是实际中太慢不符合竞速思维,于是写一 ...
- （二）部署solr7.1.0到tomcat
solr7.1.0部署到tomcat8 官方表示solr5之后的版本不再提供对第三方容器的支持(不提供war包了). "旧式"solr.xml格式不再支持,核心必须使用core.p ...
- unity3d资源打包总结
http://www.manew.com/blog-33734-12973.html unity 打包的时候会把下面几个文件资源打进apk或者ipa包里面 1. Asset下的所有脚本文件 2. As ...
- TFboy养成记 多层感知器 MLP
内容总结与莫烦的视频. 这里多层感知器代码写的是一个简单的三层神经网络,输入层,隐藏层,输出层.代码的目的是你和一个二次曲线.同时,为了保证数据的自然,添加了mean为0,steddv为0.05的噪声 ...
- Linux上安装和卸载mysql数据库 （一）
一.前言 第一次写博客,很激动同时有点畏惧,激动是我可以将我的经验进行分享,畏惧是我怕我写的东西,大家借鉴的时候,有些步骤不能成功.不过,我还是很有信息的,我分享的经验都是我搭建成功以后才分享出来.这 ...
- 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结（一）
前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...
- 开源API测试工具 Hitchhiker v0.5更新 - 完善细节
Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持Schedule, 数据对比,压力测试,支持上传脚本定制请求,可以轻松部署到本地,和你的team成员一起管理Ap ...
- Python 运行效率为何低
当我们提到一门编程语言的效率时:通常有两层意思,第一是开发效率,这是对程序员而言,完成编码所需要的时间:另一个是运行效率,这是对计算机而言,完成计算任务所需要的时间.编码效率和运行效率往往是鱼与熊掌的 ...
- [对smartMenu.js改进] 解决右键菜单栏在边缘弹出后，移出视图区域无法操作的问题
当用户在视图边缘(如右下角)右键召唤菜单栏的时候,菜单仍然从选中元素的右下角弹出,这时二级菜单栏一般都离开了视图区域,用户无法进一步操作. 这个问题挺常见的,原作者的留言板: 但是作者应该是已经不再维 ...
- Linux上安装 MongoDB ZK MEMCACHE PHP扩展
安装mongo扩展: 下载地址:https://github.com/mongodb/mongo-php-driver,下载该源码包 /usr/local/php/bin/pecl install m ...