1. 首页
  2. IT资讯

无数前辈程序员的经验,经结合,得到css学习第三步

“u003Cdivu003Eu003Cpu003Eu003Cstrongu003E文档流(标准流)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E浮动u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EFloat:left | rightu003Cu002Fpu003Eu003Cpu003E特点:u003Cu002Fpu003Eu003Cpu003E不占据原来的位置,会脱标。u003Cu002Fpu003Eu003Cpu003E可以让块元素在一行上显示。u003Cu002Fpu003Eu003Cpu003E可以将行内元素转成行内块。(不推荐使用)u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E清除浮动u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EClear:both;u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E额外标签法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E在最后一个浮动元素后边添加新标签。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F15199192802682ea22a4e77″ img_width=”392″ img_height=”58″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EOverflow:hidden;u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E在父元素上使用overflow:hidden;u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F1519919280318e63083ca43″ img_width=”486″ img_height=”379″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E伪元素清除浮动u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F15199192802895f0183839d” img_width=”400″ img_height=”467″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E定位u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EPosition: left | right | top | bottomu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E静态定位u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EPosition:static; 标准流。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E绝对定位(看脸型)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EPosition:absolute;u003Cu002Fpu003Eu003Cpu003E特点:u003Cu002Fpu003Eu003Cpu003E◆自身从浏览器出发。u003Cu002Fpu003Eu003Cpu003E◆绝对定位之后,元素不占位置,会脱标。u003Cu002Fpu003Eu003Cpu003E◆嵌套的盒子,父元素没有给自身绝对定位,子元素绝对定位,子元素从浏览器出发设置自身位置。u003Cu002Fpu003Eu003Cpu003E◆嵌套的盒子,父元素绝对定位,子元素绝对定位,子元素从父元素出发设置自身位置。u003Cu002Fpu003Eu003Cpu003E◆行内元素转成行内块。(不推荐使用)u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E相对定位(自恋型)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EPosition:relative;u003Cu002Fpu003Eu003Cpu003E◆位置从自身出发。u003Cu002Fpu003Eu003Cpu003E◆设置相对定位之后,还占据原来的位置。u003Cu002Fpu003Eu003Cpu003E◆子绝父相,子元素绝对定位,父元素相对定位。u003Cu002Fpu003Eu003Cpu003E◆嵌套的盒子,父元素相对定位,子元素绝对定位,子元素从父元素出发设置自身位置。u003Cu002Fpu003Eu003Cpu003E◆不能将行内元素转成行内块。u003Cu002Fpu003Eu003Cpu003E2.4固定定位u003Cu002Fpu003Eu003Cpu003EPosition:fixed;u003Cu002Fpu003Eu003Cpu003E特点:u003Cu002Fpu003Eu003Cpu003E◆位置从浏览器出发。u003Cu002Fpu003Eu003Cpu003E◆不占据原来的位置,会脱标u003Cu002Fpu003Eu003Cpu003E◆可以将行内元素转换为行内块。(不推荐使用)u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E定位的盒子居中显示u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E★:margin:0 auto; 只能让标准流的盒子居中对齐。u003Cu002Fpu003Eu003Cpu003E★定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F15199192802701cc7b5fd84″ img_width=”445″ img_height=”486″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E标签包含规范u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E◆div可以包含所有的标签。u003Cu002Fpu003Eu003Cpu003E◆p标签不能包含div h1等标签。u003Cu002Fpu003Eu003Cpu003E◆h1可以包含p,div等标签。u003Cu002Fpu003Eu003Cpu003E◆行内元素尽量包含行内元素,行内元素不要包含块元素。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F1519919280327fbc074341a” img_width=”640″ img_height=”1514″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E规避脱标流u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E◆尽量使用标准流。u003Cu002Fpu003Eu003Cpu003E◆标准流解决不了的使用浮动。u003Cu002Fpu003Eu003Cpu003E◆浮动解决不了的使用定位。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F15199192802577b543a65ba” img_width=”641″ img_height=”105″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E图片和文字垂直居中对齐u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Evertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F15199192802826114c5f31f” img_width=”477″ img_height=”138″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F151991928032742fea2129b” img_width=”640″ img_height=”301″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003ECss可见性u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eoverflow:hidden; 溢出隐藏u003Cu002Fpu003Eu003Cpu003Evisibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。u003Cu002Fpu003Eu003Cpu003Edisplay:none; 隐藏元素 隐藏之后不占据原来的位置。u003Cu002Fpu003Eu003Cpu003EDisplay:block; 元素可见u003Cu002Fpu003Eu003Cpu003EDisplay:none 和display:block 常配合js使用。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ecss之内容移除(网页优化)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E◆使用text-indent:-5000em;u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F1519919280271a4a0bed3b9″ img_width=”388″ img_height=”117″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F1519919280258905f9ed99c” img_width=”373″ img_height=”203″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003ECss精灵图u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E属性选择器u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F15199192802624f0cfc0d8a” img_width=”433″ img_height=”185″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E emmet快捷键:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eemmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehtml:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E生成结构的快捷键:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E!+ tab,可以生成html5的结构代码。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E生成id名和类名u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E标签名.类名#id名+tabu003Cu002Fpu003Eu003Cpu003E没有标签名.类名+tab ==>divu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E生成同级元素:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E标签名+标签名+标签名 “+”tabu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E生成子类标签u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E标签名>子标签名>子标签名>子标签名+tabu003Cu002Fpu003Eu003Cpu003E标签名>子标签名>子标签名>子标签名^^子标签名+tabu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E带固定数量的标签:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eul>li*5+tabu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E带有序号名称u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eul>li.abc$*3 + tabu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E生成带有内容的标签:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eul>li>a{item}*5u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ecssu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ewidth:30px==>w30+tabu003Cu002Fpu003Eu003Cpu003EHeight:30px==>h30+tabu003Cu002Fpu003Eu003Cpu003EMargin:30px==>mg30+tabu003Cu002Fpu003Eu003Cpu003EPadding:30px==> pd30+tabu003Cu002Fpu003Eu003Cpu003ELine-height:12px==>lh12px+tabu003Cu002Fpu003Eu003Cpu003EBackground==>bg+tabu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F1519919280327be41d3d873″ img_width=”640″ img_height=”640″ alt=”无数前辈程序员的经验,经结合,得到css学习第三步” inline=”0″u003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:无数前辈程序员的经验,经结合,得到css学习第三步

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11396.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code