学习前端的第八天

1.父子元素垂直外边距的重叠：

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,导致父元素的位置发生变化，会影响到父元素下面的布局；解决办法：不要用margin或将父子外边距隔开，例如可以用边框，添加一个空表格或开启元素的隐含属性BFC  overflow：hideen；

2.行内元素盒子模型

内容区 :行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开

内边距 ：行内元素盒子模型可以设置内边距，而且垂直方向的内边距不会影响其他的元素的位置

边框 :行内元素盒子模型可以设置边框，而且垂直方向的边框也不会影响其他的元素的位置

外边距：水平方向的外边距可以设置成功的，而且水平方向的外边距不会重叠，垂直方向的外边距不可以设置。

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

去除方法：

方式一：手动去除，这种方式一般情况只适用一些小的案例，小的项目

清除浏览器的默认样式:  

  *{

        margin:0;

        padding:0;z
   }

方式二：引入重置样式表

这个表就是网上的大神列举出来的所有的标签的默认样式reset.css,normal.css,我们只需要引入到对应的html文件内就可以了。

<link rel="stylesheet" href="./reset.css">
//引入重制样式表必须要在你写的样式前面,否则会重置你写的样式

4.盒子的大小

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定；设置width，height特指内容区的宽高

box-sizing：用来设置盒子尺寸的计算方式

属性值：

content-box： width，height指的是内容区宽高，默认值

border-box：width，height指的就是内容区，内边距，边框加起来的大小

5.盒子阴影和圆角

box-shadow：设置元素的阴影效果，不会影响到页面布局

box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);

第一个值：水平偏移量；正->右  负->左  必写

第二个值：垂直偏移量  正->下  负->上  必写

第三个值：模糊半径  选写，默认值是0

第四个值：颜色  选写，默认值是黑色

border-radius：用来设置圆角

设置圆形：border-radius：50%；

border-radius: 10px 40px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;

6.浮动

浮动是一种布局手段，会使元素脱离文档流

语法：float： ；

属性值：left左浮动；right右浮动

设置元素浮动后，元素会脱离文档流，不会再占据原来在文档流的位置，浮动元素后面的元素就向上；设置元素浮动后，元素会尽可能向左或者向右浮动，浮动元素不会超过它前一个兄弟，最多一边齐；如果浮动元素前一个兄弟没有浮动，浮动的元素不会跑上去；浮动的元素不会超出父元素。

浮动特点：浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围；设置元素浮动后，元素脱离文档流，元素原来在文档流中分类，特点就不复存在，行内元素可以设置宽高，块元素也不会独占一行，行内块元素也没有三像素的问题