一,行,块,行内块
行元素特点:
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(滑动)