css布局和定位总结

2019独角兽企业重金招聘Python工程师标准>>>

#1，布局——盒子模型 （1）盒子模型的组成部分： 盒子模型—网页布局的基石,由4部分组成，边框（border），外边（margin） 内边距（padding），盒子中的内容（content） 四个值：上右下左，三个值，上（左右）下，一个值。 ###设置img的盒子模型:设置边框，设置上下，左右宽度。

css: .book img{border:1px solid #b1adaa; margin:10px 18px;} html:

<div class="content book"> <a href="#"><img src="images/book1.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book2.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book3.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book4.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book5.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book6.jpg" width="80" height="80" /></a> </div>

//div盒子模型里面布局,例如设置边框padding .content{background:#eff9f9; padding:20px 50px 15px; border:4px solid #badbdb;} .book{background:url(../images/t_book.gif) no-repeat #eff9f9;}

#2,自动居中一列布局

//设置id为wrap的盒子模型上下为0，左右居中。auto根据浏览器的不同设置左右的宽度不相同。 wrap{width:770px; margin:0 auto;}

#3,浮动布局，左中右布局。 浮动元素会影响后面的元素、

当元素设置浮动属性以后，会对相对相邻的元素产生影响，紧邻的元素紧邻在其后面。

###清除浮动的方法， ####（1）常用clear：both，clear：left或者clear：right；(2)设置：width：100%（或者固定宽度）overflow：hidden;

#4，绝对定位布局；position属性：4个属性值：static(静态)，relative（相对），absolute（绝对）,fixed（固定位置）； ###relative：

1 相对于自身原有位置进行偏移2仍处于标准文档流中3 随即拥有偏移属性和z-index属性

###绝对定位：

1建立了以包含块为基准的定位2完全脱离了标准文档流3 随即拥有偏移属性和z-index属性

转载于:https://my.oschina.net/u/2480757/blog/715309