１ 标签包含规范
◆div可以包含所有的标签。
◆p标签不能包含div h1等标签。
◆h1可以包含p，div等标签。
◆行内元素尽量包含行内元素，行内元素不要包含块元素。
2 规避脱标流
◆尽量使用标准流。
◆标准流解决不了的使用浮动。
◆浮动解决不了的使用定位。
使得绿色盒子跑到右边
<style type="text/css"> .father{ width:500px; height:500px; background:red; } .son{ width:100px; height:100px; background:green; float:right; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body>
<style type="text/css"> .father{ width:500px; height:500px; background:red; } .son{ width:100px; height:100px; background:green; float:right; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body>
.son{
100px;
height:100px;
background:green;
margin-left:auto;
}
设置盒子左外边距为auto，将盒子往右边冲
margin:0 auto ; 盒子左右边一直冲，居中
3 图片和文字垂直居中对齐
vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;
4 Css可见性
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
<style type="text/css"> .red{ width: 300px; height: 300px; background:red; visibility:hidden; } .green{ width: 300px; height: 300px; background:green; } </style> </head> <body> <div class="red"></div> <div class="green"></div> </body>
display:none; 隐藏元素 隐藏之后不占据原来的位置
