CSS基础学习

一、边框属性

1.什么是边框？

边框就是环绕在标签宽度和高度周围的线条

2.如何设置边框属性、

格式：
2.1 同时设置四条边的边框
border: 边框的宽度边框的样式边框的颜色;
注意：颜色属性可以省略，默认是黑色
样式不能省略，宽度可以省略
2.2 分别设置四条边的边框
border-top: 边框的宽度边框的样式边框的颜色;
border-right: 边框的宽度边框的样式边框的颜色;
border-bottom: 边框的宽度边框的样式边框的颜色;
border-left: 边框的宽度边框的样式边框的颜色;
2.3 分别设置四条边的边框
border-width: 上右下左
border-style: 上右下左
border-color: 上右下左

二、内边距属性：

1.什么是内边距?

即边框和内容之间的距离

2.如何设置内边距、

格式：
2.1 分别设置：
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2统一设置
padding: 上右下左;
注意：（1）给标签设置内边距后，标签占有的宽度会发生变化
（2）内边距也会有背景颜色

三、外边距属性：

1.什么是外边距属性？

即标签和标签之间的距离

2.如何设置外边距

格式：
2.1 非连写：
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2 连写：
margin: 上右下左;
注：外边距的那一部分是没有背景颜色的
2.3 外边距合并（塌陷）现象：
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，外边距会遵从较大的那一个

四、盒子模型：

1.什么是CSS盒子模型？

一种形象的比喻
注：（1）在HTML中所有的标签都可以设置宽度/高度
内边距
边框
外边距

2.盒子模型的宽度和高度：

2.1内容的宽度和高度：
就是通过标签的width/height属性设置的宽度和高度
2.2 元素的宽度和高度：
宽度=左边框+左内边距+width+右内边距+右边框+右外边距
高度同理可证
2.3 元素空间的宽度和高度：
宽度=左边框+左内边距+width+右内边距+右边框+右外边距
高度同理可证

3.盒子box-sizing属性：

CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变
box-sizing属性是如何保证增加padding和border之后盒子元素的宽度和高度不变？
*增加padding和border之后要想保证盒子元素的宽高不变，那么就必须减去一部分内容的宽度和高度
box-sizing的取值：

content-box:元素的宽高=边框+内边距+内容宽高
border-box:元素的宽高=width属性

4.盒子居中和内容居中：

text-align:center;和margin:0 auto;的区别：
text-align:center; 设置盒子中的内容（文字、图片等）水平居中
margin:0 auto; 让盒子水平居中

5. 清空默认边距：

为什么要清空默认边距（外边距和内边距）？
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中，编写代码之前第一件事就是清空默认边距
如何清空默认边距？
(1)

<style>
	*{
     
     
		margin:0;
		padding:0;
	}
	<!--利用通配符选择器清空内外边距-->
</style>

注意：通配符选择器会遍历当前页面中所有标签，所以性能不好
(2)直接引用写好的代码

<style>
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
     
     
					margin:0;padding:0
	}
</style>

第一步

第二步

第三步

6.行高和字号：

什么是行高？
在CSS中所有的行都有自己的行高
如何设置行高？
可以通过line-height属性设置行高

<style>
	div{
     
     
			width:100px;
			height:80px;
			border:1px solid #000;
			line-height:80px;
	}
</style>

注意：（1）行高和盒子的高度不是同一个概念
（2）若不单独设置盒子的高度，默认情况下盒子的高度等于所有默认行高之和
（3）默认情况下文字在行高中是垂直居中的（简而言之，要像一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可）
（4）在企业开发中如果一个盒子中有多行文字，那么我们就不能使用设置行高等于盒子高度来实现文字垂直居中，只能通过设置padding来让文字居中

7.文字界面：

基本步骤如下：

清空所有的边距
从外向内，从上至下的编写网页

CSS学习笔记（4）【边框属性、内外边距、盒子模型问题】