遇到的好玩，实用的css属性

遇到的好玩，实用的css属性

查看页面布局的方法

javascript: (function(){
	var style = document.querySelector('#_outline_');
	if (style) {
		style.parentNode.removeChild(style);
	} else {
		style = document.createElement('style');
		style.id = '_outline_';
		style.innerHTML = "*{outline: 1px solid red}";
		document.body.appendChild(style);
	}
})();

使用text-align: justify;text-align-last: justify;实现flex两端对齐的方法

 .main{
    text-align: justify;
    text-align-last: justify;
  }
  div{
    width: 50px;
    height: 50px;
    color: brown;
    background: #ff6740;
    display: inline-block;
    line-height: 50px;
    text-align: center;
  }
  div::after{
    content: '';
    display: inline-block;
    width: 100%;
  }
  div:nth-child(odd){
    width: 100px;
    background: #dddddd;
  }
<section class="main">
  <div>是订导费</div>
  <div>度发</div>
  <div>哈哈哈</div>
  <div>呵呵</div>
</section>

表格设置边框 使用 border-collapse:collapse ;来合并边框
border-collapse:collapse ;

使用:focus-within来对表单元素获取焦点时，控制父级元素的样式