css中元素溢出及marign-top塌陷问题

选择器:
1.组合选择器（组选择器）
格式：选择器名 ,(中间用逗号隔开)
选择器名{属性：属性值}

2.伪选择器（伪类选择器)
选择器：类{ 属性： 属性值}
选择：nth-child(){}
a:link{超链接未被访问}
a:visited{超链接已被访问}
a:hover{超链接鼠标悬停}
a:active{超链接点击时效果}
注意：a标签的类顺序必须由l v h a 顺序排列；

返回超链接

<a href="#"name="名字">超链接</a>
 <a href="#名字">返回顶部</a>

外联样式：

圆角
background-repeat: no-repeat;去掉图片重复性
background-size: 100% 100%;背景填充
border-radius:圆角简写
border-top-left-radius: 左上角;
box-shadow: 水平偏移（0px） 垂直偏移(0px) 模糊程度(0px) 阴影颜色 ;
border-left: 左边框;border: none无边框
css样式优先级：默认;行内>内嵌>外联
修改优先级：!important;

盒子模型：
content(内容) padding(内边距) border(边框) marign(外边距)
marign:上右下左；简写：marign:50px;上右下左都是50px；
padding：50px;上右下左都是50px；

塌陷问题：
一个元素中含有子元素，给子元素添加marign-top,会添加到父元素，导致
内部的设置子元素marign-top失效；
解决方法：
给父元素添加：
1.overflow:hidden;
2.给父元素添加边框；
元素溢出：
一个元素中含有其他元素，其他元素超出了父元素这种情况称为元素溢出；
overflow:hidden; 元素溢出: 超出父元素的部分隐藏
overflow: scroll; 设置此属性,内容会被裁剪, 但是会添加滚动条,以便显示被裁剪的内容
overflow:visible;默认值，不会被修剪，呈现在元素框外
overflow-y: scroll;显示垂直滚动条
overflow-x: scroll; 水平滚动条
块元素、内联元素、内联块元素
块元素：独占一行，即使设置宽高也会独占一行
内联元素：元素的大小会跟随内容的改变而改变，即使设置宽高，也不会改变大小；
内联块元素：display：可以将块元素、内联元素、内联块元素之间形成转换；
display属性：
none: 元素隐藏不显示
inline: 表示的是内联元素
block:表示的是块元素,并显示元素
inline-block: 表示内联块元素