前端学习Day01

元素在文档流中的特点：

块元素：
块元素会在页面中独占一行
默认宽度是父元素的全部（会把父元素撑满）
默认宽度是被内容撑开（子元素）
行内元素：
行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列，如果一行之中不能，则元素会换到第二行继续自作向右排列
行内元素的默认宽度和高度都是被内容撑开

盒模型

每一个盒子都由以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）

边框
边框的宽度 border-width
边框的颜色border-color
边框的样式border-style
边框的宽度border-width可以用来指定四个方向的边框的宽度值的情况
四个值：上 下 左 右
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组border-xxx-width，xxx可以是top right bottom left

除了border以外还有4个border-xxx
border-top
border-right
border-bottom
border-left

例如：border：solid 10px orange

内边距padding
内容区和边框之间的距离是内边距，一共有四个方向的内边距，
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小
背景的颜色会延伸到内边距上

一个盒子的可见框的大小，是由内容区，内边距和边框共同决定的，所以在计算盒子的大小时，需要将这三个区域加到一起计算

padding内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样
padding：10px 20px 30px 40px
padding：10px 20px 30px
padding：10px 20px
padding：10px
外边距（margin）
外边距不会影响盒子可见框的大小
但是会影响盒子的位置
margin-top
margin-right
margin-bottom
margin-left
元素的水平方向的布局
其父元素中水平方向的位置有以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
这些相加在其父元素中，水平布局必须满足其父元素的内容区的宽度
默认情况下父元素的高度被内容区撑开
子元素是在父元素的内容区排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素。
可选值：
visible，默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden，溢出内容将会被裁剪不会显示
scroll，生成两个滚动条，通过滚动条来查看完整的内容
auto，根据需要生成滚动条
垂直外边距的重叠（折叠），相邻的处置方向外边距会发生重叠现象
兄弟元素：兄弟元素的相邻垂直外边距会取两者之间的较大值（两者都是正值的时候）特殊情况①如果相邻的外边距一正一负，则取两者的和②如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素：父子元素间相邻外边距，子元素会传递给父元素（上外边距），可以设置一个上外边距解决问题
行内元素的盒模型：行内元素不支持设置宽度和高度；行内元素可以设置padding，但是垂直方向padding不会影响不会影响页面的布局
display用来设置元素的显示的类型
可选值：
inline将元素设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为行内块元素，行内块，既可以设置宽度和高度又不会独占一行
table：将元素设置为一个表格
none：元素不会在页面中显示
visibility用来设置元素的显示状态
可选值：
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏，不显示，但是依然占据页面的位置

浏览器的默认样式

通常情况下浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须去除浏览器的默认样式
例如；*{
margin：0；
padding：0；
}但是可能会导致部分元素未去除默认样式