目 录

文本分散二端对齐:

text-align:justify;text-justify:inter-ideograph;

用box-shadow阴影外延值显示边框效果不影响网页布局。

.post-style-card:hover{box-shadow:0px 0px 0px 3px #38B7EA}

通过hover一个元素改变其它元素的CSS

定义一个父标签pic_0,二个子标签:pic_1与pic_2.鼠标经过Pic_0的时候,显示Pic_1,隐藏Pic_2,以达到切换图片的效果

#pic_1{display:none;}
#pic_0:hover #pic_1{display:block;}
#pic_0:hover #pic_2{display:none;}

解决CSS浮动塌陷方法

针对包裹的全是浮动元素的父级容器使用clearfix

.clearfix {zoom:1;}
.clearfix:after {content:”.”;display:block;visibility:hidden;height:0;clear:both;}

静态网页的三种布局

  • 一列布局:页面内容区域box

    {width:宽度数值;margin:0 auto;}

  • 二列布局:一列固定宽度另一列自适应宽度

    固定列容器:
    {width:宽度数值;float:left/right;}
    自适应列容器:
    {margin-方向:数值=固定列宽;}

  • 三列布局:二边固定宽度,中间自适应,中间放置主体内容。

运用伪对象选择符:frist-letter现实首字下沉的效果