首页> web前端 > 正文

常见的css和盒子模型

  • 来源:互联网
  • 2018-07-17 22:09:09
  • 人已阅读
一、CSS语法
css:层叠样式表
css 主要由两部分组成:选择器 + 样式属性
例如:p{font-size:24px; color:red;}

二、color
color颜色的多种值
英文(颜色英文单词)
#十六进制 (#00ff99)
rgb():r-red红 g-green绿 b-blue蓝
  rgb(0-255,0-255,0-255)  三个值
rgba(): r-red红、g-green绿、b-blue蓝、a-透明度
   rgba(0-255,0-255,0-255,0-1)  四个值

三、盒子模型
外边距margin: top  right  bottom  left
margin-top  顶部外距离
margin-right  右边外距离
margin-bottom  底部外距离
margin-left  左边外距离
margin:auto;  盒子水平居中

内边距padding: top  right  bottom  left
padding-top  顶部外距离
padding-right  右边外距离
padding-bottom  底部外距离
padding-left  左边外距离
注:padding会改变盒子大小

边框border: width  style  color
border-width  大小                      
border-style  样式             
border-color  颜色
border-style :
solid      实线
dashed  虚线
dotted   点线
double   双边框

盒子模型占位计算
盒子大小 =  样式宽  +   内边距  +  边框
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border

1)px像素 是显示器中  大小单位
2)%是相对父级大小的占比

文章评论

 Top