css盒子模型

css盒子模型

css模型概述

<style>
    .d1 {
        /*盒子在网页中实际所占的宽度*/
        /*300px + 20px + 2px*/
        /*盒子在网页中实际所占有的宽度(高度):width+ padding*2 + border*2 */
        width: 300px;
        height: 300px;
        padding:10px; /*内边距*/
        border: 1px solid #ccc;
        margin: 10px; /*外边距*/
    }
</style>

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
术语解释:

height:高度

width:宽度

padding:内边距

maigin:外边距

border:边框

CSS padding属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

* {
        /*把网页中默认的margin和padding去掉*/
        margin:0;
        padding:0;
    }
    .d1 {
        width: 160px;
        height: 160px;
        background-color: orange;
        /*padding:10px ; 上下左右四个方向都为10px*/
        /*padding:10px;*/
        /*当padding:10px 20px ;设为两个值的时候,第一个表示上下,第二值表示左右*/
        /*padding:10px 20px;*/
        /*当padding:10px 20px 30px 设置为三个值的时候,第一个值表示上 第二个值表示左右,第三个值表示下*/
        /*padding:10px 20px 30px;*/
        /*四个值的时候,采用上右下左*/
        padding:10px 20px 30px 40px;
        /*padding:20px;
        padding-left: 30px;*/
    }

显示效果如下:

padding上右下左顺时针顺序依次为10px,20px,30px,40px。

CSS border边框

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜色。

.d1 {
        border:10px solid red;
    }

边框有很多属性可以自行设计篇幅有限这里不详细介绍。

CSS margin属性

设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。

p {margin: 20px 30px 30px 20px;}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值