前端学习day6（盒模型）

一、超链接

超链接的伪类：link用来表示没访问过的正常的链接（超链接独有）

visited用来表示访问过的链接（只能用来修改链接的颜色，超链接独有）

hover用来表示鼠标光标停留处的样式修改（可以修改颜色字体大小等）

active用来表示鼠标点击时的样式修改

a:link{
    color: green;
}
a:visited{
    color: gold;
}
a:hover{
    color: blueviolet;
}
a:active{
    color: aquamarine   ;
}

二、文档流（normal flow）

网页是一个多层结构，用户只能看到的最上层，而文档流是最底层，所创建的元素都是在文档流中的。所以元素只有两个状态：①在文档流中②不在文档流中

元素在文档流中的特点：

1、块元素

①在页面中独占一行

②默认宽度是父元素的全部

③默认高度是子元素的全部

2、行内元素

①行内元素不会独占一行，只占自身大小

②行内元素会自左向右水平排列，如果一行不能容下该行内元素，则会换行继续排列

③行内元素的默认宽度和默认高度是其本身大小

三、盒模型（box model）

1、块元素的盒模型

CSS将页面中的所有元素设置为矩形的盒子，此时的布局就相当于将不同的盒子放到不同的位置，盒子的大小（可见框）右内容区，内边距，边框构成

盒子的组成：

• 边框（border）
• 外边距（margin）：当前盒子和其他盒子的距离，不会影响盒子的大小。默认情况下设置左和上边距的是移动自己，设置右和下是移动其他盒子或者元素。
• 内容区（content）:所有子元素和文本内容都会在内容区中排列，内容区的大小由width和height来设置
• 内边距（padding）：内容和边框的距离。内容区的背景颜色会延伸到内边距上
• style: solid   dotted dashed  dobble

元素在其父元素中水平方向中的布局由下面几个属性共同决定

其父元素内容区的宽度 = margin-left + border-left + padding-left+width + padding-right + border-right + margin-right

以上等式必须满足，如果不满足，则称为过度约束，会进行自动调整:如果没有auto的情况，会调整margin-right的值使等式满足，如果某个值为auto，则会自动调整auto使等式满足。如果将宽度和一个外边距设置为auto，则宽度调整为最大。

使元素在父元素中水平居中：将该元素的width设置为固定值，将两个外边距设置为auto。

垂直布局：如果子元素大小超过父元素，则会溢出。 可以用overflow设置父元素。

overflow:  visible （可见，默认）

overflow:  hidden（隐藏）

overflow:  scroll（滚动条，水平垂直同时生成）

overflow-x:  scroll（水平方向滚动）

overflow-y: scroll（垂直方向滚动）

overflow:  auto

相邻垂直方向外边距会折叠。

兄弟元素之间：都是正值时，相邻会取较大值两者；一正一负时，取和；两者都是负值时，取绝对值较大的。兄弟元素的折叠不用处理

父子元素之间：子元素会传递给父元素（上外边距），因为两者的外边距是在一块的，父子元素之间的折叠需要处理

2、行内元素的盒模型

• 行内元素不支持设置高度和宽度
• 行内元素可以设置padding，border，margin，但是不会影响垂直方向的布局
• display可以将行内元素转换为块元素，语法为：display: inline （设置为行内元素）    display:  block（设置为块元素） display:  inline-block（行内块元素，既可以设置宽高同时不会独占一行）  display: none（隐藏）
• visibility：visible（默认值，正常显示）  visibility:  hidden（隐藏后还占据位置）

.b1{
    
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-width: 10px;/*设置四个方向的宽度：上 右 下 左  */
    border-height: 10px;
    border-color: black;，
    border-style: solid;/*边框类型为实线,默认为none*/
    border: 10px red solid;/*简写*/
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top : 10px; /*设置一个正值，往下移动10px*/
    margin-right: 10px;/*默认情况下设置右边距无影响*/
    margin-bottom: 10px;/*设置完向上移动10px*/
    margin-left: 10px;
    
}
/*边框，内边距的设置，会影响盒子的大小，此时盒子为220px*220px*/
/*margin使用语法：

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 （顺时针）*/
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;*/