CSS属性

CSS属性

宽高

width

• 宽

height

• 高

块级元素才能设置宽高

内联元素的宽度由内容决定

字体属性

font-family

• 文字字体
• 选择多个字体格式，当浏览器无法识别时会识别下一个

font-size

• 字体大小

font-weight

• 字重——字体粗细
• normal
  • 正常粗细
• bord
  • 粗体
• border
  • 更粗
• lighter
  • 更细
• 100-900
  • 设置具体粗细
• inherit
  • 继承父元素的粗细，也是默认值

font-color

• 字体颜色
• 属性值用英文单词
• 属性值用#ffffff——rgb表
• 属性值用——RGB(255，0，0)——rgb表
• 属性值用——RGBA（255，0，0，1）
  • 最后一个数表示透明度，
    数值在0.0-1.0之间

文字属性

text-align

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

text-decoration

• none
  • 默认值，定义标准的文本
• underline
  • 定义文本的下划线
• overline
  • 定义文本上划线
• line-through
  • 定义穿过文本的一条线——删除线
• inherit
  • 继承父元素的tent-decoration属性的值
• 应用场景
  • 为a标签去掉下划线
    • a

text-indent

• 20px——表示缩进的像素

letter-spacing

• 3像素——表示文字的间距的像素

背景属性

background-color

• 设置颜色，也有4中方式

background-image

• repeat
  • 默认，背景图片平铺
• repeat-x
  • 水平方向平铺
• repeat-y
  • 垂直方向平铺
• no-repeat
  • 背景图片不平埔

background-position

• background-position ：px px;
• 第一个参数距离左边的
  • 可以用像素
  • 还可以用left center right
• 第二个参数距离上面的
  • 可以用像素
  • 还可以用top center bottom

background

• 支持缩写
• background : 颜色/url("图片地址") 平铺方式 背景位置的两个参数

延申

• 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，
  然后根据位置去显示图片。减少频繁的图片请求。

边框

border-width

• 像素

border-style

• none
  • 无边框
• dotted
  • 点状虚线
• deshed
  • 矩形状虚线
• solid
  • 实线

border-color

• 颜色4种定义方式

可以为边框的4条线分别定义

• border-【top，left，right，bottom】-【width，style，color】

border

• border：宽度 样式 颜色；
• 顺序随便

border-radius

• 像素/%
• 实现圆角边框
• 当值为长或高的一半时是一个园

display

控制HTML元素的显示效果

none

• 不显示
• 从原位置消上

block

• 设为块级元素

inline

• 设为行内元素

inline-block

• 拥有行内和块级的特征
• 不换行，可设置宽高

display：“none”；和visibility：hidden；的区别

• 前者隐藏并消失，不占用位置
• 后者隐藏不消失，占用位置

CSS盒子模型

margin

• 元素和元素间的距离

padding

• 内容和边框间的距离

border

• 围绕在内边距和内容外的边框

content

• 盒子里的内容

margin和padding用法一致

• 可以分别设置4个方向的边距
• 像素
• 还可以是auto表示居中
• -【top，right，bottom，left】
• margin
  • px
    • 用于上下左右
  • px px
    • 上和下 左和右
  • px px px
    • 上 左和右 下
  • px px px px
    • 上 右 下 左

浮动

float

• 在 CSS 中，任何元素都可以浮动。
• 浮动元素会生成一个块级框，而不论它本身是何种元素。
• left
  • 向左浮动
• right
  • 向右浮动
• none
  • 默认值，不浮动
• 特点（副作用）
  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear

规定元素的哪一侧不允许浮动

left

• 左侧不允许浮点

right

• 右侧不允许浮点

both

• 两侧都不允许浮点

none

• 默认值，允许浮动

inherit

• 继承父元素的clear值

注意：clear属性只会对自身起作用，而不会影响其他元素。

可以用来清楚浮动导致的副作用

• 固定高度

  • 设置父元素高度

• 伪元素清楚法

  • 选择器：after

  • 在父元素最后加一个块级元素清除浮动

• overflow：hidden

溢出属性

overflow

• 水平和垂直均设置

overflow-x

• 水平设置

overflow-y

• 垂直设置

值

• visible
  • 默认值，内容不会修剪，会呈现在元素框外
• hidden
  • 内容会被修剪，修剪部分不可见
• scroll
  • 内容会被修剪，修剪部分会以滚动条形式存在
• auto
  • 内容会被修剪，修剪部分会以滚动条形式存在
• inherit
  • 继承父元素的overflow属性

定位

position

• static
  • 默认值，无定位
• relative
  • 相对定位
• absolute
  • 绝对定位
• fixed
  • 固定定位

是否脱离文档流

• 脱离文档流：
  • 绝对定位
  • 固定定位
• 不脱离文档流：
  • 相对定位

设置对象的层叠顺序

z-index

z-index 值表示谁压着谁，数值大的压盖住数值小的，

只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

从父现象：父亲怂了，儿子再牛逼也没用

opacity

定义透明度

• 0.0~1.0
• 0是透明
• 1是不透明

XMind: ZEN - Trial Version