Web网络开发 -- 常见CSS属性

宽和高

width属性可以为元素设置宽度。 height属性可以为元素设置高度。

常用的长度单位有 px % vh vw等

其中px为像素单位,%是基于父元素的比例,vh和vw分别指当前屏幕的长宽百分比

calc()方法用于在css中动态计算长度

vh和vw将屏幕的当前页面均分为100份,无论屏幕怎么变,其长宽始终固定100vh\100vw

块级标签才能设置宽度，内联标签的宽度由内容来决定。

字体样式

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

字体大小

font-size设置字体的大小，如果设置成inherit表示继承父元素的字体大小值。

字体风格

font-style设置字体的风格,比如斜体\倾斜等

​ italic 斜体

​ oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

字重（粗细）

font-weight用来设置字体的字重（粗细）

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

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

• 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 颜色的名称 - 如: red
• rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间

文字属性

text-align属性规定元素中的文本的水平对齐方式。

• left 左边对齐，默认值
• right 右对齐
• center 水平居中对齐
• justify 两端对齐

line-height属性用来设置字体占用的行高,一般用于垂直居中对齐,将行高设置为父元素的高.

文字装饰

text-decoration属性用来给文字添加特殊效果.

• none 默认，标准文本
• underline 定义文本下划线
• overline 定义文本上划线
• line-through 定义文本删除线
• inherit 继承父元素的对应属性值

常用的为去掉a标签默认的自划线：

a { text-decoration: none; }

还可以为下划线等设置样式,比如wavy波浪线;可以设置颜色,例如blue;可以设置线的粗细,例如2px

首行缩进

将段落的第一行缩进 32像素

p{text-indent:32px;
}

背景属性

/*背景颜色*/
background-color: red; 
/*背景图片*/ 
background-image: url('1.jpg');
/*背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
9*/ 
background-repeat: no-repeat; 
/*背景位置*/ 
background-position: right top;
/*background-position: 200px 200px;*/background:#ffffff url('1.png') no-repeat right top;/* 背景色渐变 */
background: linear-gradient(180deg,#FFEAEA 30%,#FFFFFF 100%);

列表样式

list-style-type 属性指定列表项标记的类型

#menu li{list-style-type="类型"
}
/*
类型:不显示 none圆圈  circle方块  square小写abc  lower-alpha大写罗马体  upper-roman阿拉伯数字  decimal
*/

边框

边框属性

边框属性有 border-width border-style border-color border-radius 等

通常使用简写方式：

#i1 {   border: 2px solid red;  }

边框样式有

• none 无边框(默认)
• dotted 点状虚线边框
• dashed 矩形虚线边框
• solid 实线边框
• double 双直线边框

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {border-top-style: dotted;border-top-color: red;border-right-style: solid;border-bottom-style: dashed;border-left-style: double;
}

圆角边框border-radius

将border-radius设置为长或高的一半即可得到一个圆形。参数分别对应圆角位置左上右上左下右下,类似上右下左

#i1 {border-radius: 50%;border-radius: 12px;
}

溢出隐藏和不允许换行

#i1 {overflow: hidden;        /* 溢出隐藏 */white-space: nowrap;    /* 用于不允许换行,用于非flex布局 */
}

过渡效果

1. 为伪类选择器的变化等添加过渡效果

transition:效果 时间;例如transition:all 1s;

2. 为块添加阴影

box-shadow:x轴扩散 y轴扩散 光晕大小 阴影的颜色例如box-shadow: 0 10px 8px red

3. 缩放效果

transform: scale(缩放倍数) 例如 transform: scale(0.8);

4. 旋转效果

transform: rotate(旋转角度)例如transform: rotate(720deg);

5. 位移效果

transform: translate(x位移长度,y位移长度)例如transform: translate(100px);

6. 形变效果

transform: skew(x轴形变角度,y轴形变角度)例如transform: skew(30deg,20deg);

7. 多个效果组合

transform: 效果1 效果2 ...

动画效果

第一步 声明一个动画名称

第二步 定义播放的每个阶段的动画效果

@keyframes move{0%{transform: translate(0,0);}25%{transform: translate(200px,0) scale(0.8);}50%{transform: translate(200px,200px) scale(1.2);}75%{transform: translate(0,200px) scale(0.8);}100%{transform: translate(0,0) scale(1);}
}

第三步 绑定动画效果

选择器{...animation: move 2s infinite;	/* move为上面定义的动画名,秒数时播放的时间 */...
}

display 属性

一览表

用于控制HTML元素的显示效果。

值	意义	名称
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。	隐藏元素
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则 会用margin填充剩下的部分。	块级元素
display:“inline”	按行内元素显示，此时再设置元素的 width、height、margin-top、margin-botton 和 float 属性都不会有什么影响。	行内元素
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。	行内块元素
display:“flex”	浮动,见下	浮动元素

行内元素没有空间的概念,不能设置高度\宽度等属性,例如 a链接\font字体\span块 等

块级元素有空间的概念,可以设置宽度\高度等属性,例如 p段落\h1标题\div块\li列表 等

行内块级元素有空间的概念,可以设置宽度\高度等属性,但是像行内元素一样可以并排展示,例如 img

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

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

块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行、即使设置了宽度

内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等 都是内联元素，它们在布局中的行为：

• 支持部分样式（不支持宽、高、margin上下、padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和 input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 盒子并在一行 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常 把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块 元素转化了。

Flex弹性盒子※

将元素的display属性设置为flex,该元素的子元素的display属性将被覆盖,统一归父元素管理,此时子元素将并排展示

flex弹性盒子包括以下以下属性:

1. flex-direction 主轴的方向 项目横或者竖

设置flex-direction属性来确认主轴展示方向,默认是横排(row)

属性值	作用
row（默认值）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

2. flex-wrap 是否换行

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

属性值	作用
nowrap（默认）	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

3. flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap

4. justify-content 项目在主轴上的对齐方式 即行对齐 上 中 下等

属性值	作用
flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。 所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	平均分布

5. align-items 项目在对应轴(交叉轴,即主轴垂直的另一个轴)的对齐方式

属性值	作用
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度

6. align-content 多根轴线的对齐方式，即多行或者多列时项目对齐方式才生效，flex-wrap: wrap | wrap-reverse时生效

属性值	作用
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，第一项在起始行，最后一项在结束行,轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-evenly	项目分布使得任何两个项目之间的间距（以及边缘的空间）相等
stretch（默认值）	轴线占满整个交叉轴