垂直布局
<!--
使用overflow属性设置父元素如何处理溢出的子元素
可选值:
visible 默认值 文本正常显示
hidden 裁剪掉多余的内容
scroll 生成双向的滚动条,可以通过滚动条查看完整的内容
auto 根据实际的内容出现滚动条
overflow-x 对水平方向溢出的内容进行设置,垂直方向根据实际需要自动生成
overflow-y 对垂直方向溢出的内容进行设置,水平方向根据实际需要自动生成
--
<!-- 块元素默认情况下,宽度是父元素内容区的100%,高度是被内容撑开
在垂直布局中,一般情况下,我们是不设置高度的,让元素被内容撑开
垂直外边距的重叠
-兄弟元素
如果两个值都是正值,谁大听谁的
如果两个值是负值,谁小听谁的(绝对值谁大听谁的)
如果是一正一负,那最终的值,两者相加
兄弟元素的外边距重叠,一般情况对我们的开发是有利,不需要做特殊处理
-父子元素
如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素,
导致父元素的位置发生变化,会影响到父元素下面的布局,
所以这个问题必须要解决
-->
<!--
面试题: 如何解决父子外边距重叠的问题?
1、不要用margin
2、将父子外边距隔开,例如可以用边框,添加一个空表格
3、开启元素的隐含属性BFC overflow:hideen;
-->
/*从这几点分析:
内容区 :行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开
内边距 :行内元素盒子模型可以设置内边距,而且垂直方向的内边距不会影响其他的元素的位置
边框 :行内元素盒子模型可以设置边框,而且垂直方向的边框也不会影响其他的元素的位置
外边距:水平方向的外边距可以设置成功的,而且水平方向的外边距不会重叠
垂直方向的外边距不可以设置
*/
-->
<!-- 引入重制样式表
注意:
1、引入重制样式表前提是你要有这个reset.css文件
2、引入重制样式表必须要在你写的样式前面,
否则会重置你写的样式
/* 默认样式:
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
所以为很多的元素都设置了一些默认的margin和padding,
而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
*/
/* 方式一:手动去除,这种方式一般情况只适用一些小的案例,小的项目
1:清除浏览器的默认样式
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
方式二:
2:引入重置样式表
这个表就是网上的大神列举出来的所有的标签的默认样式
reset.css,normal.css
我们使用的时候,只需要引入到对应的html文件内就可以
今天就学到这么多谢谢大家
*/