1. CSS选择器：
元素选择器： 用元素名。 权重
1
类选择器： 用点定义 权重
10
id
选择器：
用
#
定义
权重
100
!important:
忽略选择器的权重，最高级
层次关系：父子关系用空格定义
+
:
同辈，后面的相邻，
~ :
同辈，
后面的
>
:
一级子
并列关系： 用逗号定义
2. 伪类选择器： 用：定义
2.1 a相关的 love与
link
：
a
标签为访问过的
visited:
被访问过的
hover:
通用
,
悬停时
active:
点中时
/* l > v > h > a && love hate*//* 未访问过的 */a : link {color : red ;}/* 访问过的 */a : visited {color : green ;}/* 悬停 */a : hover {color : salmon ;}/* 点中时 */a : active {color : yellow ;
2.2 通用伪类
hover:
悬停
after/before:
用
content
标记内容
}
first-child:
第一个子
last-child:
最后一个子
nth-child
：
第几个子元素 是 这个元素
nth-of-type
：
第几个子元素
a : after {content : ' ↗↗↗↗↗ ' ;color : yellow ;}a : before {content : ' ↖↖↖↖↖ ' ;color : yellow ;1/* 第三个子元素 是 H1 */div > h1 : nth-child ( 3 ) {font-style : italic ;}/* 第二个 H1 元素 */div > h1 : nth-of-type ( 2 ) {border : 1px solid black ;}
3. 样式： 边框
复合样式：
border: 1px solid black;
border-width: 1px;
线宽
border-style: solid
实线
border-color: black;
线颜色
上右下左原则：
border-top:1px solid black; border-width:1px 2px 3px 4px;
div .div1 {width : 100px ;height : 100px ;border-top : 1px solid black ;border-color : black red yellow green ;border-right-width : 2px ;border-style : solid dotted double dashed ; /* 实线 点线 双实线 虚线*/border-bottom-width : 4px ;}
练习技巧：
hover
悬停修改样式
边框的无色技巧
<style> {display : none ; /* 不显示 */}span : hover + .show {display : block ; /* 显示块 */}.a1 {display : inline-block ; /* 行内块有宽高 */width : 0px ;height : 0px ;border-style : solid ;border-width : 0px 8px 8px ;/* transparent 无色 */border-color : transparent transparent black transparent ;}span : hover > .a1 {border-width : 8px 8px 0px ;border-color : black transparent transparent ;}</style><span> 切换 <i class = "a1" ></i></span><div class = "show" >ljksdfklasjklfjakldj</div>
4. 圆角
border-radius:
边角距离
特效练习：
width/height
；
200px;
border-radius: 100px
div
：
overflow:hidden:
超出时隐藏
opcity:
透明度：
0-1
；
transform
：
scala(1.2);
变形缩放
1.2
倍
transistion: all 1s;
变形的周期
1
秒
5. 背景：
background-image: url('
地址
')
； 背景图片，
默认
x,y
的循环
background-repeat: no-repeat;
不循环，
repeat-x
：
x
轴循环
repeat-y: y
轴循环
background-size:
背景图填充大小
cover: x
轴
contain
：
y
轴
.div1 {width : 900px ;height : 600px ;border : 1px solid black ;background-image : url ( '/imgs/meinv.webp' );background-repeat : repeat-x ;background-size : contain ;}
backgroun-posistion:
位置 通常用负值定位图片位置
background-attachment
：
fixed:
滚动时图片的 状态
<style>.div1 {width : 900px ;height : 600px ;border : 1px solid black ;background-image : url ( '/imgs/meinv.webp' );background-repeat : no-repeat ;background-size : contain ;background-attachment : fixed ;}.searchbtn {display : inline-block ;width : 90px ;height : 75px ;background-image : url ( /imgs/btnset.webp );background-repeat : no-repeat ;background-position : -164px -85px ;}</style></head><body><div class = "div1" ></div><i class = "searchbtn" ></i></body
6. 定位：position（块）：
left/top/bottom/right:
联用
>
| position | 说明 |
| static | 默认定位 |
| fixed | 固定定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| sticky | 滚动定位fixed+relative |
6.1 fixed: 相对窗口定位；；清除原位置，相对窗口定位
.fixedgg {border : 1px solid black ;background : yellow ;width : 100px ;height : 100px ;/* 清除了元位置 */position : fixed ;bottom : 10px ;right : 10px ;}
6.2 sticky: 默认有位置， 滚动时，无位置。导航条用。相对原位置
.nav {background-color : bisque ;height : 100px ;position : sticky ;top : 10px ;}
6.3 relative: 相对定位， 保留原位置， 相对于原位置。
z-index:999:
覆盖的顺序
.a1 {background : blue ;width : 100px ;height : 100px ;position : relative ;/* 如果不写位置，无变化 */left : 100px ;top : 100px ;}
6.4 absolute: 绝对定位： 清除元位置， 相对 非static
父，如果没有父就相对窗口
通常。
absolute
在
relative
里面
<style>.fa {width : 600px ;height : 600px ;border : 1px solid black ;position : relative ;}.fa div {width : 100px ;height : 100px ;}.fa > div : nth-of-type ( 1 ) {background-color : red ;}.fa > div : nth-of-type ( 2 ) {background-color : green ;position : absolute ;left : 100px ;top : 30px ;}.fa > div : nth-of-type ( 3 ) {background-color : blue ;}</style><div class = "fa" ><div> 1 </div><div> 2 </div><div> 3 </div></div>
7. 浏览器兼容样式：
-webkit: chrome
谷歌内核
-moz
：
火狐浏览器
-ms-: IE
浏览器
8. 其他
8.1 浮动:float用于 块的横向显示用
left/right:
左浮动，右浮动。
一定要清除浮动
clear:
both:
清除左浮动
+
右浮动
left/right:
<style>.fa {width : 600px ;height : 600px ;border : 1px solid black ;position : relative ;}.fa div {width : 100px ;height : 100px ;/* float: left; *//* float: right; 右内容是发过来的 */}.fa > div : nth-of-type ( 1 ) {background-color : red ;float : left ;}.fa > div : nth-of-type ( 2 ) {background-color : green ;float : left ;}.fa > div : nth-of-type ( 3 ) {background-color : blue ;float : right ;}</style><div class = "fa" ><div> 1 </div><div> 2 </div><div> 3 </div><p style = "clear:both" ></p><p> hello p </p></div>
8.2 盒子模型
margin:
外边距
padding:
内边距
border:
边框
边框
1px width:100px
100 + 1 + 1 = 102 * 102
margin
不会修改标签宽度
padding:10px:
标签宽度
= width
：
100 +
内填充
+
边线
100 + 10 + 10 + 1 + 1 :
标签宽高
122*122
怪异盒子解决标签宽度问题
box-sizing: border-box:
width:100 =
内容
+
内填充
+
边线 （自动计算）
<div style = "width: 100px;height:100px;border: 1px solid black;margin:10px;padding: 10px;box-sizing: border-box;" >helloworld</div>
8.3. 伸缩盒子：display: flex; 轴
display:flex:
默认横轴
flex-direction:
row
横轴，
row-reverse
倒序
column
纵轴
column-reverse:
倒序
justify-content:
内容的对齐方式
flex-start:
开始，横轴居左 纵轴居右
center
flex-end;
结束。
space-around
： 空白在两端， 包围
space-between:
标签在两端，空白在中间
space-evenly
：
平均分配空白
align-items
：
另外一个轴的对齐方式。
<style>.fa > div {width : 100px ;height : 100px ;border : 1px solid black ;}.fa {/* 默认是横轴 */display : flex ;/* row 横轴， column 纵轴 */flex-direction : column ;height : 900px ;align-items : center ; /* 另外一个轴的布局方式 *//* 主轴的 布局方式flex-start: center flex-end; 传统space-around ： 空白包围space-between: 空白在中间space-evenly ： 平均分配空白*/justify-content : center ;}</style></head><body><div class = "fa" ><div> 1 </div><div> 2 </div><div> 3 </div><div> 4 </div><div> 5 </div></div>
扫一扫
2329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
