前端_day04_行,块,RGB,行高,overflow

一,行,块,行内块

　　行元素特点:

　　　　1,在一行显示,会和其他标签共享一行,如果当前行满了,换行显示

　　　　2,宽高为内容撑开的大小,无法设置宽高

　　　　3,居中使用text-align,加给它的父级容器

　　　　4,padding和margin只有左右生效,上下不生效

　　　　5,哪些元素是行元素:a,span

　　块元素特点:

　　　　1,独占一行

　　　　2,默认与父元素等宽,高度为内容撑开的高度

　　　　3,padding和margin都好用

　　　　4,居中使用margin:0 auto;

　　　　5,哪些元素是块元素:div,p,h1-h6,ul,ol

　　行内块元素特点:

　　　　1,右宽高和别人共享一行

　　　　2,宽高:默认内容撑开,可以设置宽高.input=button设置宽高前,要先改背景颜色

　　　 3,居中:在父容器上添加text-align:center

　　　　4,margin和padding:都好用

　　　　5,哪些是行内块元素:img,input

　　行块元素的转换

　　　　1,display的三个参数:block(将标签转为块元素),inline(将标签转为行元素),inline-block(将标签转为行内块)

二,背景background

　　1,background-image:url(path);图片网址或图片路径

　　2,background-repeat:背景图片是否重复

　　　　no-repeat:不重复

　　　　repeat:默认重复

　　　　repeat-x,y:x或y轴重复

　　4,background-position:背景图片定位位置

　　　　left,right,center

　　　　坐标值:10px,20px(x,y轴进行偏移

　　5,补充css的属性 list-style

　　　　list-style:none 去掉列表前方的小点

　　　　list-style-image:替换小点的图片

三,颜色值(十进制+透明度)

　　1,十进制三原色颜色值 0-255 rgb(122 224 16)

　　2,颜色值搭配透明度,透明度的值0-1的小数,rgba(216 76 51 0.5)

四,line-height

　　1,想要通过线高调整垂直距中,线高要等于父容器的高度

　　2,如果上下2个行元素要设置距离,线高设置为字体大小的2倍及以上

　　3,字体大小=font-size+2*padding(上下内边距)

　　4,设置图片与文字的对齐方式vertical-align,参数为top,bottom,middle

五,overflow

　　1,当内容超出父容器的范围时(溢出)用overflow处理

　　参数:auto(自动),hidden(隐藏),scroll(滑动)

 

　　　　

　　　　

　　

转载于:https://www.cnblogs.com/memo-song/p/8584125.html