学前端的第四天（CSS Day02）笔记

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

7. 块级元素水平居中： margin : 0 auto;

今日作业：