css盒子模型和一些属性

zengni 2017-05-04

盒子模型 也叫框模型 (Box Model) 包含内容(content)内边距(padding)

边框(border)外边距(margin)

最内部的框是元素的实际内容也就是元素框紧挨着元素框外部的是内边距padding

其次是边框(border)然后最外层是外边距(margin)整个构成了框模型

所有边设置顺序的都是 上 右 下 左 有不同的单位或百分比%  

如果时正方形四条边相等设一个就可以

h1 {padding: 10px 0.25em 2ex 20%;} 
h2 {padding: 10px} 四条边相
em   1em等于当前字体的长度2em等于两个字体的长度
如一个字是3px  那么2em就是 6px

ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

 只想设置左内边距可以这样写

h3{
padding-left: 10px;
}
 
h3{
padding:0 0 0 10px;
}

这段代码是设置了全部的内边距 只不过上右下都设置成了0;

前边为0 不用写单位

外边距margin是透明的,不是不会遮挡周边的其他元素而是其他的模块会挨着外边距

如果它们都是向左浮动float :left 会挨着外边距

css有一个绝对定位 你可以让元素到你指定的地方

绝对位置是相对于某个div的绝对位置 默认是body

position 属性规定元素的定位类型

 绝对定位与浮动float不能同时使用
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

position:absolute生成绝对定位的元素元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

<html>
<head>
<style type="text/css">
h1.gf
{
position:absolute;
left:150px;
top:150px
}
</style>
</head>

<body>
<h1 class="gf">离页面左侧 150px,距离页面顶部 150px</h2>

</body>

</html>

 可以利用border边框来画三角形

<!DOCTYPE html>
<html>
  <head>
    <style>
        .sanjiao {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
        }
    </style>
  </head>
  <body>
    <div class="sanjiao"></div>
  </body>
</html>

相关推荐

startXUEBA / 0评论 2016-05-30