解决坍塌问题
父元素高度坍塌的问题
造成的原因是子元素脱离文档流，浮动或定位了
解决办法1：父元素开启BFC，使用overflow :hidden
解决办法2：浮动的子元素后面添加个空div，设置清除浮动<div style="clear:both"></div>，会造成多一个div
解决办法3：使用after伪类，在坍塌的父元素上加一个clearfix的class，然后给该class设置伪类
clearfix::after{
content:"";
display:block; //设置成table也没问题
clear:both
}
子元素解决margin-top塌陷的问题（子元素，设置margin-top无效，会带着父元素一起）
解决的办法是在父元素上设置befor伪类，在前面加一个空的table即可解决
clearfix::befor{
content:"";
display:table;
clear:both
}
所以，在开发中，一般在父元素上，同时设置befor和after伪类，解决坍塌问题
clearfix::befor,
clearfix::after{
content:"";
display:table;
clear:both
}
平级兄弟元素，上下margin重合。一般用数学方法解决。
标题超过一定宽度后，用三个点来代替的解决方案
a{
display:inline-block;
white-space:nowrap; 强制不换行
overflow:hidden; 超出部分隐藏
text-overflow:ellipsis; 文本溢出时显示省略符
}
<html lang="zh-cmn-Hans">简体中文的话这样写更规范
子div在父div里完全居中的解决方案
<div class="par"><div class="son"></div></div>
1.第一种方案，绝对定位和负边距
.par{
width: 200px;
height: 200px;
margin: 200px auto;
background-color: red;
position: relative;
}
.par .son{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
定位设置子绝父相，margin-left：负的子元素宽度一半
2.第二种解决方案，flex布局
.par{
width: 200px;
height: 200px;
margin: 200px auto;
background-color: red;
display: flex;
justify-content:center;
align-items:Center;
}
.par .son{
width: 100px;
height: 100px;
background-color: green;
}
就三板斧，在父元素上设置
display: flex;
justify-content:center;
align-items:Center;
内联元素：span/strong/em/del/ins/lable/a/sub/sup
块级元素：div/h1/p/address/ol/ul/li/dl/dt/dd/table/form/fieldset/legend
内联块元素：input/img/select/textarea/iframe
chrome->webkit/blink
safari->webkit
firefox->gecko
IE->trident
opeara->presto
内联样式
<div style="widows: 100px;height:50px;background-color: red;"></div>
内部样式表
外部样式表/外链样式
权重依次变小
属性选择器和类选择器，权重同级，谁在下面显示谁的效果
!important > id > class|属性 > 标签|微元素 > *
!important正无穷，内联1000，id100，class|属性|伪类10，标签|微元素1，*0
[id="box1"]{ width: 100px; height: 100px; background-color: red; }
属性选择器，选中id为box1的盒子加样式。如果只写[ id ]，就是选中所有带id属性的盒子
特比是在input输入框修改宽度时，可以用 [ type="password" ]选中特定的表单
并列选择器
<div class="box box1"></div> <div class="box box2"></div>
.box{ width: 100px; height: 100px; }
.box.box1{ background-color: red; }
.box.box2{ background-color: blue; }
并列选择器和下级选择器，不同，注意。
div .box{ }这个是下级选择器，也叫派生选择器
box-sizing: border-box;这样设置，可以让设置的padding和border不会撑开盒子
display: flex;如果父元素使用了flex布局，子元素不需要设置float浮动
父元素设置justify-content，控制子元素水平排列方式，子元素左对齐flex-start，子元素右对齐flex-end，居中对齐center，两端对齐space-between，两端及中间留白对齐space-around
父元素设置align-items，控制子元素垂直方向排列方式，顶部对齐flex-start，中间对齐center，底部对齐flex-end
父元素设置flex-direction，控制子元素排列方向或顺序，默认水平显示row，水平翻转row-reverse，垂直分布column，垂直分布翻转column-reverse
另外，如果是多行的话，控制垂直排列，需要用align-content，和align-items属性一样的效果。
子元素是否在一行显示，flex-wrap: nowrap;控制在一行显示不换行，wrap自动换行
设置子级flex:1，指的是各子级出去自定义部分宽度后平分宽度。
visibility: hidden;保留被隐藏元素占用的空间
display: none; 不保留被隐藏元素占用的空间
opacity: 0.3; 值越大越不透明，值越小越透明（模糊）
input修改聚焦时的外边框，input{ outline: none; }
input:focus{ border: 1px solid red; }
table tr:nth-child(4)给第四行加样式的选择器，xx:nth-child(5)表示第五个xx元素
