CSS从入门到精通（盒子模型）

时间 2019-12-05

标签 css 入门精通盒子模型栏目 CSS 繁體版

原文原文链接

主要介绍盒子模型。 css

盒子模型

生活中的盒子

网页中的盒子模型

盒子模型的概念

盒子模型用来“放”网页中的各类元素。
网页设计中内容，如文字、图片等元素，均可是盒子(DIV嵌套)

那些html元素能够设置高和宽属性

块级元素

<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol> <dl> 、<dt> 、<dd>等
复制代码

替换元素

<img>、<input>、<textarea>等
复制代码

html标签分类

块级标签:占据一行，换行。

<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<h1>~<h6>、<p>、<form>、<hr>......
复制代码

行内标签:在一行，不换行。非替换元素:

<b>、<em>、<a>、<span>......
复制代码

替换元素:

<img>、<input>、<textarea>...
复制代码

边框属性

边框宽度(border-width)
边框颜色(border-color)
边框样式 ( border-style)
4个方向来表示(上、下、左、右)

设置元素边框宽度

border-width : thin | medium | thick | 长度值
复制代码

设置元素边框颜色

border-color : 颜色 | transparent
复制代码

设置元素边框样式

border-style : 值 | none | hidden
复制代码

边框属性

值	描述
none	定义无边框，默认值
hidden	与 “none” 相同。除非在表格元素中解决边框冲突时
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线
groove	定义 3D 凹槽边框
ridge	定义 3D 垄状边框
inset	定义 3D inset 边框
outset	定义 3D outset 边框
inherit	规定应该从父元素继承边框样式。

不一样方向表示:html

宽度

border-[left | right | top | bottom]-width 
复制代码

颜色

border-[left | right | top | bottom]-color
复制代码

样式

border-[left | right | top | bottom]-style
复制代码

缩写

边框缩写:

border : [宽度] | [样式] | [颜色]

复制代码

不一样方向:

border-top : [宽度] | [样式] | [颜色] 
border-left : [宽度] | [样式] | [颜色] 
border-right : [宽度] | [样式] | [颜色] 
border-bottom :[宽度] | [样式] | [颜色]
复制代码

内边距属性

设置元素的内容与边框之间的距离(内边距或填充),浏览器

分4个方向 (上、右、下、左)bash

– padding-top : 长度值 | 百分比
– padding-right :长度值 | 百分比
– padding-bottom :长度值 | 百分比
– padding-left :长度值 | 百分比 说明:值不能为负值

复制代码

内边距属性缩写

padding : 值1; //4个方向都为值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3;// 上=值1，左右=值2，下=值3 padding : 值1 值2 值3 值4;// 上=值1，右=值2，下=值3,左=值2
复制代码

外边距属性

设置元素与元素之间的距离(外边距),微信

4个方向(上、右、下、左)spa

– margin-top : 长度值 | 百分比 | auto
– margin-right : 长度值 | 百分比 | auto
– margin-bottom : 长度值 | 百分比 | auto
– margin-left : 长度值 | 百分比 | auto 说明:值可为负值
复制代码

外边距属性缩写

设置元素与元素之间的距离(外边距),设计

4个方向(上、右、下、左) margin : 值1; //4个方向都为值13d

margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3;// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4;// 上=值1，右=值2，下=值3,左=值2
复制代码

通常经验

默认状况下，相应HTML块级元素存在外边距 body、h1~h六、p......
声明margin属性，覆盖默认样式

body, h1, h2, h3, h4, h5, h6, p{
	margin: 0;
}
复制代码

margin值为auto , 实现水平方向居中显示效果

外边距合并

垂直方向，两个相邻元素都设置外边距，外边距会发生合并
合并后外边距高度=两个发生合并外边距的高度中最大值

盒子模型计算

标准盒子模型

在 CSS 中，width 和 height 指的是内容区域的宽度和高度
增长内边距、边框和外边距不会影响内容区域的尺寸
但会增长元素框的总尺寸

ie盒子模型

统一块儿来

增长DOCTYPEcode

<!DOCTYPE html>
复制代码

display属性

inline 元素将显示为内联元素，元素先后没有换行符
block元素将显示为块级元素 , 元素先后会带有换行符
inline-block 行内块元素，元素呈现为inline，具备block相应特性
none 此元素不会被显示

-------------------------华丽的分割线--------------------orm

看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。

我的博客番茄技术小栈和掘金主页

想了解更多，欢迎关注个人微信公众号：番茄技术小栈