CSS常用的属性：

width

height

color

background-color

font-size

font-weight

text-decoration

vertical-align

尺寸单位和颜色：

px

%

red

rgb(255, 0, 0)

reba(255, 0, 0, 0.5)

#ff0000

#f00

尺寸 和 边框：

尺寸属性：

width、height

用来改变元素的宽高大小

取值：px为单位的数字 或 %

快元素和行内快元素都可以设置宽高大小

行内元素不起作用，大小有内容自适应

溢出处理：

溢出属性：overflow

取值：visible(默认可见)

hidden   隐藏  溢出部分不可见

scroll   显示滚动条  溢出时可用 始终显示

auto     自动当发生溢出的时 产生滚动条并可用

边框：

边框的实现：

1.简写设置

通过一个属性为4个方向设置边框

可以设置边框的宽度、样式、颜色

属性：border

取值：width style color(缺一不可)

width：宽度 px

style：边框样式

取值：

solid：实线

dashed：虚线

dotted：点线

double：双线

color：设置边框颜色

特殊用法：

取消边框：border：none；

2.单独设置某个方向的边框

属性：

border-top      上

border-right 右

border-bottom 下

border-left 左

取值：width style color(缺一不可)

3.单独定义边框的宽度、样式、颜色(了解)

border-width：

border-style：

border-color：

4.边框实现三角标

元素的宽高尺寸为0

元素分别设置四个方向相同宽度

指定方向可以见 剩余的设置为不可见 透明(transparent)

想要设置三角标必须设置4个方向的边框 否则就是矩形

轮廓线：

围绕在元素边框周围的线  常见于表单元素 如：输入框焦点线

属性：outline

取值：width style color

一般多取消元素的默认轮廓线

outline：none

圆角边框：

设置元素的圆角

属性：border-radius

取值：px、%(参照元素尺寸)

取值情况：

border-radius：20px;

一个值表示4个圆角程度都是20px

两个值表示 1和3 2和4 对角相等

三个值表示最后一个角和对角相等

四个值表示分别表示4个圆角程度

圆形：取一个值：%50；

边框阴影(盒阴影)：

属性：

box-shadow

取值：

offset-x   水平偏移

offset-y 垂直偏移

blur 阴影的模糊度 值越大越模糊

spread 阴影的 延伸距离

color  阴影颜色

浏览器坐标系：

不管是窗口还是元素都以左上角为原点 作为x,y轴的正方向

盒模型/框模型：

一切元素皆为框

定义在文档中实际占据的尺寸

包含内容：

外边距、边框、内边距、元素尺寸

默认情况下元素最终占据的尺寸大小：

最终宽度 = 左右的外边距 + 左右边框的宽度 + 左右内边距 + 元素宽度

最终高度 = 上下的外边距 + 上下边框的高度 + 上下内边距 + 元素高度

1.外边距：

元素边框与其他元素边框之间的距离

设置元素与元素之间的距离

属性：

margin

取值：px、%

取值情况：

margin：10px；

一个值表示四个方向都设置外边距

两个值表示上下，左右的外边距相等

三个值表示左右相等其他不等

四个值表示分别设置上右下左的外边距

特殊用法：

1.清除元素的外边距

margin：0px；

2.设置元素在父元素中水平居中

margin：0px auto；

3.取值可以是负值

如果给负值表示位置微调

四个方向的外边距单独设置：

属性：

margin-top

margin-right

margin-bottom

margin-left

可以是一个值也可以是百分比

具有默认外边距的元素：

2.内边距：

元素的内容与元素边框的距离

属性：padding

取值：px、%

取值情况：

padding：10px；

一个值表示四个方向的内边距

两个值表示上下，左右相等

三个值表示左右相等 其他不等

四个值表示分别设置四个方向的内边距

四个方向的内边距单独设置：

padding-top

padding-right

padding-bottom

padding-left

具有默认内边距的元素：

ol ul 文本框 密码框 按钮 td

box-sizing：

指定盒模型的计算方式

属性：box-sizing

取值：

content-box  默认值

border-box：

元素的width height属性  设置包含边框 内边距和内容部分共同的尺寸

元素显示设置：

属性；display

作用；改变元素类型

取值：

block  转换为块元素(可以设置隐藏显示)

inline 转换为行内块元素

inline-block 转换为行内块元素

none 设置元素隐藏

背景相关的属性：

背景颜色是从边框位置开始绘制的

如果元素加内边距，也会按照背景颜色进行补充

所有的元素默认颜色都为透明 新建窗口为白色不是body的颜色 而是浏览器渲染的效果

属性：

background-color

背景图片的设置：

属性；background-image

取值 url(图片地址)

图片平铺显示：

如果背景图片小于元素尺寸，会自动对图片重复平铺

属性：

background-repeat

取值：

repeat(默认) 水平和垂直方向平铺

no-repeat 不重复平铺

repeat-x 水平方向平铺

repeat-y 垂直方向平铺

图片尺寸：

属性：background-size

取值：

px

%：

采用当前元素的尺寸获取包含width height两个值

cover：

将图片等比拉伸至完全覆盖元素 超出部分裁剪掉

contain：

将图片等比拉伸至刚好被元素容纳 图片比例不变

图片的位置：

默认情况下 背景图片重从元素的左上角显示

属性：

background-position

取值：x y

以像素为单位的数值没使用空格隔开

x 水平偏移距离(正负数都可以)

y 垂直偏移距离(正负数都可以)

x% y%：

百分比参照元素尺寸获取

0% 0%：

图片左上角显示

100% 100%：

背景图片右下角显示

50% 50%：

背景图片中间显示

使用方位值表示：

x y

x：left center right

y：top  center bottom

如果要一个方向

背景属性简写：

属性：background

取值：

color url() repeat position

背景图片的大小需要单独设置