Web前端学习：CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】

目录

一、常用样式

1、布局常用样式 

 2、文本常用样式

二、常用属性 

1、display属性 

2、overflow属性

 三、外边距和内边距

1、padding内边距 

 2、margin外边距

---

一、常用样式

CSS中有两种常用的样式，分别为：

• 布局常用样式
• 文本常用样式 

以下将对这两种样式进行演示和说明

1、布局常用样式 

• width设置元素(标签)的宽度，如: width:100px；
• height 设置元素(标签)的高度，如: height:200px；
• background 设置元素背景色或者背景图片，如 : background:gold；设置元素背景色为金色
• border设置元素四周的边框，如: border:1px solid black；设置元素四周边框是1像素宽的黑色实线 （solid是实线条，dashed是虚线）

代码演示： 

• 例：设置一个四周边框是1像素宽的黑色虚线

​

•  运行结果

​

 2、文本常用样式

• color 设置文字的颜色，如: color:red;
• font-size 设置文字的大小，如: font-size:12px;
• font-family 设置文字的字体，如 : font-family：'微软雅黑'；为了避免中文字不兼容，一般写成: font-family:'Microsoft Yahei';
• font-weight 设置文字是否加粗，如: font-weight:bold;设置加粗 font-weight:normal 设置不加粗
• line-height 设置文字的行高，如:line-height:24px;表示文字高度加上文字上下的间距是24px﹐也就是每一行占有的高度是24px
• text-decoration设置文字的下划线，如: text-decoration:none;将文字下划线去掉 

---

二、常用属性 

1、display属性 

display属性是用来设置元素的类型及隐藏的，常用的属性有:

• none元素隐藏且不占位置
• block元素以块元素显示 （默认）

 代码演示：

• 将第二个标签的文本值给隐藏起来 

​

•  隐藏前和隐藏后的运行结果比较

​  ​  

2、overflow属性

overflow的设置项∶

• visible 默认值内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto   如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 

 代码演示：

•  先设置一个长方体边框

​ ​

•  在这个长方体里写入比较长的数据，这时我们会看到数据溢出的现象

​​

•  这时利用overflow中的hidden设置项，发现内容被修剪，其余内容不可见

 ​

 ​

•  但是，这并不是我们想要达到的效果，我们希望能够在长方体中看到所有数据
• 于是我们把hidden换成scroll，看其效果如何

​

​

• 再把scroll换成auto，看其效果 ，因为是水平方向上有数据溢出，所以就只出现水平滚动条

​

 ​

---

 三、外边距和内边距

1、padding内边距 

padding:定义元素边框与元素内容之间的空白区域。
padding-top、padding-bottom、padding-right、padding-left

• padding:25px 50px 75px 100px;        上、右、下、左
• padding:25px 50px 75px;        上、左右、下
• padding:25px 50px;        上下、左右
• padding:25px;         上下左右 

 代码演示：

• 先设置一个正方体边框 ，并在边框内写入内容

 ​​

•  查看内边距，鼠标右键，点击检查，会看到右下方有一个正方体，可以把这个正方体看成是一个盒子，这个盒子中可以看到内边距的内容。

 ​

•  设置内边距：padding:25px 50px 75px;        上、左右、下

​

​​

 2、margin外边距

 margin:设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

margin-top、margin-bottom、margin-right、margin-left

• margin:25px 50px 75px 100px;        上、右、下、左
• margin:25px50px 75px;        上、左右、下
• margin:25px 50px;        上下、左右
• margin:25px;        上下左右

margin的用法和padding相同，可参照以上步骤使用。