08. CSS属性设置

一、字体设置

1、font-weight：文字粗细

取值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，700等同于bord
inherit	继承父元素字体的粗细值

2、font-style：文字风格

取值	描述
normal	正常（默认值）
italic	倾斜

3、font-size：文字大小

fs一般设置成12~14px
# 注意：
1、通过font-size设置文字大小一定要带单位（px）
2、如果设置成inherit表示继承父元素字体的大小值

4、font-family：文字字体

font-family:"Microsoft Yahei","微软雅黑","Arial","sans-serif"
    
# 常见字体：
serif ：衬线字体
sans-serif ：非衬线字体
中文：宋体，微软雅黑，黑体

# 注意：
1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值
2、如果取值为中文，需要用单/双引号括起来

5、文字属性简写

font-weight: bolder;
font-style: italic;
font-size: 30px;
font-family: 'serif',"微软雅黑";

简写成：

font: boilder italic 30px "serif","微软雅黑";

6、color：文字颜色

取值	格式	描述
英文单词	color: green;	无法表示所有的颜色
rgb	color: rgb(255,0,255)；	从左到右依次是三原色（红绿蓝）的值，数字范围0~255（值越大越亮）
rgba	color: rgba(255,0,255,0.5)；	CSS3版本推出的，a代表的是透明度取值范围0~1（值越小越透明）
十六进制	color: #CC0000;	#CCDDEE，其中CC代表r，DD代表g，EE代表b（取值范围00~FF），只要十六进制数的每两位数字都是一样的，那么就可以简写成一位，如：#CDE等同于#CCDDEE

二、文本属性

1、text-align：规定元素中的文本的水平对齐方式

值	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐
justify	两端对齐

2、text-decoration：文本修饰

值	描述
none	（默认值）定义标准的文本，通常用来去掉a标签的下划线
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
inherit	继承父元素的text-decoration属性的值

3、text-indent：首行缩进

# 将段落的第一行缩进 32像素，(16px=1em)
p {
    text-indent: 32px;
}

4、line-height：行高

文本只有一行时，将行高设置成和height一样的高度就可以做到垂直方向的居中

三、背景属性

PS：没有宽高的标签，即便没有设置背景也无法显示

1、背景属性类别

属性	描述	值 (示例)
background-color	设置标签的背景颜色	background-color: rgba(255,0,0,0,5);
background-image	设置标签的背景图片	background-image: url(“image/2.jpg”); backround-image:url(“图片网址”);
background-size	设置背景图片的宽、高	background-size: 300px 300px; background-size: 100% 100%;
background-repeat	设置标签的背景图片的平铺方式	background-repeat: repeat; #默认值，在垂直和水平方向都重复 background-repeat: no-repeat; #不重复，背景图片将仅显示一次 background-repeat: repeat-x; #背景图片将在水平方向平铺 background-repeat: repeat-y; #背景图片将在垂直方向平铺
background-attachment	设置标签的背景图片在标签中固定或者随着页面滚动而滚动	background-attachment: scroll; #默认值，背景图片会随着滚动条的滚动而滚动 background-attachment: fixed; #不会随着滚动条的滚动而滚动
background-position	图片默认都是在盒子的左上角，使用该属性就可以控制背景图片的位置	1、具体的方位名词（水平方向：left，center，right 垂直方向：top，center，bottom 如果只设置了其中一个方向，那另一个方向就默认是center） 2、百分比（第一个值是水平位置，第二个是垂直位置，左上角是0% 0%，右上角是100% 100%，如果只设置一个，那另一个就是50%） 3、具体的像素（一定要加单位）如 30px 左上角是0 0，如果只设置了一个值，另一个就是50%，可以混用百分比和position值
inherit	继承父元素的background值	以上北京属性的值均可以设置成inherit

2、背景缩写：

body {
    background: red url("图片地址") no-repeat fixed center/300px 300px;
}

注意点：

# background-image
	注意：如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充
# background-repeat: repeat-y; 
	应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复 这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问 例如很多网站的导航条都是用这种手法制作的

3、背景图片与插入图片的区别

#1、背景图片只是一个装饰，不会占用位置
	插入图片会占用位置
#2、背景图片有定位属性，可以很方便地控制图片的位置
	而插入图片不可以
#3、插入图片语义比背景图片的语义要强（可以被搜索引擎收录）

4、rgba与opacity的区别

- rgba只能给背景设置透明度
- opacity可以改变整个标签的透明度

给背景图片设置透明度：

<style>
    .box1 {
        width: 300px;
        height: 300px;
        background-color: rgba(255,0,0,0.5);
    }
</style>

给整个标签设置透明度：

<style>
    .box1 {
        width: 300px;
        height: 300px;
        background-color: rgb(255,0,0);
        opacity: 0.65;
    }
</style>

5、精灵图

# 1、什么是精灵图：
	CSS精灵是一种图像合成技术
# 2、CSS精灵图的作用：
	一个电商网站可能有很多图片，比如有10张图片，这就要求客户端发10次请求给服务端
    但其实一次请求的带宽就足够容纳10张图片的大小
    精灵图的作用就是用来以较少的请求次数，来降低服务器处理的压力
# 3、如何使用CSS精灵图
	CSS的精灵图需要配合图片和背景定位来使用
# 4、强调：切图需要用到frameworks软件，可以知道每个图片具体宽多少个像素高多少个像素，该软件与ps属于一个家族
    在右面，图层-》位图-》出一把锁固定住图片
    然后左侧，有一个切片工具，框住图片

精灵图示例：

四、盒子模型

1、什么是CSS盒子模型？

# HTML文档中，每个元素都被比喻成矩形盒子，盒子模型通过四个边界来描述，margin（外边距），border（边框），padding（内填充），content（内容区域）
以相框来类比一下盒子模型：
  	- 外边框margin============》一个相框和另一个相框之间的距离
	- 边框border==============》相框
	- 内边距padding===========》相片（内容）与边框的距离
    - 宽度width/高度height=====》指定可以存放相片（内容）的区域

可以通过谷歌开发者工具查看盒子的各部分属性，如图：

2、盒子模型的宽度和高度

#1、内容的宽度和宽度
	通过标签的width和height属性设置
#2、元素/盒子模型的宽度和高度
	宽度=左边框+左内边距+width（内容的宽）+右内边框+右边框高度
    高度=上边框...
#3、元素/盒子模型空间的宽度和高度
	宽度=左外边距+左边框+左内边距+width（内容的宽）+右内边框+右边框高度+右外边距
    高度=上外边距...

3、CSS显示模式：块级、行内、行内块级

在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素
#1、HTML中容器级与文本级
	容器级标签：可以嵌套其他的所有标签
    div、h、ul>li、ol>li、d1>dt+dd
    
    文本级标签：只能嵌套文字、图片。超链接
    span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
	块级：块级元素会独占一行，所有的容器类型都是块级，文本标签中国的p标签也是块级
    div、h、ul、ol、dl、li、dt、dd还有p
    
    行内：行内元素不会独占一行，除了p以外的文本标签都是行内
    span、buis、strong、em、ins、del
    
#3、块级元素与行内元素的区别
	1、块级元素block
      独占一行
      可以设置宽高
    	-若没有设置宽度，那么默认和父元素一样高
        -若设置了宽高就按设置的来显示
        
    2、行内元素inline
      不会独占一行
      不可以设置宽高
    	盒子宽高默认和内容一样
        
    3、行内块级元素inline-block
    	不会独占一行
        可以设置宽高        

4、CSS显示模式转换

属性	描述	值
display	可以通过标签的display属性设置显示模式	none ：HTML文档中元素存在，但是在浏览器找那个不显示，一般用于配合JavaScript代码使用block块级 block：块级 inline：行内 inline-block：行内块级

display:"none"与visibility:hidden的区别：

visibility:hidden——可以隐藏某个元素，但是隐藏的元素仍需要占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但是还是会影响布局。
display:none--可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

5、div与span

布局都是用块级元素，而行内元素是控制内容显示的。
1、div标签
	一般用于配合css完成网页的基本布局
2、span
	一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色：
    	<p>青山不改<span>绿水长流</span></p>
3、div和span的区别;
	div一般用于排版，而span一般用于局部文字的样式
    ① 站在HTML的角度：div是一个块级元素，独占一行，而span是一个行内元素，不会独占一行
    ② 站在CSS角度：div是一个容器级标签，而span是一个文本级标签

五、盒子模型各部分详解

1、border边框

同时设置四条边的边框	border:边框的宽度 边框的样式 边框的颜色
分别设置四条边的边框	border-left: 边框的高度 边框的样式 边框的颜色 border-top: 边框的高度 边框的样式 边框的颜色 border-right: 边框的高度 边框的样式 边框的颜色 border-bottom: 边框的高度 边框的样式 边框的颜色
分别指定宽度、格式、颜色	1、连写：（分别设置四条边的边框） border-width: 上 右 下 左 border-style:上 右 下 左 border-color：上 右 下 左 2、注意点： ① 这三个属性是按照顺时针（上右下左）的顺序赋值的 ② 这三个属性的取值省略时的规律 省略右面，右面默认同左面 省略下面，下面默认和上面一样 只留一个，那其余的都和这个一样
了解非连写	border-left-width: ; border-left-style: ; border-left-color: #000; border-top-width: ; border-top-style: ; border-top-color: #000; border-right-width: ; border-right-style: ; border-right-color: #000; border-bottom-width: ; border-bottom-style: ; border-bottom-color: #000;
边框的样式	none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实线边框
border-radius	一、单独设置一个角：数值越大，弧度越大(四个角都能设置) border-top-left-radius: 20px; 二、缩写设置： border-radius: 20px; # 所有角设置相同 border-radius: 20px 10px 30px 25px; (上左、上右、下左、下右 ) 三、百分比设置： border-radius: 50%; 四、椭圆圆弧设置： border-radius: 25%/50%; （前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向）

2、padding内边距：边框与内容的距离就是内边距

非连写	padding-top：20px； padding-right：20px； padding-bottom：20px； padding-left：20px；
连写	padding: 上 右 下 左;
注意	1、给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。 如果不想改变实际大小，那就在用宽高减掉padding对应方向的值 2、padding是添加给父级的，改变的是父级包含的内容的位置 3、内边距也会有背景颜色

3、外边距

非连写	margin-top：20px； margin-right：20px； margin-bottom：20px； margin-left：20px；
连写	margin: 上 右 下 左
注意	1、外边距的那一部分是没有背景颜色的 2、外边距合并现象 在默认布局的水平方向上，默认两个盒子的外边距会叠加 在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的

4、内边距vs外边距

#1、 在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离
	应该首先考虑padding
    其次考虑margin
    
    margin本质上是用于控制兄弟直接关系的，padding本质上才是控制父子关系的
    
#2、如果两个盒子是嵌套关系，那么设置了里面的一个盒子顶部的外边距，那么外面的一个盒子也会被顶下来
	如果外面的盒子不想顶下来，那么可以给外面的盒子设置一个边框属性

5、盒子居中与内容居中

5.1 内容居中：

1、让单行内容在盒子中水平并垂直居中
	水平居中：
    text-align: center;
    垂直居中：
    text-height:500px;
2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）
	让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中。
    将padding-top与padding-bottom设置成一行的，等于（height-line-height*行数）/2

5.2 盒子居中

text-align center;  只能让盒子中存储的文字、图片水平居中
margin: 0 auto;     可以让盒子相对于父元素水平居中

6、防止文字溢出Word-break: break-all;

word-break 属性规定自动换行的处理方法

值	描述
normal	用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或者连字符处换行
break-word	效果是word-break: normal; 和overflow-wrap: anywhere的和，不论overflow-wrap的值是多少

与word-break相比，overflow-wrap仅在无法将整个单词放在自己行而不会溢出的情况下才会产生中断

**注：**word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法

7、清除默认边距

#1、为什么要清除默认边距（外边距和内边距）
	浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
    编写代码之前第一件事就是清空默认的边距
 
#2、如何清空默认的边距
	* {
        margin: 0px;
        padding: 0px;
    }
    
#3、注意点：
	通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好
    拷贝代码：				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}