html css常用解决方案

解决坍塌问题

父元素高度坍塌的问题
造成的原因是子元素脱离文档流，浮动或定位了
解决办法1：父元素开启BFC，使用overflow :hidden
解决办法2：浮动的子元素后面添加个空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;    文本溢出时显示省略符
}
简体中文的话这样写更规范

子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

内联样式

内部样式表
外部样式表/外链样式
权重依次变小
属性选择器和类选择器，权重同级，谁在下面显示谁的效果
!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" ]选中特定的表单

并列选择器

.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元素