HTML、CSS总结(二)

排版的技巧:尽量把每一行看成一个盒子模型,尽量用浮动定位,来横向平铺。

 

由于本盒子内部元素使用浮动定位后,本盒子获取不到高度,所以

要记住内部元素有浮动过的盒子结束标签前要清除浮动,否则影响后面的元素获取本盒子的高度。

 

大盒子尽量不要控制宽度和高度,行内元素在出现宽度或高度无法生效时,可外部增加一个块级盒子来排版定位。

或者使用:display:block把行内元素转换为块级元素进行排版

要充分利用ul,li的列表来对排版进行循环排版,尽量找到网站元素中的共同点,使用ul列表只需要拍好一个模块,就能重复使用

 

css

margin:外边距通用写法,外边距可以理解为,元素外部之间的距离,它可以使与兄弟元素之间的距离,或者是父级元素与它的距离

 

支持1个,2个,3个,4个参数,参数之间用空格隔开

 

margin-left:左侧外边距,margin-right:右侧外边距,margin-top:上侧外边距,margin-bottom:下侧外边距

 

 

padding:内边距通用写法,理解为:控制内部元素与它边线之间的距离(把内部元素往中间挤),当本盒子的高度或宽度被定义过时,使用padding会把本身的盒子扩大,解决办法,可以在内部元素与本盒子之间再加一个没有被控制过宽度和高度的盒子,在新增的盒子上使padding可解决该BUG



margin-left:左侧内边距,margin-right:右侧内边距,margin-top:上侧内边距,margin-bottom:下侧内边距

 

 

 

float:浮动定位,主要用在让块级元素横向排列,它是一个特殊的状态,被浮动的元素将不保留在标准流中的位置,高度和宽度完全决定于内部元素,体现与行内排列一样的效果。但是父级元素找不到内部浮动的盒子高度,所以要使用清除浮动。在父级元素结束标签之前加上<div  style=”clear:both”></div>

float:left

float:right

 

 

 

position:定位

position:absolate:绝对定位,绝对定位指以非标准流父级元素的左上角为坐标原点进行定位,可用属性有left:0px,right,top,bottom,他不保留在标准流中的位置,强调:非标准流的父级元素,如果要上一级元素控制内部的绝对定位元素,上一级元素必须退出标准流:加上postion: relative.

 

 

postion: relative.相对定位,与其他任何元素无关,只相对于本身在标准流中的位置相对移动定位,保留其在标准流的位置。

可用属性有left:0px,right,top,bottom

position:fixd 窗口固定定位,只与浏览器窗口有关,任何其他元素无法控制它,直观体现滚动条滚动时,它不会移动位置。它也不属于标准流,其他标准流元素认为它不纯在。可用属性有left:0px,right,top,bottom

 

排版中尽量使用margin,float排版,只有无法解决排版错误时才使用position定位

 

font:文字CSS控制的通用写法

font:12px "宋体","Arial Narrow",HELVETICA;

font-size:12px 文字大小

font-family:文字字体

font-weight:文字粗细

 

color:文字的颜色。只有文字有效,支持color:#fffff6个编码相同可以简写为3

color:rgba(0,0,0,1.00)rgba基准色编码,4个参数前3个参数控制颜色编码,最后一个参数是控制透明度(0-1)。


回到

顶部