提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

前端 --- CSS基础（二）

基础 前端 CSS
2023-03-14 23:00:12 时间

简写属性

border 属性是以下各个边框属性的简写属性：

  • border-width
  • border-style（必需）
  • border-color
p {
  border: 5px solid red;
}

属性图表

border简写属性，在一条声明中设置所有边框属性。
border-color简写属性，设置四条边框的颜色。
border-radius简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style简写属性，设置四条边框的样式。
border-width简写属性，设置四条边框的宽度。
border-bottom简写属性，在一条声明中设置所有下边框属性。
border-bottom-color设置下边框的颜色。
border-bottom-style设置下边框的样式。
border-bottom-width设置下边框的宽度。
border-left简写属性，在一条声明中设置所有左边框属性。
border-left-color设置左边框的颜色。
border-left-style设置左边框的样式。
border-left-width设置左边框的宽度。
border-right简写属性，在一条声明中设置所有右边框属性。
border-right-color设置右边框的颜色。
border-right-style设置右边框的样式。
border-right-width设置右边框的宽度。
border-top简写属性，在一条声明中设置所有上边框属性。
border-top-color设置上边框的颜色。
border-top-style设置上边框的样式。
border-top-width设置上边框的宽度。

外边距

常用属性

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

Margin - 单独的边

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

auto 值

可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

inherit 值

div {
  border: 1px solid red;
  margin-left: 100px;
}
# 使用 inherit 可以继承父元素的外边距属性
p.ex1 {
  margin-left: inherit;
}

简写属性

p {
  margin: 25px 50px 75px 100px;
}
# 上下 右 左
p {
  margin: 25px 50px 75px;
}
# 上下 左右
p {
  margin: 25px 50px;
}
# 上下左右
p {
  margin: 25px;
}

外边距合并概念

父子元素合并：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: pink;
        }
        
        .div {
            margin: 0 auto;
            margin-top: 10px;
            width: 450px;
            height: 450px;
            background: #aaa;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px 0px;
        }
    </style>
</head>
 
<body>
    <div class="div">
        <div class="div1"></div>
    </div>
</body>
 
</html>

运行会发现div1在div中的margin-top值为0px。

兄弟元素合并：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: pink;
        }
        
        .div {
            overflow: hidden;
            margin: 0 auto;
            margin-top: 10px;
            width: 450px;
            height: 600px;
            background: #aaa;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px 0px;
        }
        
        .div2 {
            width: 200px;
            background: green;
            margin: 30px 0px;
            height: 200px;
        }
    </style>
</head>
 
<body>
    <div class="div">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
 
</html>

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。

属性图表

属性描述
margin用于在一条声明中设置外边距属性的简写属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

常用属性

CSS 拥有用于为元素的每一侧指定内边距的属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以设置以下值：

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

**提示：**不允许出现负值。

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

简写属性

# 上 右 下 左
div {
  padding: 25px 50px 75px 100px;
}
# 上 右左 下
div {
  padding: 25px 50px 75px;
}
# 上下 右左
div {
  padding: 25px 50px;
}
# 上下左右
div {
  padding: 25px;
}

box-sizing 属性可以让元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

属性图表

属性描述
padding用于在一条声明中设置所有内边距属性的简写属性。
padding-bottom设置元素的下内边距。
padding-left设置元素的左内边距。
padding-right设置元素的右内边距。
padding-top设置元素的上内边距。

宽、高

height 和 width 属性用于设置元素的高度和宽度。

常用属性

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

**注意：**请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

max-width 属性用于设置元素的最大宽度。

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

max-width 属性的值将覆盖 width（宽度）

属性图表

height设置元素的高度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

相关文章