CSS盒子模型

最新推荐文章于 2024-10-15 20:19:31 发布

风九儿

最新推荐文章于 2024-10-15 20:19:31 发布

阅读量181

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_39301366/article/details/82706065

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型的概念：
盒子模型用来放网页中的各种元素
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）

盒子模型的宽度属性
宽度 width：像素值/百分比/auto(自动)
最大宽度 max-width：像素值/百分比/auto(自动)
最小宽度 min-width：像素值/百分比/auto(自动)
其中百分比是根据父元素的值进行宽度设置
IE6下不支持 max-width min-width两个属性

盒子模型的高度属性
高度 height：像素值/百分比/auto(自动)
最大高度 max-height：像素值/百分比/auto(自动)
最小高度 min-height：像素值/百分比/auto(自动)
说明：设置块级元素和替换元素的内容高度和宽度
IE6下不支持 max-width min-width两个属性

哪些HTML元素可设置高和宽属性
块级元素
<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<p>、<form>、<hr>等
替换元素
<img>、<input>、<textarea>等

HTML标签分类
1.块级标签：占据一行，换行
2.行内标签：在一行，不换行,元素排满之后换行
非替换元素：<b>、<em>、<a>、<span>......
替换元素：<img>、<input>、<textarea>.....

盒子模型边框属性
边框宽度：border-width：thin/medium/thick/长度值
边框颜色：border-color：颜色/transparent透明
边框样式：border-style(必写)：solid/dotted/duble.....
border属性不同方向设置：
border-top/right/left/bottom-width
....-color
....-style
边框属性简写：
border：宽度、样式、颜色(空格分隔，顺序无关)
border-top/right/left/bottom：宽度、样式、颜色(空格分隔，顺序无关)

盒子模型内边距padding
padding-top/right/left/bottom：长度值/百分比(值不能为负值)
内边距简写
padding：值1；(4个方向都为值1)
padding：值1 值2；(上下=值1，左右=值2)
padding：值1 值2 值3；(上=值1，左右=值2，下=值3)
padding：值1 值2 值3 值4；(上=值1，右=值2，下=值3，左=值4)

盒子模型外边距margin
margin-top/right/bottom/left:长度值/百分比/auto(实现水平方向居中)
值可以为负值
margin属性也可简写，同padding简写规则
默认情况，相应HTML块级元素，存在外边距：body、h1~h6、p...，可声明margin属性，覆盖默认样式
p{margin：0;}
垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后的外边距高度=两个发生合并外边距的高度种的最大值

（标准）盒子模型计算
1.若有页面声明<!DOCTYPE html>则是标准盒子模型
盒子在页面中所占的宽度：
左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成
盒子在页面中所占的高度：
上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成
2.若没有<!DOCTYPE html>声明，各浏览器按自己的方式解析
如IE盒子模型：height=边框+内边距+内容高度

盒子模型的应用
display属性：
inline ，元素将显示为内联元素，元素前后没有换行符
block，元素将显示为块级元素，元素前后会带有换行符
inline-block，行内块元素，元素呈现为inline，具有block相应特性
none 此元素不会被显示
如：div{display：inline;}

相应内联元素及使用display：inline设置成内联元素的元素width和height属性无效。
水平方向margin-left/margin-right/padding-left/padding-right有效
垂直方向margin-top/margin-bottom/padding-top/padding-bottom无效

块级元素及使用display：block设置成块级元素的元素width、height、margin、padding属性都生效

可以使用inherit使盒子模型的属性得到继承，如：div下有p，div{padding:10px;} div p{padding：inherit;}