NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

CSS代码：以下两处代码是NEC中CSS初始化样式和功能性样式。今后的NEC研究中，默认这两处是引用的。

/* 这是CSS reset 代码 --- 初始化样式 */

/* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;}

/* 这是function.css代码 --- 功能性样式 */

/* function */ .f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";} .f-cb,.f-cbli li{zoom:1;} .f-ib{display:inline-block;*display:inline;*zoom:1;} .f-dn{display:none;} .f-db{display:block;} .f-fl{float:left;} .f-fr{float:right;} .f-pr{position:relative;} .f-prz{position:relative;zoom:1;} .f-oh{overflow:hidden;} .f-ff0{font-family:arial,\5b8b\4f53;} .f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;} .f-fs1{font-size:12px;} .f-fs2{font-size:14px;} .f-fwn{font-weight:normal;} .f-fwb{font-weight:bold;} .f-tal{text-align:left;} .f-tac{text-align:center;} .f-tar{text-align:right;} .f-taj{text-align:justify;text-justify:inter-ideograph;} .f-vam,.f-vama *{vertical-align:middle;} .f-wsn{word-wrap:normal;white-space:nowrap;} .f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;} .f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;} .f-ti{overflow:hidden;text-indent:-30000px;} .f-ti2{text-indent:2em;} .f-lhn{line-height:normal;} .f-tdu,.f-tdu:hover{text-decoration:underline;} .f-tdn,.f-tdn:hover{text-decoration:none;} .f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;} .f-csp{cursor:pointer;} .f-csd{cursor:default;} .f-csh{cursor:help;} .f-csm{cursor:move;} .f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}//配合 onselectstart="return false"使用

两列， 左侧定宽，右侧自适应 - HTML代码：

<div class="g-bd1 f-cb">
    <div class="g-sd1">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>

两列， 左侧定宽，右侧自适应 - CSS 样式

.g-bd1 {
    margin: 0 0 10px;
}
.f-cb {
    zoom: 1;
}
.g-sd1 {//左侧定宽，
　　position: relative;//采用相对自己定位
　　float: left;
　　width: 190px;//定宽
　　margin-right: -190px;//关键代码
　　top:0;left:0;//缺省
}
.g-mn1 {//右侧自适应
   float: right;
   width: 100%;
}
.g-mn1c{
   margin-left:200px;//这个元素的margin-left = 定宽 + 需要隔开的距离。
}
p {
   height: 150px;padding: 10px;color: #fff;background: #ff0097;
}

样式如下图：

左侧定宽，并且左浮动，相对自己定位，top:0;left:0;margin-right右移定宽的负值。

右侧左浮动且宽度100%;右侧内的子元素容器 margin-left = 定宽 + 需要隔开的距离。

 

我也只能按照自己的理解解释，各种细节，只能自己写一写，方能体会。