CSS--边框、内外边距、元素宽高、清空默认样式、行高和字号

最新推荐文章于 2023-12-08 08:46:01 发布

jiaody111

最新推荐文章于 2023-12-08 08:46:01 发布

阅读量2.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42139212/article/details/100577577

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

四个方向：上右下左

边框border：

连写设置边框 border: 宽度样式颜色;
如 border: 1px solid #000;
宽度可省略，颜色可省略（默认黑色），样式不可省略
设置边框的样式：border-style
取值：solid（实线）none（无边框）dashed（虚线）dotted（点线）

四个边框的交界处是用斜线分割开的：

            border-width:25px;
            border-style:solid;
            border-color: red  blue black green;

当容器的宽高设置为0时：

<style>
        .box6{
            width: 0px;
            height: 0px;
            border-width:25px;
            border-style:solid;
            border-color: red  blue black green;
        }
</style>
<body>
<div class="box6"></div>
</body>

在这里插入图片描述

将下边框设置为none,左右边框的颜色设置为白色：
呈现倒三角的形状：

        .box6{
            width: 0px;
            height: 0px;
            border-width:25px;
            border-style:solid;
            border-color: red  white;
            border-bottom:none;
        }

在这里插入图片描述

内边距padding

内边距：内容和边框之间的距离。元素的背景颜色会延伸到内边距。
/*
盒子的大小由内容区内边距和边框共同决定
子元素的内容区覆盖了父元素的width和height，但不会覆盖父元素的padding
*/

外边距

外边距就是标签和标签之间的距离。内容区的背景颜色不会延伸到外边距。

margin-top 和margin-left 设置上外边距 和左外边距 影响当前盒子的位置
margin-bottom 和 margin-right 设置下外边距和 右外边距 影响其他盒子的位置
如果margin的值是负值 会向相反的方向移动
margin设置为auto 一般只设置水平方向的margin
如果只指定左外边距或者右外边距为auto 则会将外边距设置为最大值
如果margin-left和margin-right同时设置为auto 则将左右两侧的外边距设置为相同的值 该元素会在父元素中居中显示
垂直方向如果设置margin为auto,则垂直方向外边距是0

外边距合并

水平方向，相邻元素的外边距不会合并，直接相加。
垂直方向上，相邻元素的外边距会合并，不会相加，而是取外边距的最大值。

嵌套关系中外边距的问题

给父盒子中的子盒子设置上外边距，如果父盒子没有设置border，则父盒子会和子盒子一起下移。
如果不想让父盒子跟子盒子一起下移，要给父盒子设置边框。
控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
margin本质上是用于控制兄弟关系之间的间隙的

清空默认样式

*{
            margin: 0;
            padding: 0;
}

通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

内容的宽高：

通过width和height设置

元素的宽高：

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
= border-left-width + padding-left + width + padding-right + border-right-width
高度 = border-top-width + padding-top + height + padding-bottom + border-botton-width
1.增加了border和padding之后，元素的宽高也会发生变化
2.增加了border和padding之后还想保持元素的宽高，必须减去内容的宽高

元素的空间的宽高

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度同理可证

box-sizing设置元素宽高

问题：给元素添加border或者padding，会影响元素的宽高，可能导致布局混乱。
box-sizing:
取值：

content-box（默认）元素的宽高 = 边框 + 内边距 + 内容宽高
如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
比如：.box {width: 350px; border: 10px solid black;}在浏览器中的渲染的实际宽度将是 370px。
border-box 元素的宽高 = width/height的宽高
如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。

文字和图片居中

text-align: center

注：text-align 只在块元素中使用，直接给内联元素使用不生效。
拥有该属性的块元素中，所有内联元素和块元素中的所有文本和图片拥有该属性。
子块元素中因为继承父块元素的属性，其文本和图片也会生效。

盒子居中

margin:0 auto;//只能设置盒子在水平方向居中，垂直方向只能通过像素设置。

行高和字号

文字在行高中默认是垂直居中的。
要想一行文字在盒子中垂直居中，设置这行文字的"行高等于元素的高line-height=height"。
如果一个盒子中有多行文字, 不能使用设置行高等于元素的高度来实现让文字垂直居中，只能通过设置padding来让文字居中。