css基础-白红宇

css基础

阅读量：5279 次

发布时间：2019-06-14

本文共 4654 字，大约阅读时间需要 15 分钟。

（一）背景图片

用外链式往div元素中引入一张背景图

background:url(相对路径) no-repeat;

url()括号中写的是相对路径

no-repeat 不平铺

background-size:20px 20px;

第一个值:水平方向,第二个值竖直方向

自动匹配背景图片大小 cover

背景图片不占位置

1  2  3      4         
       5          6         22     23     24         
      25         
      
       这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV
      
26         
      27     28

test1

（二）选择器

通配符选择器：选中页面中所有的标签。

后代选择器:选择ul标签里面的所有li标签。

标签名选择器eg：ul li{}

类名选择器:

id名选择器

1  2  3      4         
       5          6         48     49     50         
      
       51             
       52                 53             
54         
      
55         56         57         
      
       58             
       淘宝
59             
       秒杀
60             
       |
61             
       64             
       65             
       团购
66             
       海购
67             
       个人中心
68         
      
69     70

选择器

（三）项目符号

列表默认下有会项目符合，一般都会去除。

1  2  3      4         
       5          6         19     20     21         
      
       22             
       1
23             
       2
24             
       43
25             
       4
26             
       5
27             
       6
28         
      
29     30

选择器

问题：在通配符选择器、父类选择器和子类选择器中哪里去除项目符号好，为什么。

答：在父类中去除好，代码见上。

原因：当选择通配符选择器里去除项目符号的时候，往后所有的列表中都要去除项目符号这是其一；将代码写入通配符选择器中意味着，往后所有添加的元素标签都会自动的加入去除项目符号的代码，即使此元素没有项目符号，这样一来代码执行的效率就降低了。

当选择子类选择器里去除项目符号的时候，会对ul里面的所有li都执行次list-style:none;，同样降低了效率。

而选择在父类选择器里去除项目符号，list-style:none;只用执行一次，一步到位。

（四）块级元素居中

块级元素的居中方式:前提是有一个固定的宽度,margin左和右auto

margin:0px auto;

自动: 取最大值

两个值:第一个值上下、第二个值左右

margin:10px auto 0px;

三个值:上、左和、下

四个值:上、右、下、左

1  2  3      4         
       5          6         39     40     41         
      
       42             
       天猫
43             
       聚划算
44             
       天猫超市
45             
       |
46             
       淘抢购
47             
       电器城
48             
       司法拍卖
49             
       淘宝心选
50             
       兴农扶贫
51             
       |
52             
       飞猪旅行
53             
       智能生活
54             
       苏宁易购
55         
      
56     57

块级元素居中

（五）固定定位

固定定位：不会随着页面滚动而滚动的效果，就用固定定位

position:fixed;

定位以后，top bottom left right

参照物：浏览器窗口

固定定以后，脱离文档流，变成行内块元素、元素不占位置

1 2 3 4

5 6 24

36 37 38 39

文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

40 41

fixed

（六）相对定位

相对定位：用于微调位置

postion:relative;

定位后top left bottom right

参照物：元素原本的位置

相对定位后，元素还占有原来的位置

相对定位不脱离文档流，不改变元素性质

1 2 3 4

5 6 23

29 30 31 32

相对定位：用于定位：用于微调位置相对定位：用：

33 34

relative

（七）绝对定位

postion:absolute;

定位后 top left right bottom

参照物：往父级找到有定位方式的标签，然后以它为参照物，若父级都无定位方式，则以body为参照物

脱离文档流，变成行内块元素、设置宽高有效、不占位置

一般来说，子集绝对定位，父级给相对定位。因为父级给相对定位，对整个页面的影响较小

1  2  3      4         
       5          6         35         
      43     44     45         
      
       46             div47             
       48                 ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp49                 50             
51         
      
52         
      
       53             
       
54             
       
55             
       
56             
       
57             
       
58             
       
59             
       
60             
       
61             
       
62             
       
63             
       
64             
       
65             
       
66             
       
67             
       
68             
       
69             
       
70             
       
71             
       
72             
       
73         
      
74     75

absolute

（八）定位居中

1  2  3      4         
       5          6         18     19     20         
      
21     22

定位居中

要点：1、竖直选择（距离参照物上边50%或距离参照物下边50%）和水平选择（距离参照物右边50%或距离参造物左边50%）

　　　2、外边距竖直选择（margin-top或margin-bottom）和外边距水平选择（margin-left或margin-right），值为定位元素宽高的一般像素。

（九）定位练习

1  2  3      4         
       5          6         34     35     36         
      
       37             
       38             
       X39         
      
40     41

定位练习

（十）显示层级

1  2  3      4         
       5          6         
       7         
       8         26     27     28         
      
29         
      
30     31

显示层级

z-index:;

默认为0

（十一）hover（伪类选择器）

div:hover{}

选择同级用+，选择后代用空格

1 2 3 4

5 6 25 26 27

文字文字

29 这是一个超链接30 31

hover伪类选择器

转载于:https://www.cnblogs.com/xiaochen-cmd-97/p/11178666.html

你可能感兴趣的文章

code异常处理

查看>>

git - 搭建最简单的git server

查看>>

会话控制

查看>>

推荐一款UI设计软件Balsamiq Mockups

查看>>

Linux crontab 命令格式与详细例子

查看>>

百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

SetCapture() & ReleaseCapture() 捕获窗口外的【松开左键事件】: WM_LBUTTONUP

查看ASP.NET : ViewState

查看>>

Android StageFrightMediaScanner源码解析

查看>>

vue项目中开启Eslint碰到的一些问题及其规范

springBoot 项目 jar/war打包并运行

查看>>