css基础，盒子属性，内容属性

古城微笑少年丶 2022-05-17 03:19 202阅读 0赞

QQ:275487025  
QQ群：854312770  
欢迎各种大牛指点，和小白一起学习。

盒子模型：  
每个HTML元素都可以看作装了东西的盒子  
盒子具有宽度（width）和高度（height）  
盒子里面的内容到盒子的边框之间的距离即填充（padding）  
盒子本身有边框（border）  
而盒子边框外和其他盒子之间，还有边界（margin）  
![这里写图片描述][70]

内填充属性：  
![这里写图片描述][70 1]  
边框属性：  
![这里写图片描述][70 2]  
外边距属性：  
![这里写图片描述][70 3]

内容属性：

字体属性：  
![这里写图片描述][70 4]  
文本属性：  
![这里写图片描述][70 5]  
背景属性：  
![这里写图片描述][70 6]  
表格属性：  
![这里写图片描述][70 7]  
列表属性：  
![这里写图片描述][70 8]

光标属性：  
cursor属性：  
crosshair：精确定位“十”字形；  
pointer：“小手”形状  
text：文本“I”形；  
wait：等待，“沙漏”形(不同浏览器有差异)；  
default：默认指针；  
help：帮助，带尾箭头；  
auto：鼠标按照默认的状态根据页面上的元素自行改变样式；

透明属性：  
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。  
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。列子：

img
    { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }

[70]: /images/20220517/b4381f44b6aa40d2b8fa17548bb443cc.png
[70 1]: /images/20220517/51e9d7542d5940cf94bab63a7614ae3c.png
[70 2]: /images/20220517/c9da842d7a5f4664af84e10c4a566ead.png
[70 3]: /images/20220517/6882dfdf82724727ad602be8e6e9aada.png
[70 4]: /images/20220517/5669225f5f124b4dbd1f23c12e1d7ecc.png
[70 5]: /images/20220517/95f9f8c438034ae0a4eff1301b6e57b5.png
[70 6]: /images/20220517/024376b32b084670a06b80ec0af49515.png
[70 7]: /images/20220517/64ba0082a820416bbe00c133ed28f5fc.png
[70 8]: /images/20220517/355f0f9977514fb1aad4366acc7db83f.png