前端知识点（4）

                           盒子模型

使用width来设置盒子内容区的宽度

使用height来设置盒子内容区的高度

源代码：

width: 300px;

height: 300px;

设置背景颜色

background - color='颜色';

备注：要为一个原色设置表内框必须指定三个样式：

            border-width:边框的宽度

            bordef-color:边框颜色

            broder-style:边框的样式

border-width:10px;

border-color:red;

代码实现：

---

                              外边框

width:200px;

设置长度

height:200px;

设置高度

backgound-color='颜色'

设置内边距颜色

border:10px solid red;

设置边框大小、样式、颜色

margin:0 auto;

居中

代码实现：

---

                        外边距的重叠

垂直外边距的重叠

在网页中相邻的垂直方向的外边距会发生外边距的重叠

所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

源代码：

width:100px;

height:100px;

background-color:red;

为上面的元素设置一个下外边距

margin-bottom:100px;

width:100px;

height:100px;

background-color:red;

为下面的元素设置一个上外边距

margin-bottom:100px;

代码实现：

---

                    浏览器的默认样式

注意：浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

代码实现：

*{

        margin:0;

        padding:0;

}

.box1{

        width:100px;

        height:100px;

        background-color:#bfa;

}        

p{

        background-color:yellow;

}

我是一个段落

我是一个段落

我是一个段落

• 无序列表
• 无序列表
• 无序列表
• 无序列表

代码实现：

                   display和visidility

diplay:

将一个内联元素编程块元素

可选值：

inline:可以将一个元素作为内联元素显示

block:可以将一个元素设置为行内块元素

inline-lock:将一个元素转换为行内块元素

    -可以使一个元素既有行内元素又有块元素的特点，既可以设置宽高，又不会独占一行

none:不显示元素，而且元素不会再页面中继续占有位置。

源代码：

diplay:none;

width:500px;

height:500px;

.box{

            width:100px;

            height:100px;

            background-color:orange;

我是一个大大的链接

Hello

执行代码：

---

visibility:

使用visibility:hidden；隐藏的元素虽然不会显示在页面中显示，

但是他的位置会依然保持。

---

                            overflow

四条参数：

visible  ,默认值，不会读溢出的内容做处理，元素会在父元素意外的位置显示

hidden    溢出的内容，会被修建，不会显示。

scrool  回味父元素添加滚动条，通过拖动滚动条来查看完整内容

             该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条。

auto    会根据需求主动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加。