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