CSS样式
2020-08-19 22:57:29 0 举报AI智能生成
CSS脑图
作者其他创作
大纲/内容
CSS权重
*：0
类，伪类：1
id：100
行内：1000
！important：∞
CSS盒子模型
border：盒子边框
border-width：边框粗细
broder-style：边框样式
none：没有边框
solid：实线
dashed：虚线
dotted：点线
border-color：边框颜色
border-collapse：合并相邻边框
padding：内边距
padding-toppadding-rightpadding-bottompadding-left
margin：外边距
margin-topmargin-rightmargin-bottommargin-left
元素实际大小
2*外边距 + 2*内边距 + 2*边框 + 内容
浮动（float）
属性
none：不浮动（默认）
left：左浮动
right：右浮动
口诀
浮：脱离文档流，就是脱标
漏：浮动盒子不占有位置
特：浮动元素能改变 display 属性， 类似于行内块
全：父盒子的孩子中只要一个有浮动 其余的都得有浮动才行
清除浮动
额外标签法
添加style=\"clear:both\"
父级添加 overflow
使用 after 伪元素
使用双伪元素
定位（position）
相对定位： 相对于原来的位置移动，仍然保留原来的位置绝对定位： 以带有父级元素的位置移动。完全脱标，因此要子绝父相
static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
完全脱标，跟父元素没有任何关系，单独使用。不随滚动条滚动。
扩展
盒子居中
堆叠顺序（z-index）
元素显示隐藏
display
none：隐藏
block：显示
visibility
visible：显示
hidden：隐藏
overflow：溢出
visible：不剪切，没滚动
hidden：溢出部分隐藏
scroll：不管有没有溢出都有滚动条
auto：溢出时显示滚动条
垂直对齐（verical-align）
baseline：基线对齐
middle：垂直居中
top：顶部对齐
文字溢出
white-space
normal：默认处理
nowrap：强制一行显示所有文本，直到结束或遇到 </br>
text-overflow
ellipsis：显示（...）
clip：不显示（...），直接剪切
CSS样式
作用
设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
让 HTML 从样式中脱离， 实现了 HTML 专注去做 结构呈现，样式交给css
引入方式（就近原则）
行内式
内嵌式
外链式
CSS选择器
找到特定的 HTML 页面元素
基础选择器
标签选择器
类选择器
id选择器
通配符选择器
复合选择器
后代选择器
子选择器
交集选择器
并集选择器
链接伪类选择器
CSS字体样式（font）
font-size：字体大小
font-family：字体
font-weight：字体粗细
font-style：字体样式
CSS外观属性
color：文本颜色
text-align：文本水平对齐方式
left：左对齐
right：右对齐
center：居中对齐
line-height：行间距
text-indent：首行缩进
text-decoration：文本修饰
none：默认，定义标准文本
underline：下换线
overline：上划线
line-through：删除线
标签显示模式（display）
none：隐藏，不在占用位置
block：转换块级元素，显示元素
block-level：块级元素
inline-level：行内元素
inline-block：行内块元素
CSS背景（background）
background-color：背景颜色
background-image：背景图片
background-repeat：背景平铺
repeat：纵和横都平铺
no-repeat：不平铺
repeat-x：横向平铺
repeat-y：纵向平铺
background-position：背景位置
length：10% / 10px
top / center / bottom / left / right
background-attachment：背景附着
scroll：随对象内容滚动
fixed：图像固定
rgba（CSS3）：背景透明
0 条评论
下一页
