css样式表属性

对于一个元素，浏览器本身是有一套默认的样式表的，如果服务器端没有指定，那么就是使用浏览器的样式设置；如果指定了，那么就使用服务器端指定的样式。浏览器的样式信息如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i7M3kMnI-1692416019900)(images/browserDefaultCSS.png)]

color

用于设置元素内部文字的颜色，颜色的设置方式：

• 预设值：一些定义好的单词，每个单词都表征一种颜色。
• 三原色：光学三原色（红、绿、蓝），每个原色可以使用0 - 255之间的数字来表示，一共三个原色，称之为色值。

  rgb表示法：
  rgb(0, 255, 0, 0.5) -- 顺序为红、绿、蓝、透明度，红绿蓝数字为0 - 255，透明度为0 - 1(可以为小数)hex表示法
  #000000            -- 顺序红绿蓝，用16进制表示数字0 - 255，这种好像不能表示透明度。
  淘宝红：#FF4400，当红绿蓝三个数的16进制十位与个位数都相同，那么可以进行缩写：#F40
  黑色：#000000，#000
  白色：#ff0000，#f00
  

background-color

背景颜色，用于设置元素的背景色

font-size

元素内部文字的大小；如果一个元素没有字体大小，那么他就继承父元素的字体大小；如果没有父元素(html)，那么就使用基准字号，基准字号就是浏览器中设置的字号。

• px：像素，简单的理解为文字的高度占多少个像素。
• em：相对单位，相对于父元素的字体大小，也就是em值 * 父元素字体大小；他最终显示会计算为像素进行显示。

font-weight

文字粗细程度，可以取值数字，可以取值预设值。
这个数值不能乱设，和具体字体有关，如果设置不当就无效果，一般就是使用预设值normal和bold：

<p style="font-weight: normal">设置font-weight: normal</p>
<p style="font-weight: bold">设置font-weight: bold</p>

strong标签默认为粗体；

font-family

文字字体，font-family使用如下：

<p style="font-family: 华文楷体">设置font-family: 华文楷体</p>
<p style="font-family: 楷体">设置font-family: 楷体</p>

设置文字字体要正常显示要注意设置的字体要存在目标主机上，并且对应字体中存在响应的字符，不然浏览器忽略字体设置；
可以设置多个字体，这样浏览器会逐个检测字体是否存在，并且字符是否存在该字体中，如果存在就进行显示，否则跳过：

<p style="font-family: Consolas,华文楷体,sans-serif">设置font-family: Consolas,华文楷体,sans-serif</p>
<p style="font-family: AR PL UKai HK,Consolas,华文楷体,sans-serif">设置font-family: AR PL UKai HK,Consolas,华文楷体,sans-serif</p>
<p style="font-family: 'AR PL UKai HK',Consolas,华文楷体,sans-serif">设置font-family: 'AR PL UKai HK',Consolas,华文楷体,sans-serif</p>
<p style="font-family: 华文楷体">设置font-family: 华文楷体</p>
<p style="font-family: 楷体">设置font-family: 楷体</p>

最后加上一个sans-serif非衬线字体或者serif衬线字体；他们是字体的两个大类，并不是表示某个具体的字体，浏览器遇到该字体会自动选择该类字体中的一个字体进行显示。

font-style

字体样式，通常用于设置字体倾斜:

<p style="font-style: italic">设置font-style: italic</p>
<p style="font-style: normal">设置font-style: normal</p>

i、em元素默认为斜体;

text-decoration

文本修饰，给文本加线

<p style="text-decoration: line-through">设置text-decoration: line-through</p>
<p style="text-decoration: overline">设置text-decoration: overline</p>
<p style="text-decoration: underline">设置text-decoration: underline</p>
<p><a href="" style="text-decoration: none">链接去掉下划线</a></p>
<p><a href="">链接保留下划线</a></p>

a元素默认加下划线，del元素、s元素默认是line-through;

text-indent

indent – 缩进，text-indent表示文本缩进，也就是段落中第一行的缩进方式。

<p style="text-indent: 2em">链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线</p>

text-indent设置距离，可以为px，也可以为em，rem，一般使用2em，即首行缩进2个字符。

line-height(line-height的概念)

<p style="line-height: 2em">链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线链接保留下划线</p>

<p style="text-align: center; line-height: 5em; height: 5em; background: #008c8c; color: white;">链接保留下划线链接保留下划线链接保留下划线链接保留</p>

p{line-height: 1.5em;}
p{line-height: 1.5;}
p{line-height: 150%;}

.parent1{font-size:14px;line-height: 1.5em;background: #999;padding:10px
}
.parent2{font-size:14px;line-height: 1.5;background: #999;padding:10px
}
.parent3{font-size:14px;line-height: 150%;background: #999;padding:10px
}
.child{font-size:26px;background: #ccc;
}

width、height

box盒子模型中的内容区宽度以及高度的设置，显示的时候整个元素占据的大小还会有内边距、边框和外边距这几个属性的参与。
如果文本数据内容数量在font-size的影响下超过了width、height设置的大小，那么整体上的排版依旧按照width、height进行排版，而文字输出也会进行输出，此时就是文字会越过设置的大小，如果此时对应的位置有排版内容，那就会出现文字覆盖的情况。

letter-spacing

文字间隙，就是文本水平方向的间隔

text-align

元素内部内容水平方向的排列方式，默认靠左排列；
这个和line-height一样，也会被子元素进行继承。

• justify 除最后一行外，分散对齐，最后一行就是左对齐，也就是两端对齐；
  每一行都分散对齐可以使用::after添加一个width为100%的行块盒

direction

开始和结束时相对的，该属性设置的就是开始到结束的方向

writing-mode

font-variant

variant – 变体，可以设置字体变体：

border-radius

边框弧度

opacity

设置透明度，设置整个元素的透明度，取值范围0 ~ 1

cursor

设置鼠标样式，默认auto，让浏览器决定使用什么样式。
设置后移动到对应区域就会产生鼠标指针变化。
cursor可以设置ico资源：

cursor: url("images/test.ico"), auto;

注意此时：

1. cursor: url后要加上auto
2. 图片应为是32*32的ico格式

vertical-align

指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

• baseline 默认方式，基线对齐基线，这种方式下，行内块元素中如果没有数据，直接设置宽高，那么行内块元素的底边就会处于基线位置，于是行内块会看着高出文字一段距离。
• text-bottom 使元素的底部与父元素的字体底部对齐。

min-width、max-width

最小宽度与最大宽度，最小宽度是针对盒模型说的，浏览器是没有这个最小宽度的概念的，当浏览器伸缩为最小宽度，再缩小就会出现横向滚动条。

overflow

对于内容溢出的元素采取的显示方案

• visible 默认方式，直接越界显示
• auto 如果没有内容溢出，就不出现滚动条显示，如果内容溢出就出现滚动条显示。

margin

对于块盒，使用margin: auto;可以实现水平方向的居中，但是无法实现垂直方向的居中，理由如下：

auto的意义是自动填充剩余空间

块级元素，即便我们设置了宽度，他还是自己占一行，在css的规范中，元素他的左外边距+左边框宽度+左内边距+内容的宽度+右内边距+右边框+右外边距=包含块的宽度，如果我们给他的左右外边距设置为auto的时候，他会实现平分剩下的距离，从而达到一个水平居中的效果

但是块级元素的高度并不会自动扩充（可以在chrome中检查看到），所以他的外部尺寸是不自动充满父元素的，也没有剩余的空间，因此margin上下设置auto不能实现垂直居中‘

可以使用绝对定位进行垂直居中。

display

• list-item 设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
  元素本身生成的盒子叫做主盒，附带的盒子称为次盒子，次盒子和主盒子水平排列（最终的效果就是li元素的效果），以下属性可以发生继承。
  • list-style-type 设置次盒子中内容的类型
  • list-style-position 设置次盒子和主盒子的相对位置，默认outside。
  • list-style: none; 清空次盒子

list-style

设置有序列表和无序列表的前面序号的显示格式

• list-style-type: decimal;
  设置为数字显示
• list-style-position: inside;
  设置到内部显示

盒子显示隐藏

1. display: none; 不生成盒子，此时可能会对排版造成影响。
2. visibility: hidden; 生成盒子，只是视觉上移除盒子，盒子仍然占据空间。默认为visible。JS可以控制这个来实现闪烁效果；

背景图

img元素是属于HTML概念，背景图属于css概念；

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图

使用属性

1. background-image: url("images/test.png")
   设定背景图片，背景图默认情况下会在横坐标和纵坐标中进行重复

2. background-repeat: no-repeat;
   设置是否重复

3. background-size: ;

   • contain 图片完全显示在边框中，保持比例不变，可能会有一些空白
   • cover 图片撑满区域，保持比例不变，背景图可能会有一些丢失
   • auto 以背景图片的比例缩放背景图片。
   • 数值或百分比 直接设置背景图大小，可能会造成图片压缩或者伸展，参考img的width设置，设置了width，height应该也会进行相应的等比例调整
     • 只设置一个数值，此次数值设置为width，height为auto，如果设置两个，那么第二个参数为auto；

4. background-position
   设置背景图的位置，默认左上

   • 预设值
   • 数值与百分比
     应用：雪碧图取图片：首先将需要的图片移动到显示区域左上角，然后设置长和宽。

5. background-attachment
   通常用该属性表示图片是否固定。

   • fixed 固定背景图在视口上方

6. background-clip
   设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

   • border-box 背景延伸到边框
   • padding-box 背景延伸到内边距盒子
   • content-box 背景延伸到内容盒子
   • text 仅在文字下面显示背景，搭配color: transparent;有奇效。

背景图和背景颜色混用

可以混用，然后背景图没覆盖到的地方会由背景颜色填充

background

速写属性，background-*对应的值可以直接在background属性中；
由于background-position和background-size都会出现数字形式，写在一起会混乱，因此规定，写的时候先写位置，后写大小，而且使用/隔开。

outline

设置外边框(轮廓)，与border的区别就在于外边框的宽度是不占用类似margin、padding的计算的。但是有个弊端就是他只能同时设置4个边，不能像border一样设置某条边。

outline-offset

当outline默认样式设置为auto时，该css属性无效(个人测试发现outline样式为auto时也有效)，当设置了宽度，该属性意义为outline与border之间的间隔值(默认为0)，可以为负数

line-height的概念

基本概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JG5kjjst-1692416019901)(images/word.png)]
上面这四条线，从上到下分别是顶线、中线、基线、底线，vertical-align属性中有top、middle、baseline、bottom；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6iftUtUF-1692416019901)(images/word_2.png)]

• 行高(line-height)
  行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。他包含了两个部分，一个是字体，一个是行距；
• 行距
  行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
• 半行距
  半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2