css元素的样式基础

1.尺寸和单位

px像素(绝对单位)

 定义宽度`width`和高度`height`可以使用长度单位：px，pt，rem，em，%等等

 一般 pc 端网页使用 px 或 pt

 移动端使用%，em，rem，vw，vh 等响应式单位

 最大宽度最小宽度，最大高度和最大宽度（在响应式部分进行讲解）

  `max-width`最大宽度，`max-height`最大高度

  `min-width`最小宽度，`min-height`最小高度

   不允许出现负值，最小不满足时出现横向或竖向拖动条

宽度高度的设置,需要看当前元素是块级元素还是内联元素

2.颜色

1.英文颜色

常用 red,green,blue,yellow,orange,pink,purple,gold

 transparent 透明色

2.十六进制颜色

`#rrggbb`#必须写

  1、2 位代表红色范围

   3、4 位代表绿色范围

   5、6 位代表蓝色范围

 十六进制颜色范围是 0-9，a-f

 如果三组都是相同的值，可以简写

3.rgb 颜色

- `rgb()`函数，三个参数，用逗号分隔

- r 代表红色色值，g 代表绿色色值，b 代表蓝色色值

- 取值范围 0~255 之间的 256 个数

- `rgba()`a 代表透明度，取值 0~1 之间的数字，0 代表完全透明

例如:

div {
	width: 200px;
	height: 200px;
	/* 英文颜色 */
	background-color: red;
	/* 透明色 */
	background-color: transparent;
	/* 十六进制颜色 */
	background-color: #f00d19;
	/* rgb颜色 0~255*/
	background-color: rgb(10, 210, 30);
	/* rgba 最后一个a是透明度 */
	/* background-color: rgba(0,0,0,0.5); */
}
p {
	width: 100px;
	height: 100px;
	/* 最后一个值0-1之间 */
	background-color: rgba(21, 95, 83, 0.39);
}

4. web 安全色

web 安全色是用于网页的标准色彩，它比标准的 rgb 色彩要少。如果网页设计的时候用了非 web 安全色，那这个网页在不同的电脑显示出来可能是不同的颜色。

不同的平台（Mac、PC 等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在 Mac 上的 Web 浏览器中的图像，与它在 PC 上相同浏览器中显示的效果可能差别很大.

5.边框

1.边框的属性

`border-width`边框宽度

 `border-style`边框样式，solid 实线，dashed 虚线，dotted 点点

 `border-color`边框颜色

2.边框的方向

 border-bottom下边框

 border-top上边框

 border-left左边框

 border-right 右边框

边框在布局中占据了重要的地位,因为他可以以多种形式

3.边框都简写方式

`border:30px solid green;` 三个位置分别可以写边框宽度、边框样式边框颜色，没有严格要求书写顺序

6.元素的分类

1.元素的显示属性

`display`元素以什么方式显示(以下为常用显示方式)

- `display: block;`以块级元素方式显示

- `display: inline;`以内联元素方式显示

- `display: inline-block;`属于行内元素，但以块级显示，俗称行内块

- `display: none;`不显示

- `display: table;`以 table 方式显示（不是重点）

2.内联元素

- 内联元素也可以叫行内元素

- 设置宽度、高度无效（行内块级显示元素除外）

- 和其他内联元素横向从左向右排列

- 设置上下内、外边距无效

- 常见的行内元素`span a`等

3.inline-block

- 它是行内元素的一种

- 不自占一行横向从左向右排列

- 可以设置宽度、高度以及内外边距

- 常见的行内块级显示元素`img button input`

- 会出现幽灵空白节点\

行内块显示元素特有,如果需要去掉可以使用以下两种方式

  - 把 img 标签变成块级元素 `display: block;`这个方法比较好,并且不会影响其他元素

 - 父级元素`font-size: 0;`去掉空白节点

div {
	width: 300px;
	background-color: red;
	/* 去掉幽灵 */
	font-size: 0;
}
img {
	/* 就是和父元素一样宽 */
	width: 100%;
	display: block;
}

4.块级元素

- 每个元素都自占一行，后面的元素也只能另起一行

- 元素的宽度、高度以及内外边距都可以设定

- 块级元素宽度不设定，为父级元素宽度

- 高度不设定为内容高度，如果没有内容，高度为 0

- 常见的块级元素`div,p,h1,ul,li,table`

7.显示和隐藏属性

1. display:none

- `display：none;`使元素消失，脱离文档流的消失

- `display：block;`使元素出现，元素显示为块级元素

2. visibility: hidden

- `visibility: visible;`元素显示

- `visibility: hidden；`元素隐藏，占据自身位置

3. opacity: 0;

- opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明

- 缺点是，元素内的一切都会随着透明度改变

元素的高度和宽度