Skip to content

Instantly share code, notes, and snippets.

@jieniu

jieniu/css.markdown

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.
Download ZIP
CSS布局练习
Raw
css.markdown
Raw
index.html
<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>
Raw
style.css
.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