网站如何规范的排版编辑模板建站代理

网站如何规范的排版编辑,模板建站代理,厦门企业网站建设公司,wordpress 入门主题1、浮动的元素脱标 标准流元素是区分行、块。 我们知道了浮动元素是脱离标准流的#xff0c;那么脱离标准流后#xff0c;浮动元素有哪些特性#xff1f; 答#xff1a;浮动元素#xff0c;脱离标准流后#xff0c;既可以设置宽度和高度#xff0c;也可以实现并排显示那么脱离标准流后浮动元素有哪些特性答浮动元素脱离标准流后既可以设置宽度和高度也可以实现并排显示不区分元素状态也就是不区分行内元素和块级元素。headmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}div{width:200px;height:200px;border:1px solid red;}div p{width:100px;height:100px;background:purple;}div span{width:100px;height:100px;background:orange;}/style/headbodydivp我是p标签/pspanspan标签/span/div/bodyp标签和span标签都设置了宽度和高度但是由于元素类型的限制span标签没有宽度和高度。div内部元素浮动之后div p{width:100px;height:100px;background:purple;float:left;}div span{width:100px;height:100px;background:orange;float:left;}需要注意的是兄弟元素如果有一个浮动了剩下必须都要浮动。如果此时p标签和span标签都没有设置宽度和高度元素的宽度会被内容撑宽不会自动撑满父盒子。div p{background:purple;float:left;}div span{background:orange;float:left;}2、依次贴边如果父盒子的宽度不足以存下所有的子盒子存放不下的会自动向前寻找直到空余位置能够存放从而进行贴边显示。headmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}div{width:400px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{height:200px;background:blue;}div p.par3{background:yellow;}div p.par4{width:300px;background:cyan;}/style/headbodydivpclasspar11/ppclasspar22/ppclasspar33/ppclasspar44/p/div/body如果父盒子的宽度不够子盒子会依次贴边但是如果前面元素中有空隙当前需要贴边的元素不会钻空不会出现钻空的现象而之会查询剩余宽度实现依次贴边。headmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{width:330px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:300px;background:cyan;}/style/headbodydivpclasspar11/ppclasspar22/ppclasspar33/ppclasspar44/p/div/body如果某一个子盒子的宽度大于了父盒子会有溢出状态。headmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:left;}div p.par1{height:250px;background:green;}div p.par2{width:330px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:650px;background:cyan;}/style/headbodydivpclasspar11/ppclasspar22/ppclasspar33/ppclasspar44/p/div/body向右贴边的原理和向左相同也是按照先后顺序进行贴边。style*{margin:0;padding:0;}div{width:600px;height:400px;border:5px solid red;margin:100pxauto;}div p{width:100px;height:100px;float:right;}div p.par1{height:250px;background:green;}div p.par2{width:100px;background:blue;}div p.par3{height:200px;background:yellow;}div p.par4{width:100px;background:cyan;}/style/headbodydivpclasspar11/ppclasspar22/ppclasspar33/ppclasspar44/p/div/body3、浮动依次贴边练习!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}.outer{height:440px;width:940px;padding:10px;border:2px solid #000;margin:10pxauto;}.outer div{float:left;}.outer.box1{height:260px;width:300px;background:pink;}.outer.box2{height:260px;width:240px;background:cyan;}.outer.s_box{height:130px;width:200px;}.outer.box3{background:yellowgreen;}.outer.box4{background:greenyellow;}.outer.box7{height:180px;width:300px;background:blueviolet;}.outer.s_box2{height:180px;width:160px;}.outer.box5{background:purple;}.outer.box6{background:palegreen;}/style/headbodydivclassouterdivclassbox1/divdivclassbox2/divdivclasss_box box3/divdivclasss_box box4/divdivclasss_box box4/divdivclasss_box box3/divdivclassbox7/divdivclasss_box2 box5/divdivclasss_box2 box6/divdivclasss_box2 box5/divdivclasss_box2 box6/div/div/body/html4、浮动margin塌陷问题标准流有margin塌陷的现象。标准流浮动流总结浮动元素没有了标准流的margin塌陷现象各自有各自的margin不会相互塌陷5、浮动元素让出标准流标准流中的元素都有自己的一个标准流位置后面的元素只能在前面元素的后面进行加载。浮动元素脱离了标准流它会让后面的元素占有自己原来的位置显示效果上来看仿佛是自己“飘”起来了我们称之为脱标了。标准流显示此时粉色盒子浮动了