css盒子模型及其他元素属性简介

时间:2021-08-09 20:43:10
列表属性及用法
属性值 样式 用法
none 无风格 list-style:none
disc 实心圆 list-style:disc
circle 空心圆 list-style:circle
square 实心方块 list-style:square
decimal 数字 list-style:decimal

超链接的伪类样式
其样式属性可以为: a:link未访问状态 a:visited以访问状态 a:hover鼠标上移状态 a:active激活选定状态
盒子模型
其属性值可以为:padding内边距content内容区 margin 外边距width内容宽度 border 边框height内容高度
内边距padding 内容和边框之间的距离 其属性值可以为:1个值:则四个方向采用相同的值 2个值:则上下的值,左右 3个值:则是上,左右,下 4个值:则按照顺时针的顺序,上,右,下,左依次添加 padding: 20px 5px 15px 10px;
外边距 margin 影响当前盒子和其他盒子的距离 其属性值可以为:1个值:则四个方向采用相同的值 2个值:则上下的值,左右 3个值:则是上,左右,下 4个值:则按照顺时针的顺序,上,右,下,左依次添加 margin-top: 50px 25px; 注意:当两个块级元素上下排列,上下间距取最大值 左右排列,左右间距为两者相加
边框border 内容区 content 内容宽度width注意:外边距,边框和内边距都会影响内容的宽度 内容高度height
圆角弧度border-radius 其属性值可以为:1个值:4个角都一样 2个值:左上右下,右上左下 3个值:左上,右上左下,右下 4个值:左上,右上,右下,左下 border-radius: 150px;
盒子阴影box-shadow 与text-shadow类似,但比它多了一个模糊拓展范围 其属性值为:1:x轴方向的偏移 2:y轴方向的偏移 3:模糊范围 4:阴影的拓展范围 5:阴影颜色 box-shadow: -10px -5px 10px 10px red;
overflow属性 其规定当内容溢出元素框时发生的事情。 其属性值可以为:visible:默认值 超出的文本默认显示 auto:当文本超出的时候显示滚动条,否则不显示 scroll:不管文本是否超出范围,度添加滚动条 hidden:将超出的部分隐藏起来 inherit规定应该从父元素继承 overflow 属性的值。 overflow: auto;