CSS 思维导图
2018-09-13 20:52:26 6 举报AI智能生成
CSS思维导图
作者其他创作
大纲/内容
box-sizing
设置Border的边框的宽度加载哪里
尺寸属性
长
height
宽
width
最小宽
min-width
最大宽
max-width
最大长
max-height
最小长
min-height
选择器
id选择器
class选择器
多选选择器
后代选择器
元素名选择器
子元素选择器
边框
border
边框颜色
border-color
边框样式
border-style
边框尺寸
Border-width
省略写法
border
用图片来作为边框
border-image-source
border-image-width
规定图片变宽的尺寸
添加圆角
border-radius
box-shadow
为边框添加阴影
三种写法
写在CSS里面.html中需要用link标签来引用
写在.html中的<style>标签中
写在正文标签的<style>属性之中
定位
相对定位
relative
绝对定位
absolute
fliexd
跟随屏幕随动
static
默认定位
定位时重叠堆叠
Z-index
轮廓
outline
伪类选择器
:link
链接未被访问时的状态
:visited
链接未被访问时的状态
:hover
当鼠标处于当前位置时的活动状态
:active
当鼠标点击时,目标的活动状态
:focus
获得焦点时的状态
：before
在每个 <p> 元素的内容之前插入内容.
：after
在每个<p>元素的内容之后插入内容
透明度
opacity
透明度（取值范围0-1）
列表
list-style-type
一般设置为没有前面none
list-style-img
列表图像尺寸
list-style-position
设置列表图像放置位置。
表格属性
table
border-collapse
规定是否合并表格边框
border-spacing
规定相邻单元格边框之间的距离
caption-side
规定表格标题的位置。
empty-cells
规定是否显示表格中的空单元格上的边框和背景
弹性布局
flex(设置为弹性布局)
弹性容器
flex-direction(设置弹性盒子主轴方向)
row(主轴水平方向从左向右)
column从上到下1字排列)
row-reverse(主轴水平方向从右向左)(即反转)
column-reverse(主轴垂直方向从下到上)(即反转)
flex-warp(设置换行的方式)
nowarp(不换行)
warp(正常换行)
wrap-reverse(换行 第一排在下面)
flex-flow
diedirection 和warp的简写形式
简写先写dir在写warp
justify-conetent
水平对齐方式
flex-start
左对齐
flex-end
右对齐
center
居中对齐
space-bettwen
两端对齐
space-around
均匀分布(有间距 子元素间的间距是边距的两倍)
align-items
交叉轴对齐方式
flex-start
交叉轴的起点对齐
flex-end
交叉轴的终点对齐
center
交叉轴的中点对齐
baseline
项目的第一行文字的基线对齐
stretch
如果项目未设置高度或设为auto，将占满整个容器的高度
align-content
多线轴对齐方式
flex-start
与交叉轴的起点对齐
与交叉轴的终点对齐
center
与交叉轴的中点对齐
space-between
与交叉轴两端对齐，轴线之间的间隔平均分布
space-around
每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch
轴线占满整个交叉轴
子元素设置
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis
性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
语法
优先级
1.通过同一种选择器来选择，后面覆盖前面
2.同种写法中id选择器>class选择器>标签选择器
3.三种写法的优先级
框模型
块级元素
block
内联元素
inline
行内块元素
inline-block
行内块元素添加掉落属于Bug 用浮动来代替 CSS3中有弹性设置
背景
背景平铺
background-repeat
背景尺寸
background-size
背景颜色
background-color
背景图片
background-image
简写形式
background
背景图像开始的地方
内边距
padding
外边距
margin
浮动
float
浮动到父元素最上方
元素浮动后不再占有父元素的高度
注意浮动方向
卡住问题
清除浮动
clear
清除浮动 清除周围元素浮动带来的影响
box属性(溢出处理)
overflow
overflow-x
内容溢出对内容的上下进行处理
overflow-style
内容溢出选择处理方式
overflow-y
内容溢出对内容的上下进行处理
字体系列
font
font-style
规定文本样式
font-width
规定文本字体宽度
font-family
规定文本字体
font-size
文本字体大小
定位
定义光标类型
cursor
规定元素应该生成的框的类型
display
文本属性
color
设置文本颜色
direction
设置文本书写方向
letter-spacing
设置文本中字符的间距
line-height
设置行高
text-align
规定文本的对齐方式
text-decoration
规定添加到文本的修饰效果
text-indent
规定文本块的首行缩进
text-shadow
添加文本的阴影
text-transfrom
控制文本的大小写
white-space
处理元素内的空白
word-spacing
设置单词间的间距
text-overflow
设置文本溢出
0 条评论
下一页
