CSS盒模型

原创 2016年05月31日 23:18:55
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在边框外


例子如下图:


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

CSS 盒模型

CSS 盒模型 转自:http://www.qianduan.net/css-box-model.html CSS 盒模型 网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看...

【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC)

引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

CSS基础-盒模型 14

//联系人:石虎  QQ: 1224614774昵称:嗡嘛呢叭咪哄 盒模型 边框属性 什么边框? 边框就是环绕在标签宽度和高度周围的线条 边框属性...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)