css盒子模型

最新推荐文章于 2024-04-13 15:16:57 发布

x1shadouhui

最新推荐文章于 2024-04-13 15:16:57 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/x1shadoubuhui/article/details/112558404

版权

css盒子模型本质上讲就是一个盒子：边框，外边距，内边距，内容

基础介绍

1.Margin(外边距) - 清除边框外的区域，外边距是透明的。
2.Border(边框) - 围绕在内边距和内容外的边框。
3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4.Content(内容) - 盒子的内容，显示文本和图像。

一：边框（border）

border可以设置元素的边框。边框的宽度样式颜色。住：边框会影响盒子的实际大小。
边框复合写法(border：solid实线 dashed虚线 dotted点线）

border：1px soild/dashed/dotted #000000;

二：内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
内间距简写
padding-top（上内边距）padding-right（右内边距）padding-bottom（下内边距）padding-left（左内边距）
padding会影响盒子实际的大小。（简单说：盒子有了高和宽，此时指定内边距的时候，会撑大盒子）
若盒子本身没有指定width或height，则盒子不会被padding撑开。

上下左右内边距都为1px

padding:1px;

上下内边距为1px 左右内边距为2px

padding：1px 2px;

上内边距为1px 下内边距为2px 左右内边距为3px

padding:1px 3px 2px;

三：外边距（margin）

margin属性用于设置外边距。
嵌套块元素的垂直外边距合并
父子关系：父元素有外边距同时子元素有外边距。此时父元素会塌陷较大的外边距值。
解决方案：

可以给父元素定义上边距。
可以给父元素定义上内边距padding：1px;
可以为父元素加：overflow：hidden；浮动定位固定。

住：

行内元素转换为行内块元素：

display: inline-block;

a标签下划线取消：

text-decoration:none;

行高(1px):

line-height：1px;

边框颜色

border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
四个边框为同一颜色 border-color:#eeff34；

不同边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        p.none {border-style:none;}
        p.dotted {border-style:dotted;}
        p.dashed {border-style:dashed;}
        p.solid {border-style:solid;}
        p.double {border-style:double;}
        p.groove {border-style:groove;}
        p.ridge {border-style:ridge;}
        p.inset {border-style:inset;}
        p.outset {border-style:outset;}
        p.hidden {border-style:hidden;}
        </style>
</head>
<body>
    <p class="none">无边框</p>
    <p class="dotted">虚线边框</p>
    <p class="dashed">虚线边框</p>
    <p class="solid">实线边框</p>
    <p class="double">双边框</p>
    <p class="groove"> 凹槽边框</p>
    <p class="ridge">垄状边框</p>
    <p class="inset">嵌入边框</p>
    <p class="outset">外凸边框</p>
    <p class="hidden">隐藏边框。</p>
</body>
</html>

效果图

x1shadouhui

关注

0
点赞
踩
0

收藏

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

css盒子模型本质上讲就是一个盒子：边框，外边距，内边距，内容.边框（border）border可以设置元素的边框。边框的宽度样式颜色。住：边框会影响盒子的实际大小。边框复合写法(border：solid实线 dashed虚线 dotted点线）border：1px soild/dashed/dotted #000000;内边距（padding）padding属性用于设置内边距，即边框与内容之间的距离。内间距简写padding-top（上内边距）padding-right（右
复制链接

扫一扫