CSS进阶——学习笔记

目录

CSS进阶 

选择器进阶

复合选择器

后代选择器 

子代选择器

​编辑

并集选择器

交集选择器

hover伪类选择器

Emmet语法

​编辑

背景相关属性

背景颜色

背景图片

背景平铺

背景位置 

背景相关属性连写

​编辑

元素显示模式

块级元素

行内元素

行内块元素

元素显示模式转换

CSS特性

继承性

层叠性 

优先级

​编辑

叠加计算

​编辑

CSS盒子模型 

盒子模型

​编辑

内容的宽度和高度

​编辑

边框(border)

​编辑

内边距(padding)

自动内减

​编辑

外边距

清除默认内外边距

版心居中

​编辑

外边距折叠现象——1、折叠现象

​编辑

外边距折叠现象——2、塌陷现象

​编辑

行内元素的内外边距问题

CSS浮动

结构伪类选择器

 ​编辑

 ​编辑

伪元素

标准流​编辑 

浮动

(拓展)CSS书写顺序

清除浮动 

 CSS定位装饰

定位

使用定位的步骤

​编辑 ​编辑

相对定位

​编辑

 绝对定位

定位居中

​编辑

位移居中 

固定定位

​编辑

元素的层级关系

​编辑

装饰

垂直对齐方式

光标类型

边框圆角

overflow溢出部分显示效果

元素本身隐藏 

 (拓展)元素整体透明度


CSS进阶 

选择器进阶

复合选择器

后代选择器 

子代选择器

并集选择器

交集选择器

   

hover伪类选择器

 

Emmet语法

背景相关属性

背景颜色

背景图片

背景平铺

背景位置 

背景相关属性连写

元素显示模式

块级元素

行内元素

尺寸和内容是一样大的 

行内块元素

元素显示模式转换

CSS特性

继承性

层叠性 

优先级

叠加计算

CSS盒子模型 

盒子模型

内容的宽度和高度

边框(border)

solid:实线  dashed:虚线  dotted:点线

边框单方向设置:

left、right、top、bottom

内边距(padding)

具有复合属性,最多可以写四个值,以空格隔开,分别代表上、右、下、左
注:border和padding都会撑大盒子,实际操作时要注意减掉合适的长度

自动内减

外边距

操作方法与内边距完全相同

清除默认内外边距

解决方法

版心居中

外边距折叠现象——1、折叠现象

外边距折叠现象——2、塌陷现象

行内元素的内外边距问题

行内元素的margin和padding在垂直方向不生效,要改变垂直方向边距,可以转变显示模式或者添加行高:line-height

CSS浮动

结构伪类选择器

 

 

伪元素


标准流 

浮动

浏览器解析行内块或者是行内标签的时候,如果标签换行书写会产生一个空格的距离

早期用来制作图文环绕功能,现在可以使行内块标签在一行排列且代码换行不会产生空格间距。 

(拓展)CSS书写顺序

1、浮动/display

2、盒子模型:margin border padding 宽度高度背景色

3、文字样式

清除浮动 

 

 CSS定位装饰

定位

使用定位的步骤

 

如果left和right都有 以left为准

如果top和bottom都有 以top为准 

相对定位

 绝对定位

改变标签显示模式的特点:具备了行内块的特点 

 常用子绝父相

定位居中

使用百分数

位移居中 

固定定位

元素的层级关系

z-index:整数;(取值越大,显示位置越靠上)  z-index的默认值是0,必须要配合定位使用

装饰

垂直对齐方式

  

浏览器解析行内、行内块会当做文字来处理 

光标类型

边框圆角

常见应用

overflow溢出部分显示效果

元素本身隐藏 

visibility:hidden——占位隐藏

display:none——不占位隐藏

 (拓展)元素整体透明度

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值