03 盒子模型：

最新推荐文章于 2024-08-30 21:39:41 发布

凉风有信、

最新推荐文章于 2024-08-30 21:39:41 发布

阅读量71

点赞数 1

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/qq_52207728/article/details/116500453

版权

CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

盒子模型：

第二章盒子模型的概念：

盒子模型用来“放”网页中的各种元素

网页设计中内容，如：文字、图片等元素，都可是盒子模型（DIV嵌套）

网页中盒子模型：

边框：border 外边距：margin 内边距：padding 高度：height 宽度：width

第三章盒子模型属性：

width属性：

宽度：

width：长度值（in cm px等）|百分比|auto

最大宽度：

max-width：长度值|百分比|auto

最小宽度：

min-width：长度值|百分比|auto

说明：

设置块级元素和替换元素的内容高度

注意：在IE6以下是不支持max-width和min-width属性的，还有百分比的设置是相对父元素而言的！

height属性：

高度：

height：长度值|百分比|auto

最大高度：

max-height：长度值|百分比|auto

最小高度：

min-height：长度值|百分比|auto

说明：

设置块级元素和替换元素的内容高度

注意：在IE6以下是不支持max-height和min-height属性的，还有百分比的设置是相对父元素而言的！

哪些元素可设置width和height属性：

块级元素：

p、div、h1~h6、ul、li、ol、dl、dt、dd等、

替换元素：

浏览器根据其标签的元素与属性来判断显示的具体内容img、input、textarea等

border边框属性：

设置元素边框宽度：

border-width：thin|medium|thick|长度值

设置元素边框颜色：

border-color：颜色|transparent

设置元素边框样式：

border-style：值

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

4个不同方向来表示（上、下、左、右）

表示：

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：[宽度]|[样式]|[颜色]

padding填充属性：

设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上、右、下、左）

——padding-top：长度值|百分比

——padding-right：长度值|百分比

——padding-bottom：长度值|百分比

——padding-left：长度值|百分比

说明：

值不能为负值

注意：

盒子在网页中占的空间，不单单与width和height属性有关，还与padding有关。

内边距属性缩写：

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外边距属性：

设置元素与元素之间的距离（外边距），4个方向（上、右、下、左）

——margin-top：长度值|百分比|auto

——margin-right：长度值|百分比|auto

——margin-bottom：长度值|百分比|auto

——margin-left：长度值|百分比|auto

说明：

值可为负值

外边距属性缩写：

margin：值1；//4个方向值都为1

margin：值1 值2；//上下=值1，左右=值2

margin：值1 值2 值3；//上=值1，左右=值2，下=值3

margin：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4

· 默认情况下，相应HTML块级元素存在外边距，如：body、h1~h6、p…

· 生命margin属性，覆盖默认样式

body,h1,h2,h3,h4,h5,h6,p{margin:0;}

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

· 由浏览器计算外边距

· 垂直方向，两个相邻元素都设置外边距，外边距会发生合并

· 合并后外边距高度=两个发生合并外边距的高度中最大值

盒子计算：

标准盒子模型：

长：左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距

高：上外边距+上边框+上内边距+内容+下内边距+下边框+下外边距

IE盒子模型：

长为：左边框+左内边距+内容+右内边距+右边框

高为：上边框+上内边距+内容+下内边距+下边框

注意：如果没有Doctype文档类型声明，各浏览器按照自己的方式解析。IE浏览器就会用IE盒子模型， firefox浏览器会用标准盒子模型；如果有Doctype文档类型声明，就会按照标准盒子模型来解析。

第四章盒子模型的应用：

display属性：

· inline

元素将显示为内联元素，元素前后没有换行符。

· block

元素将显示为块级元素，元素前后会带有换行符。

· inline-block

行内块元素，元素呈现为inline，具有block相应特性

· none

此元素不会被显示（即在网页上看不到）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style type="text/css">
    a span{display:none;}
    /*设置为none时在网页上看不见*/
    a:hover span{display:inline;}
    /*鼠标经过时，显现出来为行内样式*/
</style>
</head>
<body>
    <div><a href="#">指我……<span>和你捉迷藏</span></a></div>
</body>
</html>

行内元素不具有宽、高属性的设置！

解决内联元素之间有缝隙的问题：

1、将编译器中的元素连在一起，不换行

<span>display属性——span</span>
<span>display属性——span</span>
<span>display属性——span</span>
将上面的方式转换为下面的方式：
<span>display属性——span</span><span>display属性——span</span><span>display属性——span</span>

2、

课程总结：

样式继承关系：

样式属性	继承
width / height	不继承、块级元素、替换元素
padding	不继承
margin	不继承
border	不继承

说明：

对于样式属性，通过设置值为inherit，指定从父元素继承相应属性值，如：div{padding:10px;}

div p{padding:inherit;}

盒子阴影：box-shadow：

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的距离。允许负值
v-shadow	必需。垂直阴影的距离。允许负值
blur	可选。模糊距离（虚实）必须为正，一旦为负就显示不出来
spread	可选。阴影的尺寸（大小）可为负
color	可选。阴影的颜色常用rgba()书写
inset	可选。将外部阴影(outset)改为内部阴影

注意：

1、默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。

2、盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影：text-shadow:

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;

值	属性
h-shadow	必需。水平阴影的距离。允许负值
v-shadow	必需。垂直阴影的距离。允许负值
blur	可选。模糊距离（虚实）
color	可选。阴影的颜色常用rgba()书写

圆角边框：border-radius：

语法：

border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角的效果！

注意：

参数值可以为数值或百分比的形式

如果是正方形，想设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

如果是个矩形，设置为高度的一半就可以做；若为50%代表盒子角在水平方向长度为长度的50%，在竖直方向长度为高的50%。注：50%时为椭圆！！！！

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角（顺时针）三个值为：左上角、右上角和左下角、右下角两个值为：左上角和右下角、右上角和左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、

注意：

盒子阴影、文字阴影和圆角边框都是CSS3新加的属性，IE9以下不支持！

边界图片：border-image：

用来构建美丽的可扩展按钮

语法：

border-image: source slice width outset repeat;

兼容性：

IE不兼容、FireFox、谷歌、Safari6+、Opera不兼容

border-image-source 属性：

border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式

语法：

bordr-image-source: none|image;

border-image-slice 属性：

border-image-slice属性指定图像的边界向内偏移

语法：

border-image-slice:number|%|fill;

border-image-width 属性：

border-image-width属性指定图片边界的宽度

语法：

border-image-width:number|%|auto;

border-image-outset 属性：

border-image-outset属性用于指定在边框外部绘制 border-image-area 的量

语法：

border-image-outset: length|number;

border-image-repeat 属性：

border-image-repeat属性用于图片是否重复（repeated）、拉伸（stretched）或铺满（rounded）

语法：

border-image-repeat: stretch|repeat|round|initial(默认)|inherit(继承);

凉风有信、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03 盒子模型：

盒子模型：第二章盒子模型的概念：盒子模型用来“放”网页中的各种元素网页设计中内容，如：文字、图片等元素，都可是盒子模型（DIV嵌套）网页中盒子模型：边框：border 外边距：margin 内边距：padding 高度：height 宽度：width第三章盒子模型属性：width属性：宽度： width：长度值（in cm px等）|百分比|auto最大宽度： max-width：长度值|百分比|auto最小宽度： min-width：长度值|百分比
复制链接

扫一扫