清除浏览器的默认样式
* {margin：0;
pedding:0}
内联元素不能设置宽和高在网页上无效 可以设置水平的内边距和边框 设置垂直方向不影响布局 也可以设置边框<边框占据盒模型的大小> 水平方向的外边距不会重叠 不支持垂直方向的外边距
<水平好用垂直不好用>
diaplay&visibility
用处：我们不能为行内元素设置width、height、 margin-top和margin-bottom 我们可以通过修改display来修改元素的性质
可选值：
block：设置元素为块元素
inline：设置元素为行内元素
inline-block：设置元素为行内块<同时具有行内元素和块元素的特点 img便是一种行内块元素>元素
none：隐藏元素（元素将在页面中完全消失）
举个栗子：
<style type="text/css">
a{
background-color:red;
display:block;
width:100px;
heght:200px
}
.box{
width: 100px;
height: 100px;
background-color: orange;
/*display: none;使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置*/
display: none;
*/使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持*/
visibility: hidden;
}
</style>
<body>
<a href="#">我是一个大大的超链接</a>
</body>
display设置none值与visibility设置visible都可以隐藏他们有什么区别
----------------------------------------------------------------------------------------------------------------------------------------
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
----------------------------------------------------------------------------------------------------------------------------------------
overflow
用处：存在于父元素的内容区 子元素超出父元素的内容区 网页上会把子元素超出父元素内容区的内容溢出 可以通过overflow来控制内容溢出的情况
可选值：
visible：默认值 溢出部分不处理
scroll：添加滚动条 浏览器会显示滚动条 不论是否内容溢出都会添加垂直与水平的滚动条
auto：根据需要添加滚动条 需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加
hidden：隐藏超出盒子的内容
举个栗子：添加一个滚动效果
<style type="text/css">
.box{
background-color:red;
width:100px;
heght:200px
overflow:auto
}
</style>
<body>
<div class="box1">我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接我是一个大大的超链接
</div>
<body>
文档流
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点
<块元素>
1.块元素在文档流中会独占一行，块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
<内联元素>
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
网友评论