10-[CSS]-盒模型:border,padding,margin

1、CSS盒子模型

HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型。 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示:

    <!-- 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型

        重要的属性: width,height,padding,border,     margin

        width: 指的是内容的宽度,而不是整个盒子真实的宽度
        height: 指的是内容的高度,而不是整个盒子真实的高度

        做一个宽度402*402的盒子,你应该如何设计?
     -->

    <!-- 如果想保证盒子的真实宽度,加width应该减padding  减width 应该加padding -->

2、border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;

            /*简写*/
            /*border: 5px  solid  red;*/

            /*按照3要素*/
            /*宽度,类型,颜色*/

            /*border-width: 5px;
            border-style: solid;
            border-color: red;*/

            /*border-width: 5px 10px;
            border-style: solid dotted double dashed;
            border-color: red green yellow;
            */

            /* 按照方向分*/
            /* 四个值 上 右 下 左 */
            /*
            border-style: dotted dashed double solid;
            border-width: 5px 10px 15px 20px;
            border-color: blue red yellow slateblue;
            */

            /* 三个值 上 左右 下*/
            /*
            border-style: dotted double solid;
            border-width: 5px 10px 20px;
            border-color: blue yellow slateblue;
            */

            /* 两个值 上下 左右 */
            /*
            border-style: dotted solid;
            border-width: 5px 20px;
            border-color: blue yellow;
            */

            /* 一个值 上下左右 */
            /*
            border-style: dotted;
            border-width: 20px;
            border-color: blue;
            */

            /*设置border没有样式*/
            /*border: none;*/

            /*border-top: 0;*/
            border-left: 10px solid red;

        }
    </style>
</head>
<body>

    <!--
    border: 边框的意思
    边框有三个要素: 粗细 线性 颜色

    如果颜色不写,默认是黑色的

    如果 粗细不写 不显示。 只写线性样式,默认的有上下左右 3px的宽度 solid 默认的黑色

     -->

     <div class="box"></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        /*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

3.padding内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding</title>

    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            /*padding: 30px;*/
            background-color: red;
            /*border: 5px solid yellow;*/

            /*小属性设置*/
            /*padding-top: 30px;
            padding-right: 30px;
            padding-bottom: 30px;
            padding-left: 30px;*/

            /*综合属性设置,用空格隔开*/

            /*上 右 下 左*/
            /*padding: 20px 30px 40px 50px ;*/

            /*上 左右  下*/
            /*padding: 20px 30px 40px;*/

            /* 上下 左右*/
            /*padding: 20px 30px;*/

            /*上下左右*/
            padding: 20px;

        }
    </style>
</head>
<body>

    <!--
    padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
    也就是说background-color这个属性将填充所有的border以内的区域

    就是边框到内容之间的距离

    padding有四个方向。所以说我们能分别描述4个方向的padding
    方法有两种:1.写小属性  2.写综合属性 用空格隔开

     -->
    <div class="box">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

    <!--
        比如说通常我们做站的时候,要清除默认的padding,margin

        * 效率不高。所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表)

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
     -->

    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>

    </ul>
</body>
</html>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

4、margin外边距

            /*
            内边距:内容区域到边框的距离
                内边距会扩大元素所在的区域
            注意:
                为元素设置内边距 只能影响自己,不会影响其他的元素;
            */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            background-color: green;
            /*margin: 20px;*/

            margin-top: 30px;
            margin-left: 50px;
            margin-bottom: 100px;

        }
        p{
            border: 1px solid green;
        }

    </style>
</head>
<body>

    <!-- margin: 外边距  指的是距离

     -->
    <div></div>

    <p>我是一个p标签</p>

</body>
</html>

原文地址:https://www.cnblogs.com/venicid/p/9125667.html

时间: 2024-10-05 09:18:50

10-[CSS]-盒模型:border,padding,margin的相关文章

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,

尖刀出鞘的display常用属性及css盒模型深入研究

一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性. 其实display:inline-block这个属性现在浏览器都支持,其实IE从5.5开始就已经支持了,但是IE6,7支持的还不够完善,我们可以先来做demo测试下就可以明白.为了做demo,所以我们现在需要

大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式 浏览器兼容性 大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w

IE浏览器和CSS盒模型【转】

总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,也就是会显示正确的盒模型,而在 quirks 模式下使用先前的,不规范的算法.即,只有在怪异模式下,css盒模型才会在ie和火狐下存在差异. 但是实际上我们都是使用标准的模式,只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作. //以下摘自百度百科"怪异模式"

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

什么是CSS盒模型 ?IE盒模型和W3C盒模型是什么?

1.CSS盒模型 盒模型,顾名思义就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,相当于盒模型的内容(content):东西与盒子之间的空隙,理解为盒模型的内边距(padding):盒子本身的厚度,就是盒模型的边框(border):盒子外与其他盒子之间的间隔,就是盒子的外边距(margin).其中CSS盒模型(图1)分为IE盒模型(图2)和W3C盒模型(图3). 盒模型一共有两种模式,一种是标准

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

CSS 盒模型

CSS盒模型也叫框模型,具备内容(content).内边距(padding).边框(border).外边距(margin)这些属性.在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘与其他框分开: margin:外边距,表示框的边缘与相邻框之间的距离: padding:内边距,表示框内容和边框之间的空间. 盒模型的结构如下图所示: 由上图可以看出,width和height指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

理解CSS盒模型

CSS盒模型是CSS可视化格式化系统的基石,它是理解样式表如何工作的核心概念,盒模型可以用于元素定位和网页布局.内边距padding是内容区和边框border之间的区域,元素盒在页面上占据的总宽度是左边的外边缘到右边的外边缘之间的距离.使用width和height属性可以设置块级元素或内嵌可替换元素的大小.外边距margin是围绕在元素边框之外的可选区域.正常文档中的相邻块级元素的垂直外边距将会重合,即,相邻的两个块级元素之间的空白将会是两个元素的外边距中较大的那一个,而不是两个外边距的和.边框