标签：微软雅黑   正整数   出现   边框颜色   center   orm   sans   案例   英文   

标签快捷写法

总结：‘.’点代表class类，‘#’代表id，‘$’代表数字从1开始，‘>’代表儿子

div.c1#d1               按下tab键
效果：


div.c$#d$*2             按下tab键
效果：



div.c$#d${文本}*2
效果：
文本
文本

div>(p>a)*10
效果：

    

    

    

    

    

    

    

    

    

    

  

宽和高

height: 200px;  # 高度200px
width: 200px;   # 宽度200px

字体

1.文字字体

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

2.字体大小

p {
  font-size: 14px;
}

3.字体粗细

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

4.字体颜色

- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: rgb(255,0,0)
- 一个RGB值 - 如: rgba(255,0,0,0.3)  # 第四个值为alpha，控制透明度
- 颜色的名称 - 如:  red

5.字体对齐

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

6.文字下划线控制

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

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

a {
  text-decoration: none;
}

7.文字首行缩进

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

p {
  text-indent: 32px;
}

8.字体英文换大写

text-transform

背景属性

1.背景颜色

/*背景颜色*/
background-color: red;

2.背景图片

/*背景图片*/
background-image: url('1.jpg');

3.背景不平铺

 background-repeat:repeat(默认):背景图片平铺排满整个网页
 background-repeat:repeat-x：背景图片只在水平方向上平铺
 background-repeat:repeat-y：背景图片只在垂直方向上平铺
 background-repeat:no-repeat：背景图片不平铺

4.背景位置

background-position: 100px 10px; !*第一个调节左右  第二个调节上下

5.固定背景图像

定义背景图片随滚动轴的移动方式

background-attachment: fixed;

background: url("111.png")  center center;
background-attachment: fixed;

案例：

6.简写方法

background:#336699 url('1.png') no-repeat left top;

边框

1.边框属性(宽度，样式，颜色)

border-width
border-style
border-color

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

2.边框样式

3.边框上下左右设置

#d1 {
  border-top-style:dotted;  # 上边框类型
  border-top-color: red;    # 上边框颜色
  border-right-style:solid;     # 右边框类型
  border-bottom-style:dotted;   # 底部边框类型
  border-left-style:none;       做边框类型
}

4.边框设置为圆形

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形

div {
            height: 200px;
            width: 200px;
            border-radius: 50%;   # 宽的50%，高的50%。出来就是圆
            background-color: red;
            background-repeat: no-repeat;   # 禁止平铺
        }

5.圆形头像示例

6.display控制显示效果

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

盒子模型

margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；   
Border(边框):     围绕在内边距和内容外的边框。
Content(内容):   盒子的内容，显示文本和图像。

margin外边框

.margin-test {
  margin-top:5px;       # 上外边框距离
  margin-right:10px;    # 右外边框距离
  margin-bottom:15px;   # 底部外边框距离
  margin-left:20px;     # 左边外边框距离
}

简写形式：

.margin-test {
  margin: 5px 10px 15px 20px;  # 上右下左，顺时针
}

常见居中：

.mycenter {
  margin: 0 auto;
}

padding内填充

.padding-test {
  padding-top: 5px;     # 上内边框距离
  padding-right: 10px;  # 右内边框距离
  padding-bottom: 15px; # 底部内边框距离
  padding-left: 20px;   # 左边内边框距离
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

• 提供一个，用于四边；
• 提供两个，第一个用于上－下，第二个用于左－右；
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
• 提供四个参数值，将按上－右－下－左的顺序作用于四边；

float浮动

1.浮动方法

三种取值：

float: left：向左浮动

float: right：向右浮动

float: none：默认值，不浮动

clear属性规定元素的哪一侧不允许其他浮动元素。

2.clear

clear属性规定元素的哪一侧不允许其他浮动元素。

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

3.清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

• 固定高度
• 伪元素清除法
• overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow 溢出属性

.c1 {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            overflow: auto;
        }

定位

position: relative;  # 绝对定位
position: absolute;  # 相对定位
left: 100px;  # 距离左边100px
left: 50%;   # 距离左边50%距离
top: 100px;  # 距离上面100px;
top:50%;    # 距离上面50%的距离

相对定位  relative
    相当于标签原有的位置做偏移
        了解即可

绝对定位  absolute
    相当于已经定位过的(static>>>relative)父标签做偏移
        eg:
            小米购物车

固定定位  fixed
    相当于浏览器窗口固定在某个位置始终不变
        eg:
            回到顶部

固定定位：

        .cc{    
            position: fixed;
            bottom: 20px;
            right: 20px;
            height: 50px;
            width: 100px;
            }
         
回到顶部

z-index控制z轴的距离

设置对象的层叠顺序。

1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4. 从父现象：父亲怂了，儿子再牛逼也没用

#d1 {
  z-index: 999;
}
#d2 {
  z-index: 1000;
}

结果：优先展示d2的

透明度

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

.c2 {
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }

前端——css属性方法

标签：微软雅黑   正整数   出现   边框颜色   center   orm   sans   案例   英文   

原文地址：https://www.cnblogs.com/guyouyin123/p/12109582.html