CSS入门学习笔记（二）

作者: wxyzcctn | 来源:发表于2018-10-22 17:15 被阅读0次

前面学习了使用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。

网友评论

本文标题：CSS入门学习笔记（二）

本文链接：https://www.haomeiwen.com/subject/wgewzftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

CSS入门学习笔记（二）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读