Web前端基础笔记：第七章 CSS-盒模型

最新推荐文章于 2024-05-02 13:48:13 发布

Ucoder喵

最新推荐文章于 2024-05-02 13:48:13 发布

阅读量311

点赞数

分类专栏： Web 前端基础文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_44980720/article/details/109570021

版权

Web 前端基础专栏收录该内容

9 篇文章

订阅专栏

7.1 盒模型-content

要画一个矩形的格子，要使用一个div标签。div标签就是一个干净透彻的矩形，没有margin、padding、border、content这几个属性。

content

div标签写出来的时候是没有高度的，但是有宽度，宽度默认和副标签的宽度是一样的。
weight/height

要画出一个矩形首先要设置矩形的宽高，矩形的宽高对应两个CSS属性width，height，它们的值是数字，单位是px

还要给矩形填充颜色才可以看到：如background-color：purple

此时我们就可以考到要学习的盒模型cnotent
百分百尺寸

设置块元素的宽高，除了px形式还有%形式，比如说：

7.2 盒模型-padding

padding是盒模型中的内边距
在这里插入图片描述

1. padding分开写

.box{
        padding:20px;
    }
    上面代码等等价于
.box{
        padding-top:20px;
        padding-right:20px;
        padding-bottom:20px;
        padding-left:20px;
    }

2. padding简写

上下一样，左右一样

上下一样，写一个即可，左右一样，写一个即可，最后变成：

div{
	padding:20px 30px;
}

上下一样，左右不一样

div{
	padding:20px 30px 20px 10px;
}

上下不一样，左右一样

div{
	padding:30px 10px 20px;
}

3. box-sizing

box-sizing规定了如何计算一个元素的总宽度和高度，它有两个值content-box，border-box，默认是content-box

content-box尺寸计算公式：

width = 内容的宽度
height = 内容的高度
border-box尺寸计算公式：

width = border + padding + 内容宽度
height = border +padding + 内容高度

border-box的width包含了content、padding、border，所以设置padding、border后不会溢出父元素的content

7.3 盒模型-border

边框就是包裹在padding外面的一层线，说到线，肯定会有粗细、颜色。

给矩形设置边框线

.box{
	width:20px;
	height:30px;
	border-width:2px;
	border-color:blue;
	border-style:solid;
}

border-width:边框的粗细，单位是px

border-color:边框的颜色，颜色值和我们之间学的文字、背景的颜色表示方法是一样的

border-style:边框的线形，soild为实线，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-right: 10px dashed purple;
        }

利用层叠性设置边框

在现实应用中，我们可能会遇到这样一种情况，要设置一个矩形，矩形的左、右、上的边框样式是相同的，但是下边框的样式是不一样的。

.box {
  /*设置矩形的宽*/
  width: 300px;
  /*设置矩形的高*/
  height: 300px;
  /*设置矩形的背景颜色*/
  background-color: white;
  /*设置矩形的边框*/
  /*统一设置矩形的所有边框样式*/
  border: 2px solid black;
  /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/
  border-bottom: 5px solid orange;
}

无边框

border-bottom:none;

圆角

圆角的统一设置

border-radius:12px;

圆角分开设置

.box{
     width: 200px;
     height: 200px;
     background-color: violet;
     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轴上移动，向下为正
阴影模糊半径：就是边线的清晰度
阴影扩散半径：就是向外伸展

7.4 盒模型-margin

本节我们学的是盒模型中的margin——外边距。所谓外边距及时矩形与矩形之间的距离。

两个盒子之间的margin计算
如果我们要设置两个盒子之间的垂直距离，一般不会写两个margin。比如要设置两个盒子之间的垂直距离为50px

不推荐

.box1{
    margin-bottom: 20px;
}
.box2{
    margin-top: 50px;
}

.box2{
    margin-top: 50px;
}

7.5 盒模型-display:block/none

display:block

块元素性质一：独占一行
块元素性质二：可以设置宽高

行内元素与块元素之间的转换
块元素默认的display属性值是block
行内元素默认的display属性值是inline

行内元素转块元素用display：block
块元素转行内元素用display：inline
display:none;

当给标签设置了设个属性值，标签就会消失，在网页中最常见的就是用none、block来控制元素的显示和隐藏

7.6 盒模型-display:inline/inline-block

inline

1.行内元素不能设置宽高
2.行内元素可以设置padding
3.行内元素可以设置左右margin但是不能设置上下margin
inline-block

我们将div的display属性从block切换成inlone-block之后，我们希望得到两个连接在一起的块状元素，但结果两者中间有空白

解决空白的三种方法：
1.去除回车：将div写在同一行
2.给父元素添加word-spacing属性
word-spacing就是单词和单词之间的距离，这里将这个距离写成负值就可以，值尽量小，一般小于-20px
3.给父元素设置font-size:0px;