导图社区 css入门
适合小白入门css，大概整理了相关知识点，梳理一下知识体系
基础HTML思维导图，适合小白初学入门使用
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
CSS入门
1.css的引入方式
行内样式：在html标签中添加style属性
<div style="border:1px solid red;"></div>
内联样式：添加<style></style>标签
1.一般添加在<head></head>标签内部 2.格式：选择器{ 样式名:值;样式名:值;} <style type="text/css"> div,p{ border: 1px solid red; width: 200px; height: 200px; } </style>
外联样式：创建.css为后缀的文件，在HTML页面中link引入
div,p{ border: 1px solid red; width: 200px; height: 200px; }
三种引入方式的优先级：行内样式>内联样式&外联样式(就近原则)
2.css选择器
基本选择器
id选择器：#开头后边紧跟标签中的id属性值
#d1{样式名:值;样式名:值;}
类选择器：.为开头,后边紧跟标签中class属性值
.c1{ 样式名:值; }
标签选择器：以标签的名称作为选择器的名称
div{ 样式名:值; }
基本选择器优先级：id选择器>类选择器>标签选择器
统配选择器：*:匹配所有的标签
*{ 样式名:值;}
层级选择器：选择器1 选择器2 { }
伪类选择器：:选择器(主要是用在超链接<a></a>上)
a:link 匹配的是未访问的超链接
a:visited 匹配的已经访问过的超链接
a:hover 匹配的是鼠标悬停在超链接上的状态
a:active 激活状态，鼠标点击超链接不放开
3.css样式
字体样式
font-style：字体风格 normal(正常字体) | italic(斜体) |oblique(斜体)
font-family：字体样式 微软雅黑 ，宋体
font-size:字体大小 (px)
font-weight：字体粗细 normal|bold
文本样式
text-align:文本的对齐方式 left|right|center
text-indent：文本缩进
word-spacing:单词间隔(对中文无效)
letter-spacing:字母|文字间隔
line-height：字体行高
该样式常用来做文本的垂直居中 将该文本的行高设置成容器(块标签)的高度就行
背景样式
background-color:背景颜色
background-image:url(图片路径) 背景图片
当背景颜色和背景图片同时存在，那么背景图片会将颜色覆盖
background-repeat: 背景平铺 repeat-x | repeat-y |[repeat | no-repeat ]
repeat-x： 背景图像在横向上平铺 repeat-y： 背景图像在纵向上平铺 repeat： 背景图像在横向和纵向平铺 no-repeat： 背景图像不平铺 round： 背景图像自动缩放直到适应且填充满整个容器。 space： 背景图像以相同的间距平铺且填充满整个容器或某个方向
background-position：背景绝对定位 left | center | right |top | bottom
需要两个值定位背景图片的显示位置 如果写一个，那么另外一个值默认为center
background-attachment：背景绝对定位 fixed | scroll
fixed： 背景图像相对于窗体固定。 scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
边框样式
width：设置或检索对象边框宽度
style：设置或检索对象边框样式
color：设置或检索对象边框颜色
border-[left|right|top|bottom]-[color|width|style]：具体方向的边框设置
border-radius:边角的弧度
border-radius:r1 r2; r1:水平半径 r2:垂直半径 当r1和r2的值相同的时候，可以写一个值，表示这个是一个圆 如果两个值不相同，那么表示是一个椭圆
列表样式
list-style-image:url(img/1.jpg)：指定列表项标记图像
list-style-position：outside(外部,默认值) |inside(内部) 列表项标识定位
list-style-type:none：去掉列表项标识
注意:当列表的标识为图片的时候，该样式无效
定位
position： relative(相对定位) | absolute(绝对定位) | fixed (固定定位)
1.relative： 相对标签原来的位置实现偏移(移动),原来的位置还保留 2.absolute：相对父类标签进行偏移,前提是父标签要进行定位(可以是static值之外任意的定位值)，如果父标签没有定位，相对<body></body>标签实现偏移,原来的位置不保留 3.fixed：当出现滚动条时，对象不会随着滚动。固定定位 以上3个定位样式都有以下4个偏移属性:left|right|top|bottom
布局
float:left|right,标签在文档流中左右漂浮,后边紧邻的标签，紧跟上一个标签实现浮动(实现偏移)
clear:left|right|both 清除边框的浮动影响
display:none(隐藏)|inline(行内) | block(块) |inline-block(行内块元素)
none:隐藏对象。不为被隐藏的对象保留其物理空间 inline： 指定对象为行内元素。 block： 指定对象为块元素。 inline-block：指定对象为内联块元素。行内块元素在同一行，但是每个元素之间有空隙
overflow：溢出之后的处理方式 visible(默认值,正常显示) | hidden(隐藏) | scroll(滚动条)
盒子模型
外边距:盒子与盒子之间外边框的距离
内边距:内容和盒子边框之间的距离
内容:往往指代的是盒子中的内容
margin: 表示设置外边距的4个值 margin-left|right|top|bottom：表示设置某一个边框的 外边距
