css中常用的属性(1)

  • css内边距
    内容与边框之间的距离是内边距。控制内边距大小就是padding属性。
padding:10px;(上右下左边距均为10px)
padding:10px 20px;(表示上下内边距10px 左右边距20px)
padding:10px 20px 30px;(表示上边距10px 右边距20px 下边距30px 左边距同右)
padding:10px 20px 30px 40px;(按照顺时针方向的边距,上、右、下、左)
padding-top:10px;(距离上边框的距离,可以用像素表示,也可用百分比表示是相对于父元素来说的, 也可以用单位为em表示,1em表示一个字的距离。)
padding-right:10px;(距离右边框的距离,同上)
padding-bottom:10px;(距离下边框的距离,同上。)
padding-left:10px;(距离左边框的距离,同上)
内边距可以放背景图片,利用position 来调整位置。
  • css边框
    对于边框使用border 属性。
border:1px solid red;( 对上、右、下、左四条边的统一描述,第一个值是边框的粗细,第二个值是线的类型,第三个值表示边框的颜色)
border-top:1px solid gray;(对某一条边的描述,可以将top置换为rightbottomleft) border-width:1px;(边框粗细)
border-style:doted;(边框线的样式)
border-color:gray;(边框颜色,可用纯色,也可以用16进制表示,rgb形式表示)

  • 外边距

    围绕在元素边框的空白区域的外边距用margin属性表示。外边距一般起到和另外一个元素产生距离的作用,可以使用的单位有%,em,px,mm。同样可以使用负值。

margin:1em;(设置四周的边距)
margin-top:10px;(上外边距的设置)
margin-right:10px;(右外边距的设置)
margin-bottom:10px;(下外边距的设置)
margin-left:10px;(左外边距的设置)

margin属性在应用时,垂直方向会与叠加的现 象,会以距离大的为准。对于没有边框和填充的盒子会合成一个外边距。

  • 行内元素和块级元素的相互转换

    display:block;(可以将行内元素转换为块级元素,独占一行,可以设置宽高了)
    display:inline;(可以将块级元素转换为行内元素,不具有块级元素的属性了)

  • CSS position 属性

    relative(相对定位)
    相对于自己最初的框,元素偏移某一距离,自己最初的框所占的空间依然在。

    absolute(绝对定位)
    相对于父元素的绝对定位,原先在普通文档流中占的空间会关闭。
    absolute属性配合left和top使用,来确定元素的位置。

fixed(固定定位)
固定在浏览器视窗内的某一处。同上配合left和top使用。

z-index(设置用户以Z轴方向看到的元素的优先级,默认情况下是0,数值大的会将数值小的覆盖,也可以设置为负数,降低其优先级)

猜你喜欢

转载自blog.csdn.net/qq_36647038/article/details/80201309