html css 银行卡,CSS

CSS

emmet语法

快速生成HTML结构

快速生成css属性

生成的css属性单位：默认为 px，可以直接指定其他单位，如： lh26em

组合选择器

作用：

可以选择某标签包含的所有后代标签

并集选择器

作用：

可以让多个选择器共享一套样式

交集选择器

作用：

将至少两个选择器连在一起使用(既要还要)

文档流与元素类型

学习路径

什么是 文档流

元素的显示模式

元素显示模式的转换

块级元素的特殊处理

文档流

文档流：是浏览器在显示(渲染)网页标签时所采用的一套排列规则

块级元素 上下排列：独占一行

行内元素 水平排列：默认从左到右，遇到障碍或宽度不够会自动换行

行内块元素 等…

元素显示模式

元素显示模式：就是 元素(标签) 以什么方式进行显示，如 ：

div 独占一行

span 不独占一行，一行中可以放多个 span常见元素显示模式类型：

块级元素 (容器级)

行内元素 (文本级)

行内块元素

类型 标签

块级元素 h1--h6 p div ul li ol dl dt dd table form....

行内元素span a ladel b i u s em mark code small strong...

行内块元素 img video audio input button select textarea...

块元素

常见块级元素：h1~h6、p、div、ul、li、ol、dl、dt、dd、table、form 等

典型：div

特点：

容器级，可以放 行内 或 块级元素

霸道 独占一行

宽高、内外边距 都可直接控制

宽度默认为父元素的 100%

高度默认由内容撑起来

注意：

p 标签 主要用于存放文字，不能放其它块级元素

h1-h6 标题标签 也是存放文字用的

行内元素

常见行内元素：span、a、label、b、i、u、s、em、mark、code、small、strong 等

典型：span

特点：

文本级，一般只放 文本 或 其它行内元素

和相邻行内元素在一行，一行可以显示多个，行满后另起一行

不占有独立区域，只靠自身内容尺寸来支撑高宽

宽高 无法直接设置

外边距 左右有效，上下无效；内边距都有效；

注意：

超链接 里 一般放文字，也可以放 img 标签，但不能再放 超链接

行内块元素

常见行内块元素：img、video、audio、input、button、select、textarea 等

典型：img

特点：兼有 行内元素 和 块级元素特点

和相邻行内元素(行内块)在一行，中间有空白间隙

一行可以显示多个，行满后另起一行

宽高默认值就是它本身内容的宽高

宽高和内外边距有可以控制

元素显示模式的转换

不同类型的显示模式 可以进行 转换

语法：

选择器{

display: block | inline | inline-block;

}

属性值 作用

block 块元素

inline 行内元素

inline-block 行内块元素

块级元素的特殊处理

文本换行

规则：

中文、日文、韩文等遇到边界自动会换行

英文按照 单词 会自动换行

英文连续长单词不会换行

文本内容多时，有时会需要强制换行

语法：

选择器{

word-break: break-all;

}

文本内容多时，有时会需要强制不换行

语法：

选择器{

white-space: nowrap;

}

溢出处理

块级元素内容占满高或宽后怎么办呢？

溢出处理

自动换行

滚动条

语法：

选择器{

overflow:属性值

}

外边距合并

文档流中，相邻 块级元素 上下外边距会出现合并现象

使用外边距较大的值来撑开距离

外边距塌陷

在文档流中块级元素的子盒子设置了上外边距后，会产生子盒子外边距溢出父盒子的现象，我们称之为塌陷。

解决方案：

为父盒子 设置 border 属性

为父盒子 设置 overflow 属性( 值不为 visible)

本文地址：https://blog.csdn.net/lhblmd/article/details/109245641