Skip to content

Instantly share code, notes, and snippets.

@jieniu
Last active August 14, 2018 14:02
Show Gist options
  • Save jieniu/8169aa9ce738c6cf10e52413fd7f9744 to your computer and use it in GitHub Desktop.
Save jieniu/8169aa9ce738c6cf10e52413fd7f9744 to your computer and use it in GitHub Desktop.
CSS布局练习
<html>
<head>
<title>布局练习</title>
</head>
<body>
<div class="main">
<h1>页面宽度练习</h1>
<!--no width-->
<div class="nowidth relative solid-green">
<span class="up">&lt;div class="nowidth"></span>
<p>这里是一个没有设置width的盒子,它会尽可能的占用画面整个宽度,如果你屏幕比较宽,如果这句话也足够长,你从左到右阅读这段文字会感觉非常累,同时也降低了整个页面的审美。所以,我们需要设置内容的宽度。</p>
<p>注意到这个盒子左上角和右下角有两个标签,这两个标签的实现方式用到了position的一个特性,如果父容器的position是非static属性(这里设置的是relative属性,你可以查看css文件中的relative类选择器代码),子容器的position是absolute,则子容器的位置是相对于父容器的,参照css文件中的up和down选择器代码,当然,这种特性一般用来做页面的布局,请参照本文中“常规布局”中的例子。
</p>
<span class="down">&lt;/div></span>
</div>
<div class="set-width relative solid-green">
<span class="up">&lt;div class="set-width"></span>
<p>
这里是一个设置了width的框,我把width设置为600像素,不管你的屏幕有多宽,它都会自动换行,同时设置了margin为auto,这会让这段文字居中,这样屏幕的美观性看上去好了很多,唯一的问题是,如果你的屏幕小余600像素,例如手机屏幕,就会出现一个滚动条,其实也不是很完美。你可以查看css文件中set-width类选择器定义。
</p>
<span class="down">&lt;/div></span>
</div>
<div class="set-max-width relative solid-green">
<span class="up">&lt;div class="set-max-width"></span>
<p>
这里是一个设置了max-width的框,我把max-width设置为600像素,不管你的屏幕有多宽,它都会自动换行,同时设置了margin为auto,这会让这段文字居中,这样屏幕的美观性看上去好了很多,和上一段文字的区别是,如果你的屏幕小余600像素,字段文字会重新排列,完美的解决了上面的问题,但这并没完,假如你同时设置了padding和border-width属性,你会发现这些文字会突破你设置的600像素宽度。
</p>
<span class="down">&lt;/div></span>
</div>
<div class="set-max-width-padding-border relative solid-green">
<span class="up">&lt;div class="set-max-width padding border-width"></span>
<p>
和上面的set-max-width区别是,同时设置了padding和border-width属性,这些文字会突破你设置的600像素宽度。
</p>
<span class="down">&lt;/div></span>
</div>
<div class="set-max-width-border-box relative solid-green">
<span class="up">&lt;div class="set-max-width-border-box"></span>
<p>
要解决以上问题,你需要做的是,设置border-box属性,这样,你所有面临的宽度问题都解决了。很多前端开发工程师都会把border-box属性设置为全局属性,当然这里为了保持上一个例子的可视性,暂时没有这么做。
</p>
<span class="down">&lt;/div></span>
</div>
<h1>常规布局练习</h1>
<div class="container solid-green">
<nav class="nav solid-green">
<span class="up">&lt;nav></span>
<ul class="setmargin">
<li><a href="#">page1</a></li>
<li><a href="#">page2</a></li>
<li><a href="#">page3</a></li>
</ul>
<span class="down">&lt;/nav></span>
</nav>
<section class="sec solid-green">
<span class="up">&lt;section></span>
<p>
这里是一个典型的布局,左边是页面的导航,右边是页面的主体,你可以把它想象成一个博客页面,右边是一篇篇的文章
</p>
<span class="down">&lt;/section></span>
</section>
<section class="sec solid-green">
<span class="up">&lt;section></span>
<p>
这个布局是通过position属性来实现的,nav是导航部分,我们设置了nav对于外层container的相对位置为left:0px;width:200px;对于右边section部分,只需要将左外边距设置为200像素即可:margin-left:200px。值得注意的是,外部container并不需要设置高度,它的高度是随着section的高度的变化而变化的。
</p>
<span class="down">&lt;/section></span>
</section>
<footer class="foot solid-green">
<span class="up">&lt;footer></span>
<p>我是页脚,我设置了position:fixed熟悉,它会使某个元素固定在当前窗口的某个部分,即便你滚动页面,也不会改变它的位置,为了不遮挡页面底部,我设置了body的margin-bottom为150像素</p>
<span class="down">&lt;/footer></span>
</footer>
</div>
<h1>float练习</h1>
<p class="set-width setmargin">
<img src="http://oekyukinw.bkt.clouddn.com/qrcode.jpg" class="right-float">
这是一个p段落中的文字和图片,图片标签在文字的上方,图片设置了float:right属性,这样文字即可以围绕着图片进行排版,文字和图片的顶部对齐,由于图片边缘是白色的,看上去图片在文字的偏下方一点
</p>
<div class="clear-right">
<div class="box solid-green relative">
<span class="up">&lt;div class="box"></span>
<p>
我感觉我飘起来了
</p>
<span class="down">&lt;/div></span>
</div>
<section class="solid-green relative set-height">
<span class="up">&lt;section></span>
<p>
div标签在section标签上方,但因为div的box类设置了float:left属性,看上去好像section写在div的上方;因为div具有float:left属性,section的内容只会出现在div的右边。可如果有时候我们不希望这样,我们希望section还是出现在div的下方,这时,就需要使用clear:left属性
</p>
<span class="down">&lt;/section></span>
</section>
</div>
<div class="box solid-green relative">
<span class="up">&lt;div class="box"></span>
<p>
我感觉我飘起来了
</p>
<span class="down">&lt;/div></span>
</div>
<section class="solid-green relative clear-left">
<span class="up">&lt;section class="clear-left"></span>
<p>
div标签在section标签上方,虽然div的box类设置了float:left属性,但同时section的clear-left类设置了clear:left,即div还是在section的上方。如果你想消除右边的float作用,你需要设置clear:right,如果两边都有,则要设置clear:both;
</p>
<span class="down">&lt;/section></span>
</section>
<div class="set-width setmargin solid-green relative">
<span class="up">&lt;div></span>
<img src="http://oekyukinw.bkt.clouddn.com/qrcode.jpg" class="right-float">
<p>
如果左边的文字没有右边的图片的高度高,由于图片是float的,所以它会溢出到容器外面来。
</p>
</div>
<div class="set-width setmargin solid-green relative clearfix clear-right">
<span class="up">&lt;div class="clearfix"></span>
<img src="http://oekyukinw.bkt.clouddn.com/qrcode.jpg" class="right-float">
<p>
当我们把容器属性设置为overflow:auto,整个容器的高度就会将图片包在里面
</p>
</div>
<h1>百分比宽度和media queries练习</h1>
<div class="container solid-green">
<nav class="solid-green nav1 set-height">
<span class="up">&lt;nav class="nav1"></span>
<ul>
<li><a href="#">page1</a></li>
<li><a href="#">page2</a></li>
</ul>
<span class="down">&lt;/nav></span>
</nav>
<section class="solid-green sec2">
<span class="up">&lt;section class="sec2"></span>
<p>这一个布局,是使用宽度百分比和media queries制作,其中nav占宽度的25%,为了使nav和section定边对齐,需要设置nav的float:left属性。如果要在nav右边设置section,则要把section设置左外边距为25%的宽度margin-left:25%。</p>
<span class="down">&lt;/section></span>
</section>
<section class="solid-green sec2">
<span class="up">&lt;section class="sec2"></span>
<p>media queries是一种响应式布局,即可以适应大部分浏览器窗口的变化,这里设置了min-width=600px,和max-width=599px两种属性,当窗口超过600像素时,布局是左右结构,而当窗口像素小余600时,布局变成了上下结构,上面是导航栏,导航按照行进行排列,你可以缩小窗口看看效果</p>
<span class="down">&lt;/section></span>
</section>
</div>
<h1>更简单的flexbox练习</h1>
<div class="container2">
<nav class="nav3 solid-green">
<ul>
<li><a href="#">page1</a></li>
<li><a href="#">page2</a></li>
</ul>
</nav>
<div class="flex-column solid-green">
<section class="solid-green">
<p>
flexbox是更简单的布局模型
</p>
</section>
<section class="solid-green">
<p>
使用flexbox,你只需要设置列信息,例如导航条的宽度,及section的属性是可伸缩的,可以将多个section放入同一个div中实现该方案
</p>
</section>
</div>
</div>
</div>
</body>
</html>
.solid-green {
border: solid;
border-color: green;
}
.relative {
position: relative;
margin: 20px auto;
}
.nowidth {
height: 18em;
}
.up {
position: absolute;
left: 0;
top: 0;
padding:3px;
background-color: green;
line-height:1em;
}
.down {
position: absolute;
right: 0;
bottom: 0;
padding:3px;
border: solid;
border-color:green;
line-height:1em;
background-color:green;
}
.set-width {
width: 600px;
}
.set-max-width {
max-width: 600px;
height:13em;
}
.set-max-width-padding-border {
max-width: 600px;
height:6em;
padding: 30px;
border-width:10px;
}
.set-max-width-border-box {
max-width: 600px;
height:13em;
padding: 30px;
border-width:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p {
padding: 0 1em;
margin: 2em 0;
}
.nav {
position: absolute;
width:200px;
left:0px;
box-sizing: border-box;
}
.container {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.foot {
position: fixed;
bottom: 0;
left: 0;
height: 90px;
width:100%;
background-color: white;
}
.sec {
margin-left: 200px;
height: 150px;
top:0;
position: relative;
}
.setmargin {
margin: 2em auto;
}
body {
margin-bottom: 150px;
}
.right-float {
float: right;
margin: 0 0 1em 1em;
box-sizing: border-box;
}
.box {
float: left;
width: 200px;
height: 80px;
margin: 1em;
}
.clear-right {
clear: right;
}
.clear-left {
clear: left;
}
.set-height {
height: 150px;
}
.clearfix {
overflow: auto;
}
@media screen and (min-width:600px) {
.nav1 {
width: 25%;
float: left;
position: relative;
box-sizing: border-box;
}
.sec2 {
margin-left: 25%;
position: relative;
}
}
@media screen and (max-width:599px) {
nav li {
display:inline;
}
}
.container2 {
display: -webkit-flex;
display: flex;
}
.nav3 {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment