第四次网页前端培训笔记（CSS常用属性和盒子模型）

学习网址：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

---

一、常用属性

1.背景

• 背景颜色

background-color

• 背景图片

background-image: url(img/xxx.jpeg);

• 是否重复

background-repeat

（如果不加命令，图片会重复铺满整个网页）

2.文本

• 字体颜色

color

• 对齐方式

text-align：

值	描述
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
juslify	实现两端丢弃文本的效果
center	把文本排列在中间

• 字节缩进

text-indent: 2em;

（em为相对值，1em就是文本中一个字的大小）

• 去除文本下划线

text-decoration: none;

（可以去除超链接里的下划线）

3.display属性

        display属性规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后没有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示

举个例子：

<hr />
<h2 style="display: block;">
	hello
</h2>

<hr />
<h2 style="display: none;">
			hello
		</h2>

(消失了~）

 4.浮动

float：的属性值有none、left、right

1.只有横向浮动，不并没有纵向浮动

2.会将元素的display属性变更为block，

3.浮动元素的后一个元素会围绕着浮动元素（典型运动是文字围绕图片）

4.浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都用float）

---

二、盒子模型

border、padding、margin三个属性构成了盒子模型。

1.border 

• 可同时设置边框的宽度、样式、颜色。

border：颜色，样式，宽度

• 使用boder-width/border-color单独设置。

border-width（宽度）

border-style（样式）

border-color（颜色）

• boder-style的属性

•  border-collapse

设置是否将表格边框折叠为单一边框。

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

<style>
    table{
	    border-collapse: collapse;
	    }
</style>

2.padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性；

<style>
    td{
        padding:15px;
    }
</style>

单独设置各边的内边距：padding-top、padding-left、padding-right、padding-bottom

注：通过padding属性设置元素内边距时，会使元素变形。若不影响格式效果，可以用margin属性设置元素外边距。

3.marign

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

<style>
    p.margin{
        margin:2px 4px 3px 4px;
    }
</style>

也可单独设置：margin-top、margin-left、margin-right、margin-bottom

auto：自动，可以理解为居中的意思。浏览器自动计算外边距

margin:auto auto ：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。

但是上下外边距在自动计算是不会生效的，而左右外边距会生效，表现为左右居中状态；

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距。