李洪强和你一起学习前端之(6)浮动 布局 定位

亲爱的,美好的一天开始了,今天是2017年3月22日,时间真快,三月马上就要结束了,

希望我们不负大好时光,活到老,学到老,吃得苦中苦,方为人上人!

 

　　　　　　CSS基础

1 复习昨天知识

1.1行高

　　行高可以继承

1.2行高单位

　　单独的盒子设置: Px  em  %　　不带单位

　　给父盒子设置: Px   2em   %　　不带单位

1.3盒模型组成

 

1.3.1 Border

　　->border-width

　　->border-style

　　->border-color

　　->Border: border-style　　border-width　　border-color

　　->border-top

1.3.2Padding

　　->取值

　　->影响盒子大小

　　->边框影响盒子大小

　　上下左右

 

1.3 Margin

　　盒子与盒子之间的距离

　　外边距不会影响盒子大小

　　取值

　　外边距合并问题

　　垂直显示的盒子

　　盒子嵌套(外边距合并)

　　　　给父盒子设置border值

　　　　给父亲盒子设置overflow:hidden

　　

2 新知识

　　2.1标准流(文档流)

　　块级元素独占一行显示　　标准流的显示方式

　　元素默认的显示方式就是标准流

　　2.2浮动

　　用法:

　　Float: left|right

　　特点:

　　　　->设置了浮动的元素不占原来的位置(脱标)

　　　　->可以让块级元素在一行上显示

　　　　->浮动可以让行内元素转化为行内块元素

　　　　　　模式转换的过程中,能用display就用display

　　作用:

　　　　->浮动用来解决文字图片环绕问题

　　　　->制作导航栏

　　　　->网页布局

　　网站: http://www.17sucai.com

 

2.3清除浮动

->清除浮动不是删除浮动

->清除浮动指的是清除浮动的影响

　　注意: 当子元素设置了浮动,父元素没有高度的时候,造成页面布局混乱

　　这种情况下进行清除浮动

 

2.4  清除浮动的几种方式　　　　

使用clear: left| right | both

Clear:both

　　在要清除浮动的元素后面添加一个标签

　　

给父盒子设置overflow:hidden

如果父盒子中有定位的元素,一般不推荐使用该种方式清除浮动

 

　　-> 使用伪元素清除浮动

 

2.5Overflow的使用

　　　　->hidden　　将超出部分进行隐藏

　　auto

　　如果内容超出盒子,那么给盒子设置滚动条,如果内容没有超出盒子,那么不显示滚动条

　　　　-> scroll

 

3 定位

　　方位名称:

　　Left　　right　　top　　bottom

3.1静态定位(static)

　　用法:

　　Position: static

静态定位就是元素标准流的显示方式

 

3.2 绝对定位(absolute) 看脸型

　　用法:

　　Position: absolute

　　特点:

　　-> 当给一个单独的元素设置绝对定位,以浏览器左上角(body)

为基准设置定位的

　　->当盒子发生嵌套关系的时候,如果父盒子没有设置定位,子盒子

设置定位以浏览器左上角为基准设置定位

　　-> 当盒子发生嵌套关系的时候,如果父盒子设置定位,子盒子设置

定位父盒子左上角为基准设置定位

　　->给盒子设置了绝对定位,该盒子不占位置(脱标)

　　->给行内元素设置绝对定位后,该元素转化为了行内块元素

注意 :

　　元素设置了绝对定位后,通过具体的方位名称可以随便设置元素的

位置

 

3.3相对定位(relative)(自恋型)

　　->元素设置了相对定位后占原来的位置

　　->设置相对定位以自己的位置为参照设置位置

　　->相对定位不能进行元素的模式转换

　　->子绝父相(子元素设置绝对定位,父元素设置相对定位)

3.4 固定定位(fixed)

固定定位不占位置(脱标)

将行内元素转化为行内块元素

 

 

这些博客,这些内容都是本人一个字一个字敲的,敲的同时促进我的记忆

同时,我想跟更多想学习前端的朋友一起共同进步!

　　　　　　　　　　　　　　李洪强

　　　　　　　　　　2017年3月22日 北京