css学习笔记02

margin 外边距（外补丁 外填充）

作用：设置两个或者多个盒子之间的距离，并且这个距离在该元素的外部

用法：margin-left/margin-right/margin-top/margin-bottom

问题一：margin-top的传递问题

子元素的margin-top会传递给父元素

解决方法：给元素添加 overflow:hidden    

 

padding 内边距（内补丁 内补白 内填充）

作用：设置盒子里边内容和边距之间的距离，该属性作用于盒子内部，会撑大盒子。

用法：padding-left/padding-right/padding-top/padding-bottom

问题二：padding会撑大盒子

解决方法：在原来宽高上减去对应方向的padding值

或者在这个元素上添加 box-sizing=border-box

 

问题三：网页中的一些间距 两者的用法：

解决方法：如果标签无背景颜色，想设置间距，两者都可以

如果标签存在背景颜色，间距（未使用标签前的）的地方没有背景颜色，用margin；有背景颜色用padding

 

float 浮动属性

作用：让竖着的东西横着显示（浮动元素太多，一行不够会自动换行）

用法：float:left   float:right

元素浮动之后是悬空的状态，不占据浏览器的位置（此时浮动了的元素就像在一个房间里了的灯），此现象叫脱离正常的文档流

 

后代选择器

作用：使控制范围缩小，也可以不用起太多id名称

选择器1 选择器2{属性:属性值}

如 #right a{ }

 

鼠标悬停效果

语法：   选择器:hover {属性：属性值}

用法：想要给谁添加鼠标悬停效果就给谁写hover（hover之后的属性值是鼠标悬停后的你想要的效果）

 

 

杂：超链接本身存在文字颜色，要改，只能写在a标签中