CSS基础学习（2）

爱学习的小超人

发布于 2022-11-14 16:14:27

6460

发布于 2022-11-14 16:14:27

文章被收录于专栏：SuperXCRMySQL

CSS-盒模型

1-1 盒模型-content

设置一个矩形用到新标签—div 标签

content

<ul>
  <li>
    <div></div>
  </li>
</ul>

div 的宽度为 1661px 高度为 0px

div默认标签没有高度，宽度与父标签的宽度一样

上面代码中，li为div的父标签

这里所说的宽度不是肉眼可见的宽度，是width属性设置的宽度

width/heigth

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

.box {
  width: 200px;
  height: 100px;
}

div矩形默认是无色的需要设置背景颜色 bancground-color

百分百尺寸

宽高除了px，还有%形式

<div class="father">
  <div class="son"></div>
</div>

.father {
  width: 200px;
  height: 80px;
  background-color: #5b6dcd;
}
.son {
  width: 60%;
  height: 20%;
  background-color: #fec03e;
}

注意

% 是相对于父元素说的就是子元素的宽度是父元素的百分之几

1-2 盒模型–padding

padding 作用改变内边距

.box {
    padding: 20px;
}

等同于

.box {
    padding-top: 20px;/*上内边距*/
	padding-right:20px; /*右内边距*/ 
	padding-bottom: 20px; /*下内边距*/
	padding-left: 20px; /*左内边距*/
}

此外上述代码还可以简述为

div{
	padding: 20px 20px 20px 20px; /*代表 上、右、下、左*/
}

如果上下一样，左右一样，可以写成

div{ 
	padding: 20px 30px;
}

box-sizing

box-sizing规定了如何计算一个元素的总宽度和高度

content-box : width = 内容的宽度 height = 内容的高度

border-box : width = border + padding + 内容的宽度height = border + padding + 内容高度

<div class="father">
    <div class="son"></div>
</div>

.father{
    width:200px;
    height: 100px;
    background-color: #5C70CA; 
}

.son{
    box-sizing: content-box;
    width: 100%;
    height: 40px;
    background-color:#FEC03E;
}

注意在赋予子图100%width时，再去设置padding，会造成边框溢出

但是将 box-sizing: conten-box 改为 box-sizing: border-box,不会溢出

border-box 的 width包含了content、padding、border

1-3 盒模型–border

给矩形设置边框线

border-width 边框粗细单位：px

border-color 边框颜色

border-style 边框的线性 solid为实线 dashed为虚线

边框简写

.box {
  border: 2px solid blue;
}

分别设置边框

.box {
  /* 添加顶部border */
  border-top: 1px solid black;
  /*添加右侧border*/
  border-right: 3px solid orange;
  /*添加底部border*/
  border-bottom: 5px dashed pink;
  /*添加左侧border*/
  border-left: 10px dashed purple;
}

利用层叠性设置边框

.box {
    border: 2px solid black;
    border-bottom: 5px solid orange;
}

无边框

.box {
    border-bottom: none;
}

圆角

.box {
    border-radius: 12px;
}

要想看到可以通过给边框颜色或者背景颜色看到

圆角分开设置

.box {
      border-top-left-radius: 5px;
 	  border-top-right-radius: 10px;
	  border-bottom-left-radius: 20px;
 	  border-bottom-right-radius: 15px;
}

阴影

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #c4c4c4;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

注解：

x偏移量：在x轴上移动，向右为正
y偏移量：在y轴上移动，向下为正
阴影模糊半径：就是边线的清晰度
阴影扩散半径：就是向外伸展
阴影颜色：就是矩形下面那个矩形的背景颜色

1-4 盒模型–margin

margin 外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: #D5E8D4;
            border: 1px solid #82B366;
        }

        .box{
          background-color: #F5F5F5;
          border: 1px solid #FF0818;
          margin-top: 20px;
          margin-bottom: 20px;
        }
    </style>
</head>

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

</html>

水平距离

为左边盒子的右margin ，右边盒子的左margin 相加

垂直距离

为上下两个盒子的最大值

所以一般设置垂直距离

1-5 盒模型–display:block/none

块状元素性质一独占一行

块状元素性质二 —可以设置宽高

行内元素和块状元素之间的转换

块状元素默认的 display 属性的值是 block
行内元素默认的 display 属性的值是 inline

行内元素转为块状元素

<span class="demo"> 这是一个span标签 </span>

.demo {
  /*将span标签转换成块元素*/
  display: block;
  width: 300px;
  height: 100px;
  background-color: #fff2cc;
}

块状元素转行内元素

<div class="demo">这是一个span标签</div>

.demo {
  /*将div标签转换成行内元素*/
  display: inline;
  /* 转换成行内元素以后，宽、高的设置就会失效，即使我们仍然设置了它们 */
  width: 300px;
  height: 100px;
  /* 背景颜色也不会是300*100范围，而是文字有多少面积，背景颜色就又多少面积 */
  background-color: #fff2cc;
}

diaplay: none

这个属性值可以使标签消失

1-6 盒模型–display:inline/inline-block

inline

行内元素不能设置宽，高

行内元素可以设置 padding

<a href="#">超链接</a>

a {
  background-color: #fff2cc;
  padding: 20px;
}

这样设置虽然和块元素相似，但有区别

如这样设置可以覆盖块元素

行内元素可以设置左右 margin ，但不可以设置上下 margin

inline-block

作用：可以使块元素显示在同一行内

但使两者之间会存在间隙

处理方法

去除回车

<!-- 将div标签写在一行 -->
<div class="box1"></div><div class="box2"></div>

给父元素添加word-spacing 属性

<div class="father">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.father {
  word-spacing: -50px;
}

.box1 {
  width: 200px;
  height: 50px;
  display: inline-block;
  background-color: #fff2cc;
}

.box2 {
  width: 200px;
  height: 50px;
  display: inline-block;
  background-color: #b0e3e6;
}

给父元素设置 font-size: 0px;

.father {
  font-size: 0px;
}

回车相当于一个字符但当有文字时不可以用

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除

c++

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

c++

登录后参与评论

0 条评论

热度