前端（五）css属性

css属性

文章目录

css属性
一、字体属性
二、文本属性
三、背景属性
四、盒子模型

一、字体属性

html 复制代码

font-weight：文字粗细，在100到900之间，normal(400),bord(700),inherit(继承父类)
font-style：文字风格，normal表示正常(默认)，italic表示斜体
font-size：文字大小，一般在13~15px，inherit为继承父类的
font-family：文字字体，例如"Microsoft Yahei", "微软雅黑", "Arial", sans-serif，但是字体必须是电脑中已经安装的
以上四个属性可以简写为font:bolder italic 13px "Microsoft Yahei"

color：颜色，可以为英文/rgb/rgba/十六进制 red/rgb(255,0,0)/rgba(255,0,0,0.3)/#FF0000，rgba多的一位表示透明度，在0~1
opacity与rgba透明度的区别在于rgba只改变设置颜色对象的透明度，而opacity则是改变整个标签的透明度。

二、文本属性

html 复制代码

text-align：文本的水平对齐方式 right/center/left
line-height：行高
当text-align:center;line-height:盒子高度 时可以实现文本的手动居中
但是当文本是多行内容时想要实现文本居中则需要使用padding

text-decoration：文本装饰，none无装饰(默认)，underline下划线，overline上划线，line-through删除线，inherit继承
text-indent：首行缩进，单位px

三、背景属性

html 复制代码

background-color：文本框背景颜色

在css中可以把html的标签分为块级标签和行内标签，块级标签是占一整行的标签，如div、p等，标签结束会自动换行，而行内标签则不会自动换行。

下面的属性只有块级标签才有。

html 复制代码

width/height：宽/高
background-image：背景图片
background-size：背景图片的宽高
background-repeat：背景图片的平铺方式 no-repeat/repeat-x/repeat-y/repeat 不平铺/沿x轴平铺/沿y轴平铺/沿xy轴平铺
background-attachment：背景图片是否随滚轮移动，fixed/scroll  滑动/固定
background-position：背景图片在盒子中的位置，默认在左上角，正数表示向下/右移，负数表示向上/左移动，单位是px，也可以写left/right/center/top/bottom

背景图片和插入图片的区别：

背景图片不占位置，而插入图片会占位置
背景图片有特定属性，控制方便，而插入图片则没有
插入图片便于浏览器的搜索，背景图片则不会

另外前端为了减少高并发的传输压力有两种常见的方法：

将大的背景图变为小的背景图的多次重复
使用精灵图，也就是把多个小图标集成在一个图片上

四、盒子模型

下面具体来说以下css中的三种标签。

块级标签：会独占一行，可以设置宽高，有 div、h、ul、ol、dl、li、dt、dd 、p

行内标签：不会独占一行，不可以设置宽高，有span、buis、strong、em、ins、del

行内块级标签：不会独占一行，可以设置宽高，有img

css中可以通过display进行标签的转换，none表示不显示标签也不占用空间，block表示块级标签，inline表示行内标签，inline-block行内块级标签。

p、div和span三个标签的用途：div表示一个大盒子，用来装一系列标签；p表示一行；span表示一个区域。

块级标签可以看成一个盒子，其模型如下所示。

html 复制代码

border-width：表示边框线的粗细，单位px，如果只写一个则表示四条边框粗细相同，顺序为上右下左
border-style：表示边框线的样式，none/solid/dotted/dashed/double 无/实线/虚线点/虚线线段/双实线，如果只写一个则表示四条边框样式相同，顺序为上右下左
border-color：表示边框线的颜色，如果只写一个则表示四条边框颜色相同，顺序为上右下左
border的简写为border:1px solid blue(四条边相同的设置)

border-radius：边框角的弧度，单位是px，也可以设置为百分比，顺序是左上右上右下左下，写一个默认四个角设置相同

padding：边框与内容的距离，单位是px，顺序是上右下左，写一个则四个相同，内边距可以有背景颜色
但是padding设置完以后会在指定的方向拉伸盒子，如果不想改变盒子大小可以设置box-sizing:border-box
当然padding也可以这样设置padding-top：20px；padding-right：20px；padding-bottom：20px；padding-left：20px；

margin：盒子外边距，及盒子与盒子的距离，单位是px，顺序是上右下左，写一个则四个相同，外边距没有背景颜色
也可以margin-top：20px；margin-right：20px；margin-bottom：20px；margin-left：20px；
外边距是相对平级盒子的距离，如果不存在平级的盒子则会相对父级的盒子。
另外在水平方向上两盒子的距离=左盒子的margin-right+右盒子的margin-left，水平方向是两盒子的距离=max{上盒子的margin-bottom，下盒子的margin-top}
另外如果两个盒子嵌套，里面的盒子设置了margin-top，外面的盒子没有设置边框属性则会被一起顶下去。

盒子实现居中margin:0 auto;
防止盒子文本溢出word-break: break-all;

浏览器默认会给盒子附加边距，为了让边距设置满足我们的要求就需要在一开始清除所有标签的边距

{
margin: 0px;
padding: 0px;
}
但是通配符选择器存在效率低下的问题，为了解决这个问题可以把*改为页面中使用的所有标签名。