关闭

CSS盒模型

265人阅读 评论(0) 收藏 举报
分类:
CSS盒模型
元素分类:html中标签元素大体分为三种不同的类型
    1.块状元素
    <div>,<p>,<h1>...<h6>,<il>,<ol>,<dl>,<table>,<address>,<blockquote>,<form>etc.
    2.内联元素(行内元素)
    <a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
    3.内联块状元素
    <img>,<input>


元素分类--块级元素
特点:
    1.每个块级元素都从新的一行开始,并且其后的元素也另起一行。
    2.元素的高度,宽度,行高以及顶和底边距都可设置。
    3.元素宽度在不设置的情况下,是它本身父容器的100%。

    a{display:block;} --将内联元素a转换为块状元素。


元素分类--内联元素
特点:
    1.和其他元素都在一行上。
    2.元素的高度,宽度及顶部和底部边距不可设置
    3.元素的宽度就是它包含的文字或图片的宽度,不可改变。

    div{display:inline;}--将内联元素div转换为内联元素。


元素分类--内联块状元素
特点:
    1.和其他元素都在一行上。
    2.元素的高度,宽度,行高以及顶和底边距都可设置。
    a{display:inline-block;}--将a设置为内联-块状元素


盒子模型

    块级元素是一个盒子模型


盒模型--边框(一)
    边框就是围绕着内容及补白的线,
    可以设置它的粗细,样式和颜色(边框的三个属性)
    例:div{
        border-width:2px;//粗细最常用像素
        border-style:solid;//样式dashed(虚线)|dotted(点线)|solid(实线)
        border-color:red;//颜色
    }
盒模型--边框(二)
    可单独设置某一边框,其他边不设置边框样式
    div{
        border-top:1px dotted red;
        border-right:1px dotted red;
        border-lsft:1px dashed red;
        border-bottom:1px solid red;

    }


盒模型--宽度和高度
    css内定义的宽(width)和高(height),指的是填充以里的内容范围
    因此一个元素的实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

   高度同理 


盒模型--填充(padding)
    元素内容与边框之间是可以设置距离的,称为填充,填充也分为上右下左(顺时针)
    div{
        padding-top:20px;
        padding-right:30px;
        padding-bottom:25px;
        padding-left:34px;
    }
    如果上下填充一样为10px,左右 填充一样为20px,可以这样写
    div{padding:10px 20px;}


盒模型--边界(margin)
    元素与其他元素之间的距离可以使用边界(margin)来设置,边界也是顺时针。
    语法和padding 相同

    区别:padding在边框里,margin在边框外


例子如下图:


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:66382次
    • 积分:2068
    • 等级:
    • 排名:千里之外
    • 原创:96篇
    • 转载:9篇
    • 译文:0篇
    • 评论:63条
    最新评论