盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

如图：

padding

设置方法：

 <style type="text/css">.box{width: 300px;height: 300px;/*background-color这个属性将填充padding以及所有的border以内的区域*/background-color: red; 方法一：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: 30px}</style>

清除默认边距

一些标签显示时有默认的边距，影响使用

<style type="text/css">/*清除默认的边距，效率不高*/*{padding: 0;margin: 0;}</style>

用并集选择器清除

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;}

border

边框有三个要素：粗细线性颜色

1、如果颜色不写，默认是黑色的
2、如果线性样式 solid 不写不显示。
3、只写线性样式solid，默认的有上下左右 3px的宽度颜色为黑（谷歌浏览器），样式有多种：solid dotted double dashed等。

border属性两种设置方式：

 <style type="text/css">.box{width: 200px;height: 200px;border:  5px solid red;方法一：按照3要素border-width: 5px;border-style: solid;border-color: red;对应位置与padding一致border-width: 5px 10px;border-style: solid dotted double dashed;border-color: red green yellow;方法二：按照方向分border-top-width: 10px;border-top-color: red;border-top-style: solid;border-right-color: blue;border-right-width: 5px;border-right-style: dashed;border-bottom-width: 10px;border-bottom-color: red;border-bottom-style: solid;border-left-width: 10px;border-left-color: red;border-left-style:solid;所有没有样式border: none;设置border没有样式border-left: none;}</style>
</head>
<body><div class="box"></div></body>

看下border四边分别是什么形状？

分别把两边设置成透明（transparent）

.box{width: 100px;height: 100px;border-top:20px solid transparent;border-left: 20px solid red;border-right: 20px solid red;border-bottom: 20px solid transparent;

width: 100px;height: 100px;border-top:20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red;

width: 0px;height: 0px;border-top:20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red;

maigin

外边距指的是距离
与padding类似，设置方式为：

1        margin: 20px;2margin-top: 30px;margin-left: 50px;margin-bottom: 100px;

嵌套如果内层超过外层会显示？

*{margin: 0;padding: 0;}div{width: 300px;height: 300px;border: 20px solid red;background-color: green;margin: 100px;}/*maigin外边距指的是距离*/p{width: 300px;height: 300px;padding: 10px;border: 10px solid ;background-color: red;margin: 50px;}<div class="box"><p>盒子里嵌套盒子</p></div>

前端——css盒模型相关推荐

前端-css盒模型与浮动 QIan 锋逆战班
盒模型: 1 . content(内容区) 注:元素的宽和高 2 . padding(填充区) 注:用来控制父元素和子元素之间的位置系: 用来控制元素和内容之间的位置关系的. 特点:添加了paddin ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
【前端｜CSS系列第3篇】CSS盒模型、浮动及定位
在前端开发中,CSS是一项重要的技术,用于控制网页的样式和布局.在本系列的第三篇文章中,我们将学习CSS的盒模型.浮动以及定位,这些概念和技术在页面布局中起着至关重要的作用.通过本文的学习,希望能够帮 ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
CSS基础：简述CSS盒模型
盒模型问题:简述 CSS 盒模型一.块级盒子(Block box) 和内联盒子(Inline box) 在 CSS 中我们广泛地使用两种"盒子" -- 块级盒子 (block ...
css盒模型和元素绘制
转自:http://www.mysjtu.com/page/M0/S438/438952.html 一.什么是css盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过 ...

前端——css盒模型

文章目录