CSS 第二天
float布局:
(如何让两div ,排在一行)
1.语法 :
float: left | right | none
2.原理:
脱离了标准文档流,后面元素依次向上补齐
元素的宽度,变成内容有多宽,就有宽
浮动元素会浮在标准元素的上面,但是,标准元素的内容,不允许被覆盖,它 会自己见隙显示
浮动后,父盒子的高度会发生变化
3.标准文档流: 默认情况下的排列方式
从左到右,从上到下
浮动流:浮动元素的排列方式
从左(右)到右(左),从上到下
4.清除浮动的影响(扩展盒子的高度)
1). clear 属性
clear 添加要清除浮动影响的元素后面
clear: left | right | both
缺点:添加一个标签,专门写清除的样式
2). overflow(溢出处理)添加父盒子上
overflow:hidden;
overflow:scroll;
注:overflow:visible 不生效
缺点:如果元素使用绝对定位,此方法不生效
3). 给父元素设置宽高
4). 父元素与子元素一起浮动(不推荐)
5). 使用after伪类,清除样式(clear:both)
元素设置浮动后,类型,就变成了行内块级
5.伪类选择器:
1). :hover 鼠标悬停的样式 , 所有元素都有伪类
div:hover{
}
#p1:hover{
}
2). 语法:
选择器:伪类 { 属性: 值; }
3). love hate
link : 未点击
visited : 已点击
hover : 鼠标悬停
active : 激活状态
link与visited只有a标签有这两个状态
p:first-letter {font-size:2em} /* p元素中内容首字母放大 */
display:none : 隐藏(不占位置)
display:block 显示
visibility: hidden;(会占位置)
===============================================
6.盒子属性
边框 + 外边距 + 内边距
border:
border-top
border-bottom
border:left
border:right
padding:
padding-top
padding-left
padding-right
padding-bottom
padding:5px //上 ,右,下,左
padding:10px 40px
- 块级元素水平居中: margin : 0 auto;
今日作业: