CSS样式-盒模型样式

程序员浩浩

于 2022-08-19 15:51:45 发布

阅读量130

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_52655964/article/details/126426459

版权

1. 宽度和高度

在我们的网页上，很多元素都有自己的宽高用来限制内部元素的范围。

width 宽度
height 高度

选择器 {
  width: 值;
  height: 值;
}

宽度和高度只能给有块元素特性的元素设置。给行内元素设置时无效。

div {
  width: 100px;
  height: 100px;
  background: darkgoldenrod;
}

span {
  background: darkcyan;
  /* 无效的 */
  width: 100px; 
  height: 100px;
}

宽高设置的可以是固定值，那么能不能是百分比呢？能用百分比，在哪个元素中，这个元素的百分比就相对于哪个元素计算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box2 {
      width: 50%;
      height: 100px;
      background: red;
    }

    .box3 {
      width: 50%;
      height: 50px;
      background: darkmagenta;
    }
  </style>
</head>
<body>
  <div class="box2">
    <div class="box3"></div>
  </div>
</body>
</html>

支持em单位，但是用的频率不高。

如果文字本身大小为12px，设置宽度为10em，则最终大小为120px。

1.1. 高度设置百分比会有什么问题

在网页上，给元素设置100%沾满页面，直接写是无法实现的，需要给html和body都设置为宽度百分百

<body>
  <div class="box"></div>
</body>

body, html, .box {
  height: 100%
}

1.2. 最大/最小宽度/高度

如果我们定义了宽高，那么这个元素就一定是那么宽那么高。

2. 边框 border

边框指的是围绕我们的元素四周的线。利用border属性进行设置。可以同时给四个边进行边框的设置，同时也可以单独的定义每个方向上的边框。

选择器 {
  border: 边框宽度 边框样式 颜色;
}

添加边框后，默认情况，边框会在原有宽高基础上往外扩。元素的总的宽高，就是实际设置宽高 + boder

如果想要去除边框，我们可以使用属性none

选择器 {
  border: none;
}

2.1. 边框属性

2.1.1. 边框宽度

通过设置px等单位，一般都是去设置px。来定义边框宽度

我们有专门的属性用来单独定义边框border-width

选择器 {
  border-width: 1px;
}

2.1.2. 边框样式

solid 实线
dashed 虚线
dotted 点线

通过设置border-style可以定义边框样式

选择器 {
  border-style: solid;
}

2.1.3. 颜色

可以通过填写对应的色值设置颜色。

通过定义border-color可以实现颜色单独定义。

一个特殊的颜色

透明，transparent 是一个关键字，在使用颜色的地方用来表示颜色的。

选择器 {
  border-color: transparent;
}

2.2. 边框方向

四边形有上右下左四个方向。

border-top
border-right
border-bottom
border-left

这些属性中包含对应的三个值，分别是宽度、样式、颜色

和属性拼接后，我们会产生新的12个属性 border-方向-属性名

例如：

border-top-color
border-bottom-width
border-left-style

注意！！！！未来更多的我们会使用border属性和单独的方向属性。

2.3. 实现三角形

.box {
  width: 0;
  border: 10px solid transparent;
  border-right-color: red;
}

扩展属性

黑色边框线

浏览器需要让用户知道，当前的表单元素焦点在哪。所以获取焦点的表单元素会有一个黑色的边框。注意！！！这个边框不是border

这个边框叫outline这个东西不占空间。因为会影响到我们的美观度，所以要去除。

input, button, select, textarea {
  outline: none;  
}

圆角

在网页上，很多地方都会有圆角，因为好看。元素有四个角，分别为上左、上右、下右、下左。

一般定义圆角都是四个叫都定义，如果都定义成相同的圆角，则使用一个值即可。

选择器 {
  border-radius: 值;
}

本质上，圆角的值指的就是对应的⚪的半径。在蓝湖中，我们只需要选择对应的元素，就会提示相关的圆角值。

圆角可以写四个值。四个值就代表四个角方向，顺序是上左、上右、下右、下左。

选择器 {
  border-radius: 10px 0 0 10px;
}

正圆

正圆的前提需要是一个正方形，直接设置圆角值为50%时会得到一个正圆。

如果时一个长方形，设置了值为50%，则会得到椭圆

胶囊形，短边占1半。

对齐

这里的对齐只表示行内元素对齐的问题。

因为默认情况下，是基于基线（baseline）对齐，导致视觉上不齐。

如果我们想要让文字对齐，那么就需要给所有参与对齐元素添加vertical-align属性。

baseline 默认值基于基线对齐
top 上对齐
bottom 下对齐
middle 居中最常用

一般我们会用到这个属性，大部分情况都是在图标+文字的布局中使用。因为现在有flex，所以这个属性用的没有那么的多了。

display

行内元素和块元素可以随意的转换。

inline
block
inline-block

inline 横向排列，无法设置宽高

block 独占一行，可以设置宽高

inline-block 既能设置宽高，又能横向排列