CSS学习

盒子水平布局：

一个元素在其父元素内，水平布局必须要满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度
例如：父元素宽度为800 , 内容元素width=200
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
如果以上等式不成立，则成为过渡约束，则等式会自动调整，
调整如下：
如果7个值中没有设置有auto的情况，则浏览器自动调整margin-right值以使等式满足
如果将两个2外边距设置为auto，宽度固定，则会将外边距设置为相同的值，所以我们经常利用这个特点来使一个元素在其父元素中水平居中：
实例：
width: 100px; margin: 0 auto;

垂直布局：

子元素的高度比父元素高度大的时候，会溢出，，使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不显示
scroll 生成水平和垂直两个滚动条，通过滚动条查看完整的内容
auto 根据需要生成滚动条

*要让文字在父元素中垂直居中，只需要将父元素的line-height设置为一个和父元素的height一样的值即可

外边距折叠

相邻的垂直方向外边距会发生折叠
-兄弟元素间相邻垂直外边距会取两者之间的较大值（两者都是正直）
-特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负数，则取两者中绝对值较大的

-父子元素
-父子元素间相邻的外边距，子元素的会传递给父元素（上外边距），可以通过把父子元素的外边距隔开的方式，如给父元素加个border-top 上边框，但是这样会影响父子元素的高度，需要对元素的height和margin-top都进行调整
例1：2个box之间的间距只会是100px
.box1 {margin-bottom: 100px;} .box2 {margin-top: 100px}

行内元素盒模型

-行内元素不支持设置宽度和高度
-行内元素可以设置padding，但是垂直方向padding不会影响页面布局
-行内元素可以设置border，垂直方向的border不会影响页面布局
-行内元素可以设置margin，垂直方向的margin不会影响页面布局
要设置行内元素的宽度和高度，可以使用display属性

display 用来设置元素显示的类型

-可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素（会独占一行）
inline-block 将元素设置为行内块元素（不会独占一行）
table 将元素设置为一个表格
none 元素不在页面中显示

visibility 用来设置元素的显示状态

可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

盒子尺寸

默认情况下，盒子可见框的大小由内容、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和边距和边框的总大小

轮廓

box-shadow 用来设置元素的阴影效果，阴影不会影响到页面布局
第一个值，水平偏移量，设置阴影的水平位置 正值向右移动 负值向左移动
第二个值，垂直偏移量，设置阴影的垂直位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个 阴影的颜色
box-shadow: 10px 10px 10px rgb(0, 0, 0, .3);

浮动

通过浮动可以使一个元素向其父元素的左侧或者右侧移动
使用float 属性设置元素的浮动
可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
*注意，元素设置浮动以后，水平布局的等式不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
浮动的特别：
1.浮动原生会完全脱离文档流，不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或者右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时，不会超过它钱包的其他浮动元素
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，会排在块元素的下边
6.浮动元素不会超过它上班的浮动的兄弟元素，最多最多就是和它一样高
例：
box1: {width: 200px; height: 200px; float: left;} box2: {width: 300px; height: 300px; float: left;}
两个兄弟元素都设置float：left的时候，会水平排列

image.png

clear清除浮动

image.png

使用after伪类解决浮动高度塌陷的问题

就是使用after在父元素的最后添加一个元素，然后使用清除浮动来把整个父元素的高度撑开

image.png

clearfix

可以直接在元素的class里面直接使用，解决外边距重叠和高度塌陷的问题

image.png

相对定位

image.png