css布局(css布局的基本思想和步骤)-烨晟网络

<h2><a href="https://zzzjtd.com/tag/css" title="View all posts in css" target="_blank">css</a><a href="https://zzzjtd.com/tag/%e5%b8%83%e5%b1%80" title="View all posts in 布局" target="_blank">布局</a></h2>
css是一个网页的外衣，网页好不好看取决于css款式，而布局是css中比较重要的部分，当产品把一个需求规划交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是html的结构，根据要兼容的浏览器，数据的拼接，代码的可维护性，扩展性来挑选css的布局办法。有时分，一个好的布局可以减少许多代码，用css处理网页布局的时分有许多技巧性的东西，下面就给咱们介绍一些css布局技巧实例及css布局模型。 
css的基础布局办法 
1.块区域介绍 
这是一个阶段. 
p元素的包括块是div元素，由于作为块级元素，表单元格或行内元素，这是最近的先人元素，相似的，div的包括块是body.因而，p的布局依赖于div的布局，而div的布局则依赖于body的布局。 
块级元素会主动重启一行。 
2.块级元素 
正常流布局 
块级元素 
一般的，一个元素的width被界说为从左内鸿沟到右内鸿沟，height则是从上内鸿沟到下内鸿沟的间隔。 
不同的宽度，高度，内边距和外边距相结合，就可以确定文档的布局。 
水平布局 
简单规矩，正常流中块级元素框的水平部分总和就等于父元素的width.假定一个div中有两个阶段，这两个阶段的外边距设置为1em，阶段内容宽度width在加上其左，右内边距，边框或外边距加在一同正好是div内容的width. 
7大特点：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right 
这7个特点的值加在一同有必要是父块元素的width值.(其间margin-left,margin-right,width可以设置成auto)设置成auto,会依照以上规矩主动匹配到父块的宽度，例如7个特点的和有必要为400像素，没有设置内边距或边距(默以为0)而右外边距和width设置为100px,左外边距为auto,那么左外边距的宽度将是200px.可以用auto补偿实践值与所需综合的间隔。注：假如3个可以设置auto,都没设置成auto,并且宽度加在一同还不行父块区域的宽度的话，会默认将margin-right设置成auto来满足总和与父块持平的要求。 
假如两个外边距设置成auto,那么，它们会是等长的，因而将元素在其父亲元素中居中。 
假如这3个特点都设置成auto,那么,外边距会是0，而让width尽或许的长。 
可以运用百分数，可是边框的宽度不能是百分数。 
笔直布局 
7大特点：margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom,同样，这7个特点的值的总和是父元素height值。 
其间,margin-top,height,margin-bottom也可以设置成auto.(假如margin-top,margin-bottom设置成auto,那么它们就会主动设置成0). 
3.起浮与定位(确认基本布局) 
（1)起浮 
一个元素起浮时，其他内容会“环绕”该元素，起浮元素要设置一个width. 
float(left,right,none),none的状况一般用在文档内部，用来掩盖款式表，一般很少运用none. 
起浮元素会主动生成一个块级框。 
起浮元素规矩 
起浮元素不能超过包括它的块的左右鸿沟。（1,2左右鸿沟受限) 
起浮元素规矩 
起浮元素之前假如呈现起浮元素，则有必要在该起浮元素之后（不能掩盖)(2左面受限） 
左面受限 
假如起浮元素加一同太宽，会主动向下。。（宽度受限) 
宽度受限 
笔直方向要顶头不能超过块区域，同样不能超过在它上面的起浮元素。(上鸿沟受限) 
上鸿沟受限 
第一个起浮元素之后，第二个在它的下边，由于他们，第3个在它的右边。（2上边受限) 
起浮元素的顶端，不能比之前一切起浮元素或块级别元素的顶端更高(顶端受限) 
顶端受限 
起浮元素之间左右的鸿沟不能掩盖，如下1,2,3,之间不能掩盖(元素之间受限) 
元素之间受限 
起浮元素会尽或许高的放置 
起浮元素 
起浮元素会尽或许向左向右 
向左向右 
clear,可以防止指定了clear元素的两头存在起浮元素 
（2)定位 
利用定位，可以准确的界说元素框相关于其正常方位应该呈现在哪里，或许相关于父元素，另一个元素乃至浏览器窗口。 
position:static|relative|absolute|fixed 
static:元素框正常生成 
relative:元素框偏移某个间隔 
absolute:元素框从文档流彻底删去，并相关于其包括块定。包括块或许是文档中的另一个元素或初始包括块。 
fixed:相似absolute，不过其包括块是视窗本身。 
包括块： 
根元素(html或body),初始包括块是一个视窗大小的矩形. 
非根元素: 
-非根元素,假如其position是relative或static,则包括块由最近的块级框，表单元格或行内块构成。 
-非根元素,假如其position是absolute,包括块为最近的position值不是static的先人元素 
这里有一点很重要，元素可以定位到其包括块的外面。<a href="https://www.yeshengweb.com/wp-content/uploads/2022/12/css4-1.jpg"><img class="aligncenter size-full wp-image-10453" src="https://www.yeshengweb.com/wp-content/uploads/2022/12/css4-1.jpg" alt="css" width="678" height="453" /></a> 
css布局技巧 
1、多元素水平居中 
作用： 
多元素水平居中 
上图显现作用为多元素水平居中，即不管元素（小黑框）基数为多少，它们都能作为一个整体，水平居中。 
在网站布局中，许多时分，子元素中运用行内元素如span或块元素li标签且标签个数不定，而咱们又想让这一块不管个数有多少个(子元素的整体宽度不定)，一直都能居中显现。这就需求设置子元素display:inline-block。一起，根据display:inline-block的特点，子元素本身具备inline的特性，因而父元素需求设置text-align：center，来完成子元素作为一个整体在父元素中水平居中。 
main{ 
text-align:center; 
} 
div{ 
display:inline-block; 
*display:inline;/*hackIE*/ 
*zoom:1;/*hackIE*/ 
} 
运用display:inline-block特点，可以使行内元素或块元素可以不加float特点就可以界说本身的宽、高，一起又能使该元素在父元素居中显现。 
在内联元素上界说display:inline-block特点，发现IE6、IE7中的显现作用同其它浏览器共同，但事实是ie7及更低版本的ie浏览器不支撑display:inline-block这个特点。 
在IE下，display:inline-block只是触发了元素的layout。比如将display:inline-block设置到div上，只能保证这个div具有块元素的特征（可以设置宽度，高度等），但还是会产生换行。接下来要设置display:inline，使其不产生换行。将display:inline-block;display:inline;写在同一个款式上，inline-block特点是不会触发元素的layout的，因而咱们还要额定加上zoom:1来触发layout。 
除了以上所提到的有效办法之外，还有别的一种办法： 
先运用display:inline-block特点触发块元素，然后再界说display:inline，让块元素呈递为内联目标（两个display要先后放在两个CSS款式声明中才有作用，这是IE的一个经典bug，假如先界说了display:inline-block，然后再将display设回inline或block，layout不会消失）。 
div{display:inline-block;…}div{*display:inline;} 
可是要注意的是，display:inline-block元素间会产生多余空白。解决办法：父元素界说font-size:0去掉行内块元素水平方向空白；子元素界说vertical-align特点去掉行内块元素笔直方向空白。 
提示：假如您希望设置元素的水平笔直定位，那么您可以参阅本站的“CSS怎么使元素水平笔直定位”部分的内容！ 
2、栏栅化布局 
作用： 
栏栅化布局 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/OPYyEE?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=OPYyEE#?secret=kqnT3YRseB" data-secret="kqnT3YRseB" title="" scrolling="no" frameborder="0" height="300"></iframe> 
display:flex; 
flex-direction:column;//上面两行等同于flex-flow：colomn 
flex-wrap:wrap;//显现wrap一行显现不完的时分换行 
height:440px; 
width:660px; 
一个Flexbox布局是由一个弹性容器(flexcontainers)和在这个容器里的弹性项目(flexitems)组成。 
弹性方向与换行(flex-flow) 
弹性容器有一个CSS特点“flex-flow”用来决议弹性项目的布局办法。 
假如弹性容器设置了“flex-flow”值为“row”，弹性项目摆放由左向右摆放。 
flex-flow 
假如flex-flow值设置为column，弹性项目摆放由上至下摆放。 
column 
制作一个20%、60%、20%网格布局 
.main-content{ 
width:60%; 
} 
.main-nav,.main-sidebar{ 
-webkit-box-flex:1;/*OLD-iOS6-,Safari3.1-6*/ 
-moz-box-flex:1;/*OLD-Firefox19-*/ 
width:20%;/*Foroldsyntax,otherwisecollapses.*/ 
-webkit-flex:1;/*Chrome*/ 
-ms-flex:1;/*IE10*/ 
flex:1;/*NEW,Spec-Opera12.1,Firefox20+*/} 
3、未知高度多行文本笔直居中 
办法一，运用display：inline-block+伪元素：http://codepen.io/floralam/pen/WbBrwV?editors=110 
未知高度多行文本笔直居中 
.container{ 
position:fixed; 
left:0; 
top:0; 
height:100%; 
width:100%; 
text-align:center; 
} 
.mask:after{ 
content:””; 
display:inline-block; 
vertical-align:middle; 
height:100% 
} 
.dialog{ 
display:inline-block; 
border:3pxsolidlightblue; 
} 
box容器通过after或许before生成一个高度100%的「备胎」，他的高度和容器的高度是共同的，相关于「备胎」笔直居中，在视觉上表现出来也便是相关于容器笔直居中了。 
办法二（感谢超级课程表胡晋哥哥的提示），运用display：table-cell： 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/yNeMPg?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=yNeMPg#?secret=VwUl10BvFR" data-secret="VwUl10BvFR" title="" scrolling="no" frameborder="0" height="300"></iframe> 
通过display转化成为表格的方式，再选用笔直居中的办法得到需求的结果。 
display:table此元素会作为块级表格来显现（相似），表格前后带有换行符。 
display:table-cell此元素会作为一个表格单元格显现（相似 
和） 
办法三（感谢超级课程表胡晋哥哥的提示），flexbox布局： 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/yNeMvM?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=yNeMvM#?secret=oHtIzh46Wa" data-secret="oHtIzh46Wa" title="" scrolling="no" frameborder="0" height="300"></iframe> 
flexbox特点： 
弹性容器：一个设有display:flex或display:inline-flex的元素 
弹性项目：弹性容器的子元素 
主轴、主轴方向：用户署理沿着一个弹性容器的主轴配置弹性项目，主轴是主轴方向的延伸。 
主轴起点、主轴结尾：弹性项目的配置从容器的主轴起点边开端，往主轴结尾边完毕。 
主轴长度、主轴长度特点：弹性项目的在主轴方向的宽度或高度便是项目的主轴长度，弹性项目的主轴长度特点是width或height特点，由哪一个对着主轴方向决议。 
侧轴、侧轴方向：与主轴笔直的轴称作侧轴，是侧轴方向的延伸。 
侧轴起点、侧轴结尾：填满项目的弹性行的配置从容器的侧轴起点边开端，往侧轴结尾边完毕。 
侧轴长度、侧轴长度特点：弹性项目的在侧轴方向的宽度或高度便是项目的侧轴长度，弹性项目的侧轴长度特点是「width」或「height」特点，由哪一个对着侧轴方向决议。 
别的，关于单行文本，设置line-height=height代码更加简洁: 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/eNJvyE?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=eNJvyE#?secret=zanpkKAeNh" data-secret="zanpkKAeNh" title="" scrolling="no" frameborder="0" height="300"></iframe> 
父元素设置宽度高度，然后设置特点 
text-align:center;/*水平居中*/ 
line-height:300px;/*line-height=height*/ 
提示：假如你想要深入了解flexbox布局，请参阅“CSS3Flexbox特点与弹性盒模型”部分的内容。 
4、多栏自适应布局 
关于移动设备浏览器：http://codepen.io/floralam/pen/NPVwgz?editors=110 
.container{ 
display:-webkit-box; 
} 
.left{ 
-webkit-box-flex:1; 
} 
.right{ 
-webkit-box-flex:1; 
} 
完成左右两边元素，右侧元素的文字不会溢出到左边方位。 
多栏自适应布局 
1）让左面的图片左起浮或许绝对定位， 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/wBbPPj?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=wBbPPj#?secret=EUDVCQi20H" data-secret="EUDVCQi20H" title="" scrolling="no" frameborder="0" height="300"></iframe> 
.right{ 
margin-left:150px; 
} 
2）让左面的图片左起浮或许绝对定位， 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/gbJogQ?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=gbJogQ#?secret=N9cajAyK6z" data-secret="N9cajAyK6z" title="" scrolling="no" frameborder="0" height="300"></iframe> 
.right{ 
overflow:hidden;/*让右侧文字和左边图片主动分栏*/ 
} 
3）左边图片设置为左起浮， 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/bNyaaX?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=bNyaaX#?secret=Tl5rdah9EG" data-secret="Tl5rdah9EG" title="" scrolling="no" frameborder="0" height="300"></iframe> 
.right{ 
display:table-cell;/*让右侧文字和左边图片主动分栏*/ 
} 
两栏或多栏自适应布局的通用类句子是（block水平标签，需配合起浮）： 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/vEwpjV?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=vEwpjV#?secret=xBsr8lX47u" data-secret="xBsr8lX47u" title="" scrolling="no" frameborder="0" height="300"></iframe> 
.cell{ 
padding-right:10px; 
display:table-cell; 
*display:inline-block; 
*width:auto; 
} 
起浮 
5、强制不换行 
white-space:nowrap; 
主动换行 
word-wrap:break-word;//性答应长单词或URL地址换行到下一行 
word-break:normal;//让浏览器完成在任意方位的换行 
word-wrap是操控换行的。break-word是操控是否断词的。 
强制英文单词断行 
div{ 
word-break:break-all; 
} 
6、li超过一定长度，以省略号显现 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/zxQjrK?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=zxQjrK#?secret=0bZqQ3UKil" data-secret="0bZqQ3UKil" title="" scrolling="no" frameborder="0" height="300"></iframe> 
nowrapli{ 
white-space:nowrap; 
width:100px; 
overflow:hidden; 
text-overflow:ellipsis; 
} 
7、左边导航 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/ogrbXW?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ogrbXW#?secret=jtFxB3WNtn" data-secret="jtFxB3WNtn" title="" scrolling="no" frameborder="0" height="300"></iframe> 
左边导航 
.nav{ 
position:relative; 
float:left;width:190px; 
margin-right:-190px; 
background:lightblue; 
} 
.container{ 
float:right; 
width:100%; 
background:pink; 
} 
.content{ 
margin-left:200px; 
} 
8、修复侧边栏 
在外容器的增加导航和主内容，当导航和主内容的宽度加上内外边距的数值大于外容器的宽度减去内边距的值，会导致导航和主内容（其间一个，html代码排后面的元素）被挤下。 
修复侧边栏 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/XJLRYq?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=XJLRYq#?secret=rMdUqUwm0L" data-secret="rMdUqUwm0L" title="" scrolling="no" frameborder="0" height="300"></iframe> 
解决方案： 
1)Section元素上运用box-sizing:border-box;模仿IE6中，使得内元素的宽度为width的值，而非width加上padding和margin的值。 
2)width:-moz-calc(75%-1rem*2);width:-webkit-calc(75%-1rem*2);width:calc(75%-1rem*2);width特点中减去padding值 
3)http://codepen.io/floralam/pen/yydPOE 
在元素内部增加一个额定的容器，并将padding放在这个新增的内部容器中，这是一种修复办法，并且得到众多浏览器支撑。 
9、css描绘三角形 
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/floralam/embed/preview/azgGmZ?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=azgGmZ#?secret=eBu6dUZgdM" data-secret="eBu6dUZgdM" title="" scrolling="no" frameborder="0" height="300"></iframe> 
许多关于运用css3来描绘特定图画，运用代码而非图片完成（多座小山包，回来顶部）的题目，都离不开描绘三角形。 
10、铲除起浮的技巧 
铲除起浮 
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有起浮（float为left或right）的元素，在这种状况下，容器的高度不能主动伸长以适应内容的高度，使得内容溢出到容器外面而影响（乃至损坏）布局的现象。这个现象叫起浮溢出，为了防止这个现象的呈现而进行的CSS处理，就叫CSS铲除起浮。 
1)增加最终一个元素 
2)父元素设置overflow:hidden; 
3)运用CSS的:after伪元素 
通过CSS伪元素在容器的内部元素最终增加了一个看不见的空格”020″或点”.”，并且赋予clear特点来铲除起浮。需求注意的是为了IE6和IE7浏览器，要给clearfix这个class增加一条zoom:1;触发haslayout。 
css布局的基本思想和步骤 
跟着Web技术的发展，每一个网站都离不开CSS(层叠款式表)，它的出现将Web内容与表现(也能够称作结构与款式)做到了真实的分离，因而CSS已经成为前端开发人员的根底必备技术。 
会用CSS的人都有这样一种感觉：它实在太简略了！没错，CSS的语法是最常见的键值方法(特点名：特点值)，常用的款式特点也就那么几十种。在掌握了选择器、布局定位、盒模型以及常用的款式之后，编写一个美丽的网站完全没有问题。当咱们重新手变成老手做过无数美丽网页之后，你是否有过这样的疑问：那些常用的款式特点，我每天都要敲上几十遍甚至上百遍，它们难道就不能精简一下，解放双手给我腾出一杯coffee的时间吗？ 
答案是肯定的！学过后台开发言语的人应该知道：思维是魂灵，凌驾于代码之上；下面咱们经过“盛行的CSS思维”系列文章来了解一些当下正在盛行的CSS思维。 
OOCSS 
界说：OOCSS(ObjectOrientedCSS)望文生义，便是面向目标的CSS，让咱们以面向目标的思维为辅导，编写出可重用，可扩展，易保护的CSS款式，因而它不是一门新的编程言语或者技术，也不是新的语法，它只不过是一种书写CSS的方法和标准。 
OOCSS的核心便是用最简略的方法编写最整齐，最洁净的CSS代码，防止出现一锅粥式的乱七八糟(编写时麻烦，修改时头疼，改版保护时难于上青天)。 
OOCSS最重要的是从项目的页面中分析笼统出“目标”组件，并给这些目标创建CSS规矩，最终完善出一套根底组件库，then,咱们新建页面时为元素应用已有的款式规矩，只须重写少量的甚至不写任何款式，就能创建一个美丽的页面，解放双手指日可下。 
引用OOCSS之父NicoleSullivan的话来说，面向目标的CSS有两个准则： 
独立的结构和款式(SeparationOfStructureFromSkin) 
独立的容器和内容(SeparationOfContainersAndContent) 
独立的结构和款式(皮肤)：简直每个元素在同一页面上具有不同的视觉表现方法(即皮肤，例如：登录按钮的皮肤和退出按钮的皮肤)，并在不同的页面上重复应用此皮肤款式。 
把元素的结构款式和皮肤款式独立出来作为根底模块款式，这些模块款式可重用就任何其它元素并得到一致的显示成果。 
在将结构和皮肤的款式分离之前，咱们的CSS款式很或许会这样界说： 
#button{ 
width:200px; 
height:50px; 
padding:10px; 
border:solid1px#ccc; 
background:linear-gradient(#ccc,#222); 
box-shadow:rgba(0,0,0,.5)2px2px5px; 
} 
#box{ 
width:400px; 
overflow:hidden; 
border:solid1px#ccc; 
background:linear-gradient(#ccc,#222); 
box-shadow:rgba(0,0,0,.5)2px2px5px; 
} 
#widget{ 
width:500px; 
min-height:200px; 
overflow:auto; 
border:solid1px#ccc; 
background:linear-gradient(#ccc,#222); 
box-shadow:rgba(0,0,0,.5)2px2px5px; 
} 
上面三个元素的款式是唯一的，并且它们用不行重用的ID选择器来界说各自的款式。但他们也有一些一起的款式特点，比如灰色的边框、暗影款式，跟着一点点地分析与合并，咱们最终会笼统出一起的皮肤款式： 
.button{ 
width:200px; 
height:50px; 
} 
.box{ 
width:400px; 
overflow:hidden; 
} 
.widget{ 
width:500px; 
min-height:200px; 
overflow:auto; 
} 
.skin{ 
border:solid1px#ccc; 
background:linear-gradient(#ccc,#222); 
box-shadow:rgba(0,0,0,.5)2px2px5px; 
} 
现在，一切的款式都运用类来界说。同时，咱们将一起的款式提炼为一个可重用的“皮肤”，防止了那些不必要的自我重复。将“皮肤”款式应用于任何元素都可得到相同的视觉效果，这便是OOCSS所倡导的“经过尽量少的款式来编写高复用的CSS”。 
独立的容器和内容：把内容从容器中分离出来，使内容不再局限于特定的容器，换句话说也便是使任何容器接受任何方法的内容。此准则关注的是目标的重用性(将模块的内容和容器解耦)； 
为了说明第二个准则的重要性，咱们先看一段CSS： 
#sidebarh3{ 
font-family:Arial,Helvetica,sans-serif; 
font-size:.8em; 
line-height:1; 
color:#777; 
text-shadow:rgba(0,0,0,.3)3px3px6px; 
} 
这些款式将应用到#sidebar下的h3元素。可是，如果咱们想把除了font-size和text-shadow之外一切款式应用到footer上面，如果你不运用OOCSS又该如何界说呢？ 
#sidebarh3,#footerh3{ 
font-family:Arial,Helvetica,sans-serif; 
font-size:2em; 
line-height:1; 
color:#777; 
text-shadow:rgba(0,0,0,.3)3px3px6px; 
} 
#footerh3{ 
font-size:1.5em; 
text-shadow:rgba(0,0,0,.3)2px2px4px; 
} 
虽然上面这种方法不算高雅，却也算不上最坏的状况，纳尼？难道还有比这更糟的?!是的，没有最糟，只有更糟： 
#sidebarh3{ 
font-family:Arial,Helvetica,sans-serif; 
font-size:2em; 
line-height:1; 
color:#777; 
text-shadow:rgba(0,0,0,.3)3px3px6px; 
} 
/*otherstyleshere….*/ 
#footerh3{ 
font-family:Arial,Helvetica,sans-serif; 
font-size:1.5em; 
line-height:1; 
color:#777; 
text-shadow:rgba(0,0,0,.3)2px2px4px; 
} 
你或许已经意识到，咱们正在辛苦的进行着完全没必要的重复、重复、再重复。OOCSS鼓舞咱们从大局的视点去考虑不同的元素，然后将它们一起的特点款式笼统为目标或模块，从而能够在不同的地方重复运用。 
上述的比如中，很多运用了子孙选择器和ID选择器，这违反了OOCSS中“独立容器和内容”。由于子孙选择器或ID使得内容过分依赖于特定的容器，子孙选择器嵌套的越深，这种复杂性也就越严峻。另外，div.header或h1.title类似的选择器也是不行取的，咱们推荐的做法是直接运用.header和.title。 
以下是OOCSS需要留意的要害点： 
1.尽量经过给根底组件增加多个类(扩展根底组件的CSS规矩)的方法，来防止(父容器+组件类)这种子孙选择器的运用，从而坚持OOCSS的扩展性。 
2.时间留意不要把根底组件搞成特定组件，组件是属于大家的、公共的，不要测验私有化。 
3.款式类的界说尽量不依赖HTML结构和标签(不符合OOCSS第二个准则)。 
4.防止子孙选择器(如：不要运用类似于.sidebarh3)，尽量缩短子孙选择器的长度，或者直接给元素增加相应的类(坚持层次单纯，易于重构)。 
5.防止运用id作为CSS的选择器，坚持运用类！！(类能够使得款式表模块化，易于重用，ID选择器私有化严峻，不利于重用，违反OOCSS思维)。 
6.防止在你的款式表中给类名隶属一个元素名(如不要这样做div.header或h1.title) 
7.除非一些很少的状况，防止运用!important。 
8.运用CSS网格(栅格系统)；

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

css布局(css布局的基本思想和步骤)

相关文章

access什么意思(access是什么意思)

PHP工程师面试题

网站建设协议(网站开发合同范本)

进步企业品牌网站该怎么制造

网站标签