這是《前端總結·基礎篇·CSS》系列的第一篇,主要總結一下版面的基礎知識。
一、显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二、位置(position) 三、补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow) 3.4 resize(notIE)(CSS3) 3.5 分栏(column)(IE10+ notOperaMini)(CSS3)
看圖了解盒模
盒子模型包括內容(content)、填滿(padding)、邊框(border)、邊距(margin)。我們給元素設定的高度,是內容(content)的高度。再給元素添加填充(padding),元素看起來會更高。
以下是一個盒模型的示範實例,在Google瀏覽器中查看盒模型可以使用 右鍵>屬性>Computed 的方式進行檢視。
<p class="box-model">box-model</p> .box-model { border: 1px solid red; padding: 20px; }
以邊框為界的盒子模型
有些時候,我們不希望給元素添加填充(padding)時,元素的高度會改變,這樣不利於我們進行佈局。可以把元素的盒子模型,設定成以邊框(border)為界的盒子模型(box-sizing:border-box;)。在IE的怪異模式下,預設使用了這種盒模型。
下面是一個範例。
<p class="box-model">box-model</p> .box-model { box-sizing: border-box; /* 设置成以边框为界的盒模型 */ border: 1px solid red; height: 80px; padding: 10px; }
佈局一般都用塊元素
區塊元素可以設定寬高,預設佔據一行。行內元素不能設定寬高,寬度由其內容決定。
區塊元素預設沒高度,有內容才會有高度。行內元素預設沒高度和寬度,有內容才會有。行內元素雖然不能設定寬高,但是設定成絕對定位(absolute)後,可以設定寬高。 (定位在第二節講)
块元素:p p ul li table form html5(header section footer)。 行内元素:a font(em strong i) img span。
區塊元素可以變成行內元素
我們通常會將li變成行內元素製作導覽列。
<ul class="nav"> <li>首页</li> <li>文章</li> <li>留言</li> </ul> .nav li { display: inline; }
一行只有一個區塊元素
但是,行內元素可以有多個。
空的區塊元素將在佈局中消失
在偵錯頁面的時候想要顯示元素在佈局中的位置,我們通常會為元素添加一個高度。
行內元素內容為空也會在佈局中消失(不建議為空)。
相容性是支援>=IE8,IE6-7請參閱專注WEB前端開發。
清除兩元素間隙
兩元素間隙來自元素間的空格,拼接元素即可消除。也可以用過使用模板來消除。更多討論請見知乎。
<ul class="nav"> <li>首页</li><li> 文章</li><li> 留言</li> </ul>
特殊情況下的元素對齊
三個li並列,都設定成inline-block。當最左邊的元素設定display:none;時,其他兩個li會下沉到容器的底部。此時,需要對這兩個li設定頂部對齊(vertical-align:top;)。
<ul class="nav" id="nav"> <li class="left"><p class="hidden">首页</p></li> <li class="center"><p>文章</p></li> <li class="right"><p>留言</p></li> </ul> .hidden {display: none;} .left {height: 50px;} .center,.right {vertical-align: top;}
相容性是支援>=IE11,IE10需要新增瀏覽器私有前綴(-ms-)。
使用彈性佈局
使用了彈性佈局,float clear vertical將失效。更多請見阮一峰的部落格。
display:flex; // 块元素用 display:inline-flex; // 行内元素用
彈性佈局設定
這些就暫時當作參考手冊吧。
flex-direction:row/row-reverse/column/column-reverse; // 方向 flex-wrap:nowrap/wrap/wrap-reverse; // 换行 flex-flow:direction/wrap; // 方向和换行的简写,默认为flex-flow:row nowrap; justify-content:flex-start/center/flex-end/space-between/space-around; // 主轴(默认为水平轴) align-items:flex-start/center/flex-end/baseline/stretch; // 交叉轴 align-contents:flex-start/center/flex-end/space-between/space-around/stretch; // 多条轴线的对齐方式(单条无效) order:number; // 顺序(默认为0) flex-grow:number; // 宽度有余时放大比例(默认为0) flex-shrink:number; // 宽度有余时缩小比例(默认为1) flex-basis:number/auto; // 分配多余空间前,项目占据的主轴空间(默认auto) flex:grow/shrink/basis; // grow shrink basis三个属性的缩写 align-self:auto/flex-start/center/flex-end/baseline/stretch;; // 单个项目的对齐方式,可覆盖align-items(默认auto)
主軸(justify-content)只能居中單行元素
那多行怎麼辦呢?我們可以把多行嵌套在一個p中,建構出單行元素。
下面是一個水平和垂直居中的一個實例。
<p class="parent"> <p class="child"> <p>两行都会</p> <p>居中</p> </p> </p> .parent { display: flex; /* 使用flex布局 */ align-items: center; /* 交叉轴居中 */ justify-content: center; /* 主轴(默认为水平轴)居中 */ background: red; height: 200px; }
隱藏元素
以下兩種方法都可以隱藏元素,但是display:none;會清除原本佔用的佈局空間。
visibility:hidden; // 隐藏元素 display:none; // 隐藏元素并清除原本占用的布局空间
絕對(absolute)、相對(relative)和固定(fixed)定位,都可以使用top,right,left,bottom元素。但是表示的意義卻各不相同。
清除佈局空間的定位(absolute fixed)
固定定位(fixed)不會隨著滑鼠的滾動而改變位置。他真的是固定螢幕的某個位置的,比較常見的是網頁右下角的廣告。
絕對定位(absolute)的定位原點是非預設定位(static)的父節點。可以是absolute fixed relative,如果父節點沒有這些,那定位原點就是body了。使用了這兩種定位中的一種,元素原本佔用的佈局空間將會消失(脫離文檔流)。
下面是絕對定位(absolute)的一個例子。左圖是預設佈局,右圖是使用絕對定位(absolute)之後的(元素原本的佈局空間被清除)。
<p class="border">I'm in front of you.</p> <p class="parent">Hello</p> <p class="border">I'm next to you.</p> .border { border: 1px solid blue; } .parent { position: absolute; left: 20px; top: 20px; background-color: red; padding: 5px; }
保留布局空间的定位(relative)
元素原本占用的布局空间依旧保留在文档流中。
相对定位(relative)相对原有位置定位。把上例中的absolute改成relative即可看到效果。使用这种方法,元素原本占用的布局会保留。
默认定位
默认定位为static。
巧用relative+absolute定位
父级采用relative,子代采用absolute。则子代的定位原点变为父级元素的左上角。
刚开始做页面的时候,还不知道浮动用了之后得清除,只气的想要砸键盘。现在好多了,知道了点技巧。更多技巧请见Tomson。
清除浮动(.clear)
这种方法需要在浮动元素后面添加一个空的节点,然后写上clear属性。兼容IE6需要添加zoom:1;。
<ul class="nav"> <li>首页</li> <li>文章</li> <li>留言</li> </ul> <p class="clear"></p> <!--用来清楚浮动的空元素--> <p>我是另外一行</p> .nav li { background-color: red; float: left; list-style-type: none; } .clear { clear: both; zoom:1; /* IE 6 */ }
清除浮动(overflow:hidden;)
使用这种方法意味着,浮动元素得有一个父元素,并给父元素添加overflow:hidden;属性。
<ul class="nav"> <li>首页</li> <li>文章</li> <li>留言</li> </ul> <p>我是另外一行</p> .nav li { background-color: red; float: left; list-style-type: none; } .nav { overflow: hidden; }
文字环绕
浮动元素的另外一个妙用是实现文字环绕。
<p class="article"> <p class="photo"></p> <p>这段文字很长,是用来测试文字环绕的。图片的占位将用p块来模拟。这段文字很长,是用来测试文字环绕的。图片的占位将用p块来模拟。</p> </p> .article { width: 200px; } .photo { width: 60px; height: 60px; background-color: red; float: right; }
层叠可以控制元素的上下放置关系。值越大越上面。
<p class="z zOne"></p> <p class="z zTwo"></p> .z { position: absolute; top: 200px; left: 200px; width: 60px; height: 60px; background-color: red; opacity: .5; /* 设置透明度为0.5 */ } .zTwo { top: 220px; /* 和第一个块错开以看到效果 */ left: 220px; background-color: blue; opacity: .5; }
当页面内存在多个业内选项卡的时候,从一个没有右边滚动条的页面达到一个有滚动条的页面,将会产生页面跳动。解决办法是默认设置显示右边的滚动条。
overflow-x:visibility;
定义用户是否可调整当前元素的边框大小。
resize: horizontal(水平)/vertical(垂直)/both/none/inherit;
兼容性是IE>=10,不支持opera mini。更多请见菜鸟教程。
<p>这一段文字用来测试分栏。这一段文字用来测试分栏。这一段文字用来测试分栏。</p> p { width: 200px; /* 把段落的宽度设短一点,便于效果的展现 */ column-count: 3; /* 设定需要分几栏 */ column-gap: 20px; /* 设定两栏间隔 */ }
这一节主要参考了学习CSS布局,阮一峰的博客,Tomson,专注WEB前端开发,菜鸟教程,知乎和我在看的一本书《CSS设计指南》。
第一次写前端方面的长文章。写了改,改了写,然后继续改,又继续写。如此循环往复,只为让用词用句更加恰当一些。文中有什么不恰当的地方,还望指出。
更多前端总结·基础篇·CSS布局 相关文章请关注PHP中文网!