css
2021-11-11 11:05:40 1 举报AI智能生成
前段样式知识树
作者其他创作
大纲/内容
旋转
perspective:透视效果 视距 110px;
变换中心： transform-origin：
transform-style:perserver-3d;内部3的效果
变换中心： transform-origin：
transform-style:perserver-3d;内部3的效果
text-shadow
box-shadow:多层阴影用， 阴影不占位
word-wrop:break-word;
background-origin：
word-wrop:break-word;
background-origin：
字体相关
font-size:（可继承）chrome 默认16px，最小可显示12px，所有字体设置为双数，px：绝对,em：相对于父级，rem:相对于根
浏览器字体小于12px解决方案
transform:scale()属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的
加上一个display:inline-block;
css可继承属性
字体
font
font-family:规定元素的字体系列
font-weight：设置字体粗细
font-size：设置字体大小
font-style：定义字体风格
font-variant：设置为小型大写字母的字体显示文本
文本
text-index:文本缩进，
line-height:行高
word-spacing：增加或减少单词间的空白（字间隔）
letter-spacing:增加或减少字符间的空白（字间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
text-align:文本水平对齐center，left，right
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表属性：list-style-type、list-style-image、list-style-position、list-style
光标属性：cursor
页面样式属性：page、page-break-inside、windows、orphans
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、 speech-rate、volume、voice-family、pitch、pitch-range、 stress、richness、、azimuth、elevation
所有元素可继承的属性：visibility、opacity，cursor
内联元素可以继承的属性:1、字体系列属性 2、除text-indent、text-align之外的文本系列属性
块级元素：text-index,text-align
块级元素和行内元素
块级：默认空间是一行，可以设置宽高任然占据一整行
行内：默认空间是内容的大小，默认不可以设置宽高，同一行显示；
浮动
float:脱离文档流，释放原位置不完全脱离，只是盒子脱离内容会被挤下来，解决水平排列
缺点：造成父元素的塌陷。
解决方法：
给父元素设置高度
在父元素结束前添加一个div class="clear" .clear{clear: both}
overflow：hidden；
添加一个类clearfix
bfc
格式化块级元素，解决margin重合问题
雪碧图
优点：减少请求次数，优化页面加载
盒子模型
标准盒模型
content内容（width）+内填充padding+边框border+外边距margin
IE盒模型
width为总宽度，content会自动计算
box-sizing:border-box;(chrome执行IE盒模型)
rest.css normalize.css 的区别
rest.css 粗暴的将几乎所有的浏览器默认样式修改统一
narmalize.css保留了有用的默认样式
子主题
选择器
伪类选择器
状态类选择器 eg: a:link(未访问), a:visted(访问过), a:hover(悬浮) , a:active(激活状态)
原则 爱恨原则 lv ha
原则 爱恨原则 lv ha
水平分布问题
给元素加class（不推荐）
父元素的负边距
（css3) :nth-child(4n+1) 解决第一个边距问题
定位问题
static inherit
absoulte ： .从当前位置完全脱离文档流，释放空间 ；
大小由内容width/height绝定；
3如果所有父元素没有定位，则以body为准，如果有则以最近的父元素定位为准
大小由内容width/height绝定；
3如果所有父元素没有定位，则以body为准，如果有则以最近的父元素定位为准
relative：3.30 不会脱离文档流量，不释放空间
31 不会改变块级元素的特性
32 以自生原本文档
31 不会改变块级元素的特性
32 以自生原本文档
flex (固定定位，贴在屏幕，完全脱离文档流，释放空间 大小由内容width/height绝定，以可视窗口作为参考)
谁有定位 谁层级高
谁后定位 谁层级高
默认层级0 取值-1 到9999
谁有定位 谁层级高
谁后定位 谁层级高
默认层级0 取值-1 到9999
居中的方式
内联元素水平居中：text-align: center
块级元素水平居中：把固定宽度块级元素的margin-left和margin-right设成auto
多块级元素水平居中
如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中
利用display: flex
用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式
.flex-center {
display: flex;
justify-content: center;
}
display: flex;
justify-content: center;
}
垂直居中
单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等
通过设置内联元素的高度(height)和行高(line-height)相等
多行元素垂直居中
利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中
利用flex布局（flex）
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
利用“精灵元素”
利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的
块级元素垂直居中
固定高度的块级元素
知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了
未知高度的块级元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题
水平垂直居中
子主题
固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半，使元素水平垂直居中
未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
屏幕上水平垂直居中
屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局
块级元素转换
display：inline（把块级元素转换为行内元素）
display：inline-block(行内块，可以有宽高)
display：block（把元素转换为块级元素）
visibility:hidden(可见状态为不可见)不脱离文档流
opacity：0-1；元素透明度
filter：（滤镜）
outline：none（外边线不占空间）
display：inline-block(行内块，可以有宽高)
display：block（把元素转换为块级元素）
visibility:hidden(可见状态为不可见)不脱离文档流
opacity：0-1；元素透明度
filter：（滤镜）
outline：none（外边线不占空间）
css3
:first child
-webkit
-ms-
-moz-
-o-
scale:1以上放大， 0以下缩小 翻转 放大
-webkit
-ms-
-moz-
-o-
scale:1以上放大， 0以下缩小 翻转 放大
skew
向下为x轴，向右为y轴，顺时针旋转
0 条评论
下一页
