css基础样式和盒子模型

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Coco_Wditm/article/details/54407169

知识点:
基础样式:
前景:
color/文字颜色/
font-size/文字尺寸/
font-weight/文字重量normal bold bolder linghts/
font-family/文字字体 /
font-style/文字样式/

背景:
background-color/背景颜色/
background-image/背景图片/
background-repeat/背景图片平铺的方式默认repeat、no-repeat、repeat-X、repeat-Y/
background-position/背景图片从什么地方开始绘制xy轴像素,相对于画布的本分比、常量/
background-size/背景图片尺寸(以当前画布的大小为参考点)/
*所有的可视化标签都是方形
显示方式:
*不要看那么多标签就慌了,因为对于高手来说,所有的可视化标签都是 一个盒子(方框)
无非就是三个区别
标签名字不一样(比如div和P)
标签的功能不一样(a的功能就是用来超链接、ul和li标签用来做列表)
标签的默认样式不一样
height/高度/
weight/宽度/
text-align/文本对齐方式 left、center,right/
line-height/文本垂直对齐方式,单行文本把它设置为height一样的值/
cursor/光标样式pointer、ew-resize、ns-resize/;
div元素是/块级元素/
块级别元素默认占用整行
尽管被设置了区域也不让出自己的地盘、
span元素是/行内元素/
行内元素默认根据文本的内容自适应宽度
尽管被设置了区域也不要(只要能够满足自己的基本需求就可以了)
display/显示的方式block、inlime、inline-block、none/
div{ display:block}
span{ display:inline}
chrome浏览器和fireDebug
/必须要会/
样式属性的分析
盒子模型
案例
英文单词:
增【insert】、删【update】、改【delete】、查【select】
border【边框】、padding【内边距】、margin【外边据】、content【内容】、context【上下文】、top【上边】、bottom【下边】、left【左边】、right【右边】、hover【悬停】

猜你喜欢

转载自blog.csdn.net/Coco_Wditm/article/details/54407169