CSS入门学习笔记（二）

前面学习了使用HTML为网页添加内容，要对所添加的内容进行布局，就需要使用到CSS，JS等，这里就记录一下自己关于CSS的布局的入门学习，CSS的功能很强大，此处只做了简单的学习。

一、盒模型（Box Model）

在学习CSS的布局之前需要先了解一下布局的对象是什么。所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

margin：边距/外边距，清除边框外的区域，外边距是透明的；

border：边框，围绕在内边距和内容外的边框；

padding：填充/内边距，清除内容周围的区域，内边距是透明的；

content：内容，盒子的内容，显示文本和图像。

通过CSS设置元素的高度和宽度，实际设置的是content（内容）部分的高度和宽度而不是整个盒子的宽度和高度，而整个盒子的宽度是：（内容宽度 +padding宽度 + border宽度 + margin宽度）之和。只要改四个中的其中一个，都会导致盒子宽度的改变，这对于布局来说并不友好，为了消除这种差异，CSS新增了box-sizing属性，现在通过CSS设置的宽度300px是content+padding+border。没添加box-sizing属性前有如下：

添加box-sizing属性之后，设置内容如下：

了解了基本的布局对象之后，下面简单介绍一下如何进行布局。

二、CSS左右布局

2.1、通过float属性实现

在CSS布局中，一般是在一个父元素里面有多个子元素，这个时候需要将子元素进行左右的布局，这个时候将需要放在左边的子元素的CSS属性设置为：style="float:left;"将需要放在右边的子元素设置CSS属性为：style="float: right;"，与此同时还需要将其所在的父级元素设置style属性为clearfix。以这样的方式可以实现左右布局。

html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</a>

<li>

</li>

<li>

</li>

</ul>

</nav>

</div>

</body>

</html>

CSS：

.topNavBar{

padding: 20px 0px 20px 0px;

position: fixed;

top: 0px;

left: 0px;

width: 100%;

border: 1px solid red;

}

.clearfix::after{

content: '';

display: block;

clear: both;

}

.topNavBar nav > ul > li{

float:left;

margin-left: 17px;

margin-right: 17px;

}

结果：

2.2、通过table标签实现

table标签通过设置行和列能够实现左右布局，如下所示：

html：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

CSS：

.col-4{

display: inline-block;

*display: inline;

*zoom:1; //ie6、7hack

width:25%;

height:30px;

border:1px solid #999;

font-size: 14px;

}

输出结果：

其中tr表示一行，td表示一列，先实现行，在实现列，所以在tr中添加td实现盒子的左右布局。但现在多数情况下都是使用table的li属性来实现左右布局的。

2.3 通过inline-block实现

display:inline-block属性是介于内联元素(display:inline)和块级元素(display：block)之间的属性，它可以像内联元素一样水平布局，也可以像块级元素设置宽高属性，所以使用它可以进行左右布局。实现形式如下：

html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</section>

</body>

</html>

CSS:

.col-4{

display: inline-block;

*display: inline;

*zoom:1; //ie6、7hack

width:25%;

height:30px;

border:1px solid #999;

font-size: 14px;

}

.wrap{

margin:10px auto;

max-width:1280px;

min-width:1024px;

font-size: 0px;

}

输出结果为：

2.4、通过flexbox实现

css3中的弹性盒子布局，即display:box;该种布局主要用于移动前端开发，所以也是一种好的布局方式。如下：

html：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</section>

</body>

</html>

CSS：

.wrap{

margin:10px auto;

max-width:1020px;

min-width:10px;

}

.wrap{

display: -webkit-box;

-webkit-box-orient: horizontal;

}

.col-4{

height:30px;

border:1px solid #999;

-webkit-box-flex:1;

}

结果：

2.5、通过float+margin实现

float能够使得元素向左或者向右靠边布局，如果在同级元素中设置一个正常流的区域与浮动块并列，则浮动块会在该正常流同级区域的边界处，只是浮动块会影响该区域块的布局，所以要清除浮动块的影响，所以此时将正常流区域块的盒子设置margin等于浮动块的宽度既可以清除影响。

html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="hRight">right</div>

</div>

</header>

</body>

</html>

CSS:

.header{

background-color: #ccc;

padding:1px;

}

.wrap{

margin:10px auto;

max-width:200px;

min-width:50px;

}

.hLeft{

float:left;

border:1px solid #999;

width:50%;

height: 50px;

}

.hRight{

height:50px;

border:1px solid #999;

margin-left:50%;

}

结果：

其中margin-left:50%;去除了浮动对同级元素产生的影响。

2.6、通过float+overflow实现左右布局

对于float对后面同级元素的影响，除了采用margin进行影响的清除，还可以在受影响的元素上添加overflow：hidden来清除浮动对该区域块带来的影响。

html：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="hRight">right</div>

</div>

</header>

</body>

</html>

CSS：

.header{

background-color: #ccc;

padding:1px;

}

.wrap{

margin:10px auto;

max-width:100px;

min-width:50px;

}

.hLeft{

float:left;

border:1px solid #999;

width:50%;

height: 90px

}

.hRight{

overflow: hidden;

zoom:1;

height:90px;

border:1px solid #999;

}

结果：

2.7、通过position：absolute实现

除了float可以产生脱离文档流的布局现象以外，position：absolute也可以，二者不同之处在于absolute可以覆盖任何位置的元素且不会影响正常流的布局，但是会产生遮盖，所以要求正常流要躲避绝对布局的遮挡。躲避方式可以使用margin。

html：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="hRight">right</div>

</div>

</header>

</body>

</html>

CSS：

.header{

background-color: #ccc;

padding:1px;

}

.wrap{

margin:10px auto;

max-width:100px;

min-width:50px;

position: relative;

}

.hLeft{

position: absolute;

left:0;

top:0;

width:50%;

height: 50px;

border:1px solid #999;

}

.hRight{

height:50px;

border:1px solid #999;

margin-left:51%;

}

结果：

三、左中右布局

3.1、采用浮动布局，左浮动, 右浮动, 中间自动填充。

<style>

.float article div{

}

.float article .left{

float: left;

}

.float article .right{

float: right;

}

.float article .center{

}

</style>

浮动float布局:

</h1> 左元素: float: left; 右元素: float: right; 中间元素:自动填充</div>

</article>

</section>

结果：

这时候中间区域的宽度在调整的时候会随着左右两边区域大小改变而发生改变

3.2、绝对定位

<style>

article{

position: relative;

}

.absolute .left-center-right div{

position: absolute;

}

.absolute .left-center-right .left{

left: 0;

}

.absolute .left-center-right .center{

left: 100px;

right: 100px;

}

.absolute .left-center-right .right{

right: 0;

}

</style>

绝对absolute定位布局:

</h1> 左边元素: position: absolute; left: 0;

右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px;

</div>

</article>

</section>

结果：

此时在调整边界的时候中间的区域的大小并不随着左右两边区域的大小改变而改变。

3.3、flex布局

<style>

.flexbox .left-center-right{

display: flex;

}

.flexbox .left-center-right .left{

}

.flexbox .left-center-right .center{

flex:1;

}

.flexbox .left-center-right .right{

}

</style>

flex布局:

</h1> 父元素display:flex; 左右子元素设置宽度300px; 中间子元素设置flex:1;</div>

</article>

</section>

结果：

这时候中间区域的宽度在调整的时候会随着左右两边区域大小改变而发生改变

3.3、表格布局

<style>

.table-box .left-center-right{

width: 100%;

display: table;

}

.table-box .left-center-right>div{

display: table-cell;

}

.table-box .left-center-right .left{

}

.table-box .left-center-right .center{

}

.table-box .left-center-right .right {

}

</style>

表格table布局:

</h1> 父元素width: 100%; display: table;

左右子元素display: table-cell; width: 300px; </div>

</article>

</section>

结果：

3.4、网格布局

<style>

.grid article{

display: grid;

width: 100%;

grid-template-rows: 100px;

grid-template-columns: 200px auto 200px;

}

</style>

网格grid布局:

</h1> 父元素宽度为100%,

父元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 200px auto 200px</div>

</article>

</section>

结果：

四、居中布局

4.1、使用margin

把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

4.2、使用text-align:center

只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。

4.3、使用line-height把单行的文字垂直居中

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

4.4、使用表格

使用表格进行居中布局，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效，而要是对块级元素也能进行居中的话，可以对块级元素设置CSS属性，display: inline-block。比如：

html：

<table>

<tr>

</td>

</tr>

</table>

CSS：

div{

width:100px;

height:100px;

background:#000;

display: inline-block;

}

结果：

4.5、使用display:table-cell

对于不是表格的元素，通过设置display:table-cell 来把它模拟成一个表格单元格，这样就可以使用表格中的居中特性了。例如：

html：

</div>

CSS：

.f1{

display:table-cell;

vertical-align:middle;

text-align:center;

width:200px;

height:200px;

border:1px solid red;

}

.f1 .f2{

width:50px;

height:50px;

background:#03F;

display:inline-block;

}

结果：

4.6、使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

html：

</div>

CSS：

body{

margin:0;

padding:0;

}

.f1{

width:200px;

height:200px;

border:1px solid red;

position:relative;

}

.f1 .f2{

width:100px;

height:100px;

background:#03F;

position:absolute;

left:50%;

top:50%;

margin-left:-50px;

margin-top:-50px;

}

结果：

以上结果还可以通过如下方法实现：

.f1 .f2{

width:100px;

height:100px;

background:#03F;

position:absolute;

margin-left:25%;

margin-top:25%;

display:inline-block;

}

4.8、使用浮动配合相对定位来进行水平居中

此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。

浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。

比如：

html：

<div class="f2">成功的水平居中</div>

</div>

</div>

</div>

CSS：

body{

margin:0;

padding:0;

}

.f1{

width:300px;

height:200px;

border:1px solid red;

position:relative;

}

.wraper{

float:left;

position:relative;

left:50%;

clear:both;

}

.f2{

border:1px solid blue;

left:-50%;

white-space:nowrap;

position:relative;

}

五、display、position、float属性

5.1display属性

display 是CSS中最重要的用于控制布局的属性，决定元素属于那种盒子（指定元素的显示类型）。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。

块级元素（block）

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div、p、h1、li。

内联元素（inline）

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，其宽度(width)和高度(height)只与其包含的内容有关，通过CSS设置高度和宽度不起作用。常见内联元素为a、span。

一般在使用过程中会遇到在内联元素中使用块级元素，这个时候一般都会在块级元素中设置CSS属性：display：inline-block。

5.2 position属性

display决定了盒子种类，position就用来确定盒子的位置。

static：static是positon属性的默认值，指按照文档至上而下的标准文档流，被position: static修饰的元素不会受到top, bottom, left, right影响。

fixed：元素的位置相对于浏览器窗口固定，配合top、right、bottom、left进行定位，脱离标准文档流，不会受到父元素overflow:hidden影响，即使窗口是滚动的它也不会移动，常用示例：二维码、广告的悬浮；

absolute：绝对定位的元素的位置相对于最近的已定位（position属性值不为static）父元素，如果元素没有已定位的父元素，那么它的位置相对于body，配合top、right、bottom、left进行定位，脱离标准文档流，会受到父元素overflow:hidden影响，并且它会随着页面滚动而移动。

relative：默认参照父级的原始点为原始点，配合top、right、bottom、left进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

5.3 float属性

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。

属性有：left、right、top、bottom。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,509评论 6赞 504
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,806评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,875评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,441评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,488评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,365评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,190评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,062评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,500评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,706评论 3赞 335
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,834评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,559评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,167评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,779评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,912评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,958评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,779评论 2赞 354

CSS入门学习笔记（二）

推荐阅读更多精彩内容