Box模型与CSS框架

HTML元素分类

HTML标签：HTML标签指使用尖括号括起来的关键字。
1、其中不以斜杠（/）开头的标签称为开始标签，以斜杠（/）开头的标签称为结束标签——双标签<p>内容</p>
2、有些标签本身既是开始标签也是结束标签——单标签<br/>
HTML元素：指从开始标签（start tag）到结束标签（end tag）的所有代码。
构成HTML元素的标签自身既是开始标签也是结束标签，则这样的HTML元素又称为空元素。否则称为非空元素；
块级和行内元素：根据是否自动换行

块级元素：（block element）
table、p、ol、ul、li、form、div、hr、hn(h1、h2、h3、h4、h5、h6)等元素，其特点为：块级元素自动换行且宽度默认情况下占满整个父元素

行内元素（inline element）又称为内联元素、内嵌元素、直进式元素
i、b、del、a、img、span, input、select、textarea、label 等元素，其特点为：行内元素不会自动换行，相邻行内元素可以排在同一行。

行级元素转换为块级元素为了换行或使用块级元素才有的CSS样式

常用CSS样式属性

display:设置元素生成的框的类型。div标签display标签属性值不能为inline
<a style="display: block;">内容</a>

position属性：用于定义建立元素布局所用的定位类型。
–文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。

1、任何元素都可以定位，但absolute或fixed元素会生成一个块级框，不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移。
2、当一个标签使用了position CSS样式属性，如果其样式属性值为非static（不考虑inherit）则该标签将脱离正常文档流，如果又没有指定 “left”, “top”, “right” 以及 “bottom” 样式属性的属性值，则该标签只待在原来位置，但已经脱离正常文档流。

h2{
  position:absolute;
  left:100px;
  top:150px;
}

left和right样式属性
1、left 属性规定元素的左边缘，该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移；
2、right 属性规定元素的右边缘，该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
注意：
a、如果不使用”position”属性或者”position”属性的值为”static”，那么设置”left”属性和”right” 属性不会产生任何效果。
b、对于static元素，为auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为auto。对于相对定义元素，left 的计算值始终等于right。

z—index ：设置元素的堆叠顺序。拥有更高堆叠顺序的标签总是会处于堆叠顺序较低的标签的上面。
a、z-index 样式属性的属性值可以是负值
b、z-index 仅能在定位标签上奏效（例如 position:absolute;）;
c、IE浏览器不支持”inherit”属性值。
width和height属性：分别用于设置元素内容区的宽度和高度。（单位：px）

<html>
    <head>
        <style type="text/css">
            img{
                position:absolute;
                left:0px;
                top:0px;
                z-index:-1;
            }
        </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <img src="/i/eg_smile.gif" />
        <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
    </body>
</html>

margin属性：用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。( 单位：px或cm)
margin—left，margin—right，margin—top,margin—bottom

注意：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并；浮动元素的外边距也不会合并；允许使用负值，不过要谨慎使用；
外边距合并：当两个垂直（非水平）外边距相遇时，合并后的外边距高度等于两个外边距高度中的较大者。

p{
  margin:2cm 4cm 3cm 4cm;
}

margin的缩写
margin

margin:0 auto;——标签居中显示

padding：在一个声明中设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
padding—left，padding—right，padding—top,padding—bottom
行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距；不允许使用负值。

padding:10px 5px 15px 20px;//按顺时针方向
//上内边距是 10px
//右内边距是 5px
//下内边距是 15px
//左内边距是 20px

padding的缩写

float属性：设置元素浮动方向。
注意：以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动；浮动元素会生成一个块级框，而不论它本身是何种元素；如果浮动非替换元素，则要指定一个明确的宽度，否则它们会尽可能地窄；假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
clear属性：用于设置元素的哪个边上不允许出现浮动元素。

        <div>
            <p style="float: left;">数学</p>
            <p style="float: right;">语文</p>
            <div style="clear: both;"></div>
            <!--结束浮动，免得的后面的标签受影响-->
        </div>

:after清除浮动
:after伪元素和:before伪元素分别用于在元素之后和之前添加内容，实际网页开发过程中:after伪元素比较常用，借助:after伪元素一般用于清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>：after清除浮动</title>
        <style>
            .out {
                width:200px;
                border: 5px solid red;
            }

            .out:after{
                content: '';
                display: block;
                width: 0px;
                height: 0px;
                clear: left;
            }

            .in {
                width: 100px;
                height: 100px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in" style="background-color: blue;"></div>
            <div class="in" style="background-color: green;"></div>
        </div>
    </body>
</html>

Box模型：为了方便HTML元素布局，每个HTML元素都包含在一个盒子里，这些矩形的盒子嵌套或者并列在一起形成了页面。
一个盒子模型从内到外分内容区（content）或元素（element）、内边距(padding)、边框(border)和外边距(margin)4部分，如下图：

HTML元素分类

margin:0 auto;——标签居中显示

猜你喜欢