亲爱的,美好的一天开始了,今天是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日 北京