文档章节

CSS盒子模型

wytao1995
 wytao1995
发布于 09/16 04:53
字数 819
阅读 10
收藏 0

一、什么叫框模型

页面元素皆为框(盒子)

定义了元素框处理元素内容,内边距,外边距以及边框的计算方式

二、外边距

围绕在元素边框外的空白距离(元素与元素之间的距离)

语法:margin,定义4个方向的外边距

1、单边定义:margin-top/right/bottom/left

    (1)取值:以px为单位

            %,占父级元素宽度的%比

    正数:margin-left 元素向右移动,margin-top元素向下移动

    负数:就是相反方向

        取值 auto:自动计算块级元素的外边距,对于上下外边距无效,块级元素水平居中

2、简写方式

    margin:value ;定义4个方向的值

    margin:v1 v2; v1设置上下,v2设置左右

            margin:0 auto:设置块级元素水平居中

    margin:v1 v2 v3;v1设置上,v2设置左右,v3设置下

    margin:v1 v2 v3 v4;上右下左

3、自带外边距的元素

h1~h6、p、body、ol、ul、dl、pre

一般在开发的时候需要重置具有外边距的元素

方案一:*{margin:0;padding:0}

方案二:参考淘宝,

4、外边距的特殊效果

(1)外边距合并

        当两个垂直外边距相遇时,他们将合并成一个,最终的距离取决于两个边距中较大的

  (2)行内元素对外边距的表现

        行内元素垂直外边距无效(img)除外

(3)行内块对外边距的表现

        同一行中,一个行内块设置了垂直边距,同行其他行内会跟着变化

    (4)外边距溢出

        在特殊条件下,为子元素设置上外边距,会作用到父元素

        特殊条件:1⃣️父元素上边框

                        2⃣️ 为第一个子元素设置上外边框,任何一个  都会造成外边框溢出

        解决方法:

            1⃣️ 为父元素添加边框,弊端:影响了父元素的实际高度

            2⃣️ 为父元素添加内边距,弊端  了父元素的实际高度

            3⃣️ 在父元素的  第一个子元素位置,添加一个空的table

5、内边距

不会影响其他元素,但是会影响自己的占地尺寸,视觉上感觉大小发生变化

语法:

padding:value ;设置4个方向的内边距

padding:v1 v2;v1设置上下,v2设置左右

padding:v1 v2 v3;v1设置上,v2设置左右,v3设置下

padding:v1 v2 v3 v4;设置上右下左

单方向设置:padding-top/right/bottom/left

 

box-sizing属性,设置框模型的计算方式

box-sizing:content-box;默认值,盒子模型计算,div设置的width,height为content的大小

<style>
        #d1{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 10px solid black;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>

box-sizing:boder-box;div设置的width,height为border外边距的大小

<style>
        #d1{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 10px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>

© 著作权归作者所有

上一篇: CSS-background
下一篇: CSS--边框
wytao1995
粉丝 1
博文 53
码字总数 33926
作品 0
六安
私信 提问
盒子模型的理解

概述 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒...

名字已被取
2016/03/14
60
0
DIV+CSS盒子模型

CSS盒子模型-什么是CSS盒子模型。 认识日常生活中盒子: 常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。 CSS盒子: 根据字面我们...

晨曦之光
2012/04/24
143
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
330
1
【Hello CSS】第二章-CSS的逻辑属性与盒子模型

首发:krisachan.github.io 作者:陈大鱼头 github: KRISACHAN 在上一篇的第一章CSS的语法与工作流中介绍了的语法规则以及基本的渲染流程。本篇则会分享的逻辑属性以及盒子模型。 首先开篇之...

陈大鱼头
03/06
0
0
前端进阶之什么是BFC?BFC的原理是什么?如何创建BFC?

作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,...

陈大鱼头
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
1
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
10
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部