CSS快速入门（三）

字体相关调整
背景相关调整
- 控制背景平铺
- 调整背景图像的大小
边框属性
- 圆与圆角
盒模型
- 块级盒子（Block box）和内联盒子（Inline box）
- display属性
- 盒子模型
  - 盒模型的各个部分
  - 通俗理解

字体相关调整

注意：只有块儿级标签可以设置，行内标签无法设置

/*宽和高*/
height: 1000px;
width: 50px;
/*字体大小*/
font-size: 99px;
/*粗细*/
font-weight: bolder;
font-weight: lighter;
/*文本颜色（重点）*/
color:red;   /*第一种*/
color:#4e4e4e;   /*第二种*/
color:rgb(88,88,88)   /*第三种*/
rgba(88,88,88,0.2)   /*最后一个参数调整透明度(0-1)*/
/*文字对齐*/
text-align: center; /*居中展示，是对于标签所占多大，来居中，不是占浏览器中间*/
/*文字装饰（重点）*/
text-decoration: line-through; /*删除线*/
text-decoration: none;   /*主要用于去除a标签默认的下划线*/
/*首行缩进*/
text-indent: 32px;   /*默认文字大小是16px*/

案例：





Title



没有躺平的命，就站起来跑！



点我有你好看

HAMMERZE’S BLOGS
首行缩进，来看看吧！

背景相关调整

语法

background-color: orange;   /*背景颜色*/
background-image: url('url');   /*背景图片*/
background-repeat: no-repeat;   /*是否铺满*/
background-position:上下左右中;   /*图片位置*/
/*多个属性名前缀相同 那么可以简写*/
background:orange url('url') no-repeat;  /*一个个编写即可 不写就默认*/

控制背景平铺

background-repeat属性用于控制图像的平铺行为。可用的值是:

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

调整背景图像的大小

在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

你也可以使用关键字:

cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

在下面的例子中，我使用了上面例子中的大图，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。

试试下面：

改变用于修改背景大小的长度单位。
去掉长度单位，看看使用background-size: cover or background-size: contain会发生什么。
如果您的图像小于盒子，您可以更改background-repeat的值来重复图像。

案例

body{
height: 1000px;
width: 1000px;
background-color: orange;   /*背景颜色*/
background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.cddoRLFs2JrnF7_Iulob9AAAAA?w=258&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7');   /*背景图片*/
background-repeat: repeat-x;   /*水平铺满*/
background-position:200px,200px;   /*图片位置*/
/*background-position:center;   !*图片位置*!*/

        }

边框属性

语法：border:

border-left-color: red; 	/*左边框红色*/
border-left-style: solid;	/*左边直线边框*/
border-left-width: 3px;		/*宽度*/

/*多个属性有相同的前缀  一般都可以简写*/
border-left: 5px red  solid;   /*没有顺序*/
border-top:orange 10px dotted;
border-right: black dashed 5px;
border-bottom: deeppink 8px solid;

/*多个属性有相同的前缀  一般都可以简写*/
border: 5px red solid;  /*上下左右一致调整*/





This is a border

案例





Title




Borders

Try changing the borders.

圆与圆角

通过使用border-radius属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用；

圆形

/*高宽相等*/
div{
height: 100px;
width: 100px;
border: 5px solid red;
border-radius: 50%;
}

椭圆

/*高宽不相等*/
div{
height: 50px;
width: 100px;
border: 5px solid red;
border-radius: 50%;
}

圆角

.box {
border: 10px solid rebeccapurple;
border-radius: 1em;
border-top-right-radius: 10% 30%;
}


Borders

Try changing the borders.

盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键；

块级盒子（Block box）和内联盒子（Inline box）

在 CSS 中我们广泛地使用两种“盒子” —— 块级****盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为:

一个被定义成块级的（block）盒子会表现出以下行为:

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题(

等)和段落()默认情况下都是块级的盒子。
如果一个盒子对外显示为 `inline`，那么他的行为如下:

盒子不会产生换行。

`width` 和 `height` 属性将不起作用。

垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。

水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。

用做链接的元素、、以及都是默认处于 `inline` 状态的。
我们通过对盒子`display` 属性的设置，比如 `inline` 或者 `block` ，来控制盒子的外部显示类型；

display属性

将行内和块级标签强行改变

div {
display: inline;  /*行内*/
}
span {
display: block;  /*块级*/
display: none;
/*
隐藏标签 页面上看不见也不再占用页面位置
但是通过浏览器查找标签是可以看到的
django跨站请求伪造(钓鱼网站)
*/
}
p {
display: inline-block;
/*
具备块级标签可以修改长宽的特性
也具备行内标标签文本多大就占多大的特性
*/
}

以快递盒为例
1.快递盒与快递盒之间的距离			外边距(标签之间的距离)
2.快递盒的厚度							边框
3.内部物品到盒子的距离			内边距(文本内容到边框的距离)
4.物品本身的大小							 文本大小

body标签默认自带8px的外边距，可以去掉；

body {
margin: 0;
}

外边距：标签之间的距离

margin简写
margin:0px;  /*上下左右都一致*/
margin:10px 10px;  /*第一个控制上下 第二个控制左右*/
margin:20px 10px 20px;  /*上 左右 下*/
margin:10px 2px 3px 5px;  /*上 右 下 左*/

内边距：文本内容到边框的距离

padding简写
padding:0px;  /*上下左右都一致*/
padding:10px 10px;  /*第一个控制上下 第二个控制左右*/
padding:20px 10px 20px;  /*上 左右 下*/
padding:10px 2px 3px 5px;  /* 上 右 下 左*/

[背景与边框](背景与边框 - 学习 Web 开发 | MDN (mozilla.org))

[盒子模型](盒模型 - 学习 Web 开发 | MDN (mozilla.org))

调色器

CSS快速入门（三）的

CSS快速入门（三） admin 撰写于 2022年 01月 22 日

字体相关调整

背景相关调整

控制背景平铺

调整背景图像的大小

边框属性

Borders

圆与圆角

Borders

盒模型

块级盒子（Block box） 和 内联盒子（Inline box）

CSS快速入门（三）的

CSS快速入门（三）

字体相关调整

背景相关调整

控制背景平铺

调整背景图像的大小

边框属性

Borders

圆与圆角

Borders

盒模型

块级盒子（Block box） 和 内联盒子（Inline box）

CSS快速入门（三）的

那年今日

微信分享二维码

猜您想看

评论区(暂无评论)

这里空空如也，快来评论吧~

我要评论

CSS快速入门（三）
admin
撰写于 2022年 01月 22 日

块级盒子（Block box）和内联盒子（Inline box）

块级盒子（Block box）和内联盒子（Inline box）