css3
去除默认样式
外边距合并
- margin 垂直边距 外边距合并
嵌套块元素垂直外边距的塌陷 - 两个嵌套（父子元素）的块元素 父元素有上外边距同时也有子元素也有上外边距 由父元素会塌陷较大的外边距值
- 父元素定义上边框 border 1px transparent
- 父元素定义上内边框 padding 1px
- 父元素 overflow:hidden
清除
基础
层叠样式表 样式规则
选择器{(属性：值)声明;声明}（样式分隔符）声明块@import 导入 @media @keyframe @font-face @namescace 告诉css引擎必须考虑的XML命名空间 @charset @page 打印文档时布局变化 @docuemnt 文档样式表 @supports 查询特定css是否支持导入 link href
<style>style=“”导入式 <style> @import url() </style>优先级 color:red !important 优先级最高 10000 !important 1000 内联 100 ID 10 类\伪类\属性 1 元素（标签）伪元素 0 (* > + ~)
简写属性 上右下左 上下 左右
颜色单位 rgba hsla(色调[0
360],饱和度[100%],亮度[100%]) color #FFFFFF (0f)长度单位 绝对 cm mm px pt pc 相对 % em 相对当前字体大小 rem 相当根的大小 ex ch lh(元素的line-height) vw/vh/vmin/vmax(较大的值) 视口单位
calc 计算属性
color:var(--color--) :root{ --color--:red } 自定义变量- 无单位的数值 line-height z-index font-weight 特殊值
inherit 默认 initial
- 无单位的数值 line-height z-index font-weight 特殊值
选择器
基本 5个 * E # . ,层次 4个 E F > +相邻 ~通配兄弟- footer.active
属性 7个E[att=val] = |（带前缀） ~(包含val 有空格隔开) * (包含val 字符串) ^（开头） $ E[art$=val]伪元素 :: 5个 letter字/line行 before/after selection 匹配突出显示的文本伪类选择器 :- 动态伪类 链接伪类【link visited】用户伪类【 active hover focus】
- 结构伪类
:root :emptychild of-type only * first/last/nth-(last)-child(n):has :dir :is- :has()：匹配包含指定元素的元素；
:dir()：匹配特定文字书写方向的元素；
:is()：匹配指定选择器列表里的元素；
- :has()：匹配包含指定元素的元素；
- 状态伪类
:checked 选中 :enabled :disabled 不可用状态- :current()：浏览中的元素；
:past()：已浏览的元素；
:future()：未浏览的元素； - 表单
- :optional：选项可选的表单元素；
:required：输入必填的表单元素；
:valid：输入合法的表单元素；
:invalid：输入非法的表单元素；
:in-range：输入范围以内的表单元素；
:out-of-range：输入范围以外的表单元素；
:read-only：只读的表单元素；
:read-write：可读可写的表单元素；
:blank：输入为空的表单元素；
- :optional：选项可选的表单元素；
- :current()：浏览中的元素；
- 语言伪类
:lang() - 目标伪类
:target() - 否定伪类
E:not(F) 匹配不符合一组选择器的元素
- :is() ：is/where(不同)相同
- :where()
- :not()
- :has()
- :focus-visible
- :focus-within
- :empty
- :blank
内容
text
font
- font:font-style 样式 normal 默认值 bold 粗体 bolder 特粗体 lighter 细体 font-weight 粗细 100最细~900最粗 normal\bold\bolder\lighter /line-height font-family [style /weight / family ]
- font-size-adjust 是否强制对文本使用同一尺寸
- font-stretch 是否横向拉伸变形字体 定义如何拉伸文字
- font-variant 小型大写字体或者正常字体显示文本
- @font-face{ font-family:font名字 src:url(‘’) font-weight: }
等比缩放 aspect-radio:1/1 一般指的是 “容器高度按比例根据宽度改变”，很多时候也称为宽高比或纵宽比
min()、max()、clamp()
text
- 文本距离
- *-spacing 间距 word-spacing 单词间距 空格间隙 letter-spacing 字符( 字母)间距
- vertiacl-align
- text-*
- text-align 对齐方式 left||right||center||justify
- text-decoration 修饰线 none 默认值 underline 下划线 overline 上划线 line-through 删除线 blink 闪烁线
- text-indent 缩进
- text-transform 大小写(none(默认值) uppercase 大写 lowercase 小写 capitalize 首字大写)
- text-shadwn 阴影text-shadwn:color 颜色 x-offset x轴位移 y-offset y轴位移 blur-radius 模糊距离
- text-overflow 文本溢出 text-overflow:clip | ellipsis text-overflow:clip 文本裁剪
- line-height
- direction 文本方向 控制文本流入的方向 ltr
- unicode-bidi
- 文本换行
- line-break 日文换行
- word-wrap 英文换行: break-word normal 默认值 | break-word 内容在边界内换行 不截断英文单词换行
- word-break 亚洲换行： break/keep-all
- break-all 允许非亚洲语言文本的任意字符断开
- keep-all 表示中文、韩文、日文是不允许字断开的
- word-wrap:break-word overflow:hidden
- white-space 空白间距 normal 默认值 | pre 文本空白处会被浏览器扣留（预定义文本格式） | nowrap 不换行 | pre-line 合并空白符序列，保留换行符 | per-wrap 保留空白符序列，但是正常进行换行 | inherit 继承
- vertical-align 使用场景 （前面图标和文字 垂直居中） 经常用于设置图片或者表单（行内块元素）和文字垂直对齐 设置一个元素的垂直对齐方式，只能针对于 行内元素或者 行内块元素 baseline 默认 基线 top middle bottom 同一行的内容 垂直对齐
- writing-mode 文本方向 vertical-rl vertical-lr horizontal-tb
i display:inline-block vertical-align:middle - color 颜色
- overflow :scroll hidden auto 、overflow-x overflow-y
- 溢出文字省略号 单行文字
white-space:nowrap overflow:hidden text-overflow:ellpsis - 多行文本省略号 兼容性问题 适合webkit 浏览器或移动端 大部分 webkit 内核
display:-webkit-box -webkit-line-clamp：2 -webkit-box-orient:vertical
- 文本距离
box
- border border:border-width boder-style （dotted\dashed\solid\double\groove\ridge\insert\outset\inheit）boder-color 、 border-radius: topLeft topRight bottomRight bottomLeft、 boder-image：source || slice || width || repeat、 box-shadow 阴影 box-shadow：水平 垂直 模糊距离 扩展尺寸 insert(内部阴影 outset默认值 外部阴影) color
- padding \ padding-block\inline
- margin \ margin-block\inline
- margin 负值 使用场景一 ： 多个并列的元素 之间的间距 可以用 padding分隔 再使用 float:right margin:-1px将盒子并列在一排 而且 设置的负边框边框 可以将所有盒子中间的2px 变成1px 解决hover右边框没有 设置 hover position:rea/z-index：正值
- outline
list-style type position inside（outside） image url(‘’)
background 8个
background：color(颜色)/ transparent | rgba | image(图片) | repeat(展示方式) repeat | repeat-x | repeat-y | no-repeat | attachment(固定还是滚动) | position（图片位置） 50% 50% center/center left bottom
background：image url(‘’) / position size repeat attachment scroll // fixed clip origin
background-repeat repeat no-repeat repeat-x/y
background-postion // 背景图片在父盒子中的位置 x y; // center 50%
background-origin 背景原点 padding-box | border-box | content-box ||| background-clip 背景裁剪 border-box | padding-box | content-box ||| background-size 背景大小 auto （默认值） | length | perentage | cover (填充) | contain（保持宽高比例缩放）
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
background-clip: border-box content-box padding-box
background-origin border-box (背景从边框开始) content-box（背景从内容开始） padding-box（背景从padding开始）
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
也可以说是倒影
color rgba hsla 256种 opacity: alphavalue || inherit ( 1不透明 0 完全透明) 透明度 background-color: transparent
gradient
线性渐变 linear-gradient linear-gradient(direction,color-stop1,color-stop2)
- linear-gradient(to bottom right,red ,blue)
- linear-gradient(right,red,blue)
径向渐变 radial-gradient
background-color:radial-gradient([[<shape> || <size>] [at <position>] ?, | at <position>, ? color-stop ] [color-stop] +)- shape circle ellipse
- size
- farthest-side
closest-side
closest-corner
farthest-side
- farthest-side
角向渐变 conic-gradient
重复渐变repeating-gradient
- repeating-linear-gradient
- repeating-radial-gradient
filter
- blur(10px) 模糊 brightness(0%
100%) 亮度 contrast(0%100%) 对比 drop-shadow() 阴影 - grayscale(0%
100%) 灰度 hue-router(0deg360deg) 色调反转 invert(0%100%) 倒置 opacity(0%100%) 不透明度 saturate(0%100%) 饱和度 sepia(0%100%) 棕褐色 复合函数 应用svg滤镜
- blur(10px) 模糊 brightness(0%
触摸屏当中为一些元素设置内滚动，那么你不仅需要overflow: scroll / auto，还需要-webkit-overflow-scrolling: touch; 实际上，移动端浏览器在某些时候并不能正确执行overflow: scroll / auto，它可能会滚动整个页面而不是你想要的那部分。-webkit-overflow-scrolling解决了这个问题
- ::selection
- cursor:url()
- attr() 展示tooltip
- 选择器:-webkit-input-placeholder{
- :not() 除了
- 隐藏滚动条
.box-hide-scrollbar::-webkit-scrollbar { display:none }
1 | |
object fit 解决img图片尺寸的问题
cover contain fill scale-down 直接作用在img标签上 要指定img标签的宽高
currentColor 侦测当前的颜色，以避免经常地重复定义它
- 获取的是当前元素的颜色
filter: invert() — 是从0到1的刻度，1是从白变黑。 filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。这个属性的值可以从0deg到360deg。
Darkmode.js运用的也是css里面的一个特性叫mix-blend-mode — “CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合“。加上Javascript的辅助判断哪些页面上的元素需要黑化的，哪些是不需要黑化的。就会想我们之前那种做法，导致其他不需要黑化的元素，比如图片，受到影响导致颜色出现问题。
filter: invert() — 可以把页面从白变黑，也可以从黑变白。
filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。
Darkmode.js — 瞬间实现黑暗模式。
新增
- clip clip 剪辑一个绝对定位的元素 shape auto inherit
- cursor 光标
- border-collapse:collapse 设置表格的边框是否折叠成一个单一的边框隔开
- mask 弹幕不会挡住视频中的人物，用的也是这个css属性 遮罩
- -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
- object-fit 替换元素可以以某种方式被调整到合以盒子的大小
- attr() 访问元素属性的值
<div data-bg="black"> background:attr(data-bg) - calc() 计算属性 calc(，默认知)
- var(–text) –text
- max() min() 使用css属性的最大值或者最小值
- cursor default pointer 小手 move 移动 text 文本 not-allowed 禁止
浮动
- float right
动画
transform 变形
- transform 变形
- transform:translateX/Y/3d() 移动
- scaleX/Y/3d() 缩放
- rotateX/Y/3d() 旋转
- skewX()/shewY() 倾斜
- matrix/3d() 2d矩阵
3*3矩阵 // 3d矩阵 4*4矩阵
- transform-style 嵌套元素如何在3D空间中显示 flat 2D平台 preserve-3d 3D平台 3D呈现
- transform-origin：x y; 变形原点 指定元素的中心位置（默认中点） 设置变形的中心点 比如 旋转、倾斜等等
- transform-origin： x-offset（x轴偏移量） y-offset z-offset length\percentage
- x/y/z-offset-keyword top\bottom\right\left\center
- transform-origin： x-offset（x轴偏移量） y-offset z-offset length\percentage
- perspective 父元素设置 透视效果 3D转换元素的透视视图 （人眼距离屏幕的视距）视距，用来设置用户和元素3D空间Z平面之间的距离 值越大，越近，视觉效果越深刻，反之
- perspective-origin
- background-visibility 元素旋转背面是否可见 visible 反面可见 hidden 反面不可见
- transform 变形
transtion 过渡
- 触发过渡 伪元素、媒体查询、js 触发
- transition:property 属性 duration 时间 timing-fucntion [ease/ease-in/ease-in-out/ease-out] 三次贝塞尔函数 cubic-bezier(P0,P1,P2,P3) delay 延迟时间
- transition:5s ease 0.3s;
animation 动画
@keyframes 动画名{} 关键帧选择器外- @keyframes 动画名{ from{} to{ }}
- @keyframes 动画名{ 0%{} 50%{} 100%{} }
animation 调用关键帧animation:[name 动画名 [duration 时间 [timing-function（ease/ease-in/ease-in-out/ease-out/linear/cubic-bezier） [delay 延时播放时间 [iteration-count 播放次数（1 、infinite）[direction（normal 向前播放// alternate偶数向前播放，奇数向反方向播放 ） [play-state 播放状态 (running（默认值）paused) [fill-mode 外属性 none forwards backwards both
animation: 动画名 2s ease-in-out 0.2s infinte normal running both;
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */
布局 float position flex grid
div 块 span 行内
table th tr td 表格
list 列表 ul li ol li dl dt dd
弹性布局（浮动+百分比 、flex） 固定布局 响应式布局（媒体查询和媒体特征） 自适应布局
Box 盒模型
- 标准流 文档流
- display 控制布局的属性（元素分类） 外在盒子决定了元素要像内联元素一样并排在一排显示，内在盒子则决定了元素可以设置宽高、垂直方向的margin等属性
- 对内显示 none 隐藏不占空间 visibility: hidden; 占据空间 (inline-)flex grid table
- visibility 指定一个元素是可见还是隐藏 visibility：visble 可视 hidden 元素隐藏 继续保留位置
- display：none 不保留位置
- 对外显示
- inline 内联 无法设置高宽度 竖直方向上的 padding 和 margin 将不会生效 span、a、em、i、 e、b、img
- block 块级 独占一行 width默认100% p、div、h1~h6、ul、li、ol、dl、dt、dd、table
- inline-block 行内块 input img select、textarea 是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素； 当元素分布在一行充满时，会自动换行
- list-item 像块类型元素一样显示，并添加样式列表标记
- table
- 对内显示 none 隐藏不占空间 visibility: hidden; 占据空间 (inline-)flex grid table
- 盒模型
- box-sizing 盒模型
- content-box 向外 w3c盒模型（默认值） 实际宽度/高度 = height/width(content的宽度和高度) + border + padding
- border-box 向内 IE盒模型 height/width = border + padding + content的宽度和高度
- 外（在）盒子 width height line-height max-width/min-width
- 内在盒子 border padding margin outline content
- padding-block(inline) / margin-block(inline)
- box-sizing 盒模型
- 内容溢出属性 overflow
- overflow overflow-x overflow-y
- overflow-x:visible 默认值 | hidden 内容溢出容器时，内容隐藏，不显示滚动条 | scroll 不管内容有没有溢出 都有滚动条 | auto |no-display 内容溢出容器时不显示元素，相当于元素添加display:none | no-content 内容溢出是不显示内容 相当于 visibility:hidden
- overflow-y:visible | hidden | scroll | auto | no-display | no-content
- 自由缩放属性 resize
- resize:none 不能拖动元素修改尺寸 | both 可以拖动元素修改尺寸，同时修改高度和宽度 | horizontal 只能修改宽度 | vertical 只能修改高度 | inherit 继承
- 上下文 BFC/IFC/FFC/GFC/VFC
- BFC (Block Formatting Context) 块级格式化上下文；
- 它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干
- BFC规则
- margin重叠
- 创建BFC ：html根元素、position absolute fixed 、float不为none、overflow 不为 visible、定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid
- IFC (Inline Formatting Context) 行内格式化上下文；
- FFC (Flex Formatting Context) 弹性格式化上下文；
- GFC (Grid Formatting Context) 格栅格式化上下文；
- VFC(Formatting Context) 视觉格式化模型
- 用来处理和在视觉媒体上显示文档时的计算规则
- 视觉格式化模型简单来理解就是规定这些盒子应该怎么样放置到页面中去，这个模型在计算的时候会依赖到很多的因素
- BFC (Block Formatting Context) 块级格式化上下文；
position 定位
- static 默认值 absoulte 绝对 relative 相对 fixed 固定 sticky (相对和固定混合 必须要带top\bottom\left\right中的一个才生效 兼容性差 使用少 浏览器可视化区域) (屏幕范围（没影响）超出范围 变成fixed) z-index 层叠
- 位置 top\bottom\left\right\center%
float 浮动 浮动能将一个元素（通常是一张图片）拉到其内容的一侧，这样文档流就能包围它 文字围绕图片网页（浮动元素）的效果 水平排成一行
- float none left right
- 特性 包裹性（元素width会像height一样由子元素决定，而不是默认撑满父元素） 没有任何margin合并 脱离文档流
- 副作用 父级没有高度 子盒子浮动 影响下面布局
解决塌陷的问题：手动给 父元素添加高度 clear清除内部和外部浮动 ::before伪类清除 给父元素添加
overflow属性(auto)并结合zoom:1使用
- clear none left right both
- 清除浮动
- 伪元素 clearfix 应该是给浮动元素的父元素添加 clearfix
- .clearfix{ overflow:auto zoom:1 } .clearfix:after{ content:’’ height:0 display:block clear:both }
.clearfix{ zoom:1 } .clearfix:after{ content:’’ height:0 display:block clear:both,visibility:hidden }// IE6,7- 双伪元素清除浮动
.clearfix:before,clearfix:after{ content：''，display:table } .clearfix:after{ clear:both } .clearfix{ *zoom:1 } - .clearfix::before,.clearfix:after{ display:table; content:”空格”} 防止伪元素的外边距折叠 .clearfix::after{ clear:both } 清除浮动
- overflow 清除浮动 父元素 overflow auto/hidden/scroll 子元素 clear :both 缺点 无法显示溢出的部分
- clear 清除浮动 clear:both/left/right
- 解决浮动元素高度不一致，会向一边靠 :nth-child(odd){ clear:left}
- 浮动元素会尽可能的往上靠 清除每行的第一个元素上面的浮动 也就是清除同一排的最左侧的第一个元素的浮动
- 伪元素 clearfix 应该是给浮动元素的父元素添加 clearfix
- float none left right
flexbox 伸缩
- flex-flow:flex-direction | flex-wrap justify-content 头中尾 两端分散 align-items 头中尾 基线 align-content 头中尾 两端分散
- order、flex:grow shrink basis、align-self：头尾中 基线
- 概念
- display:flex inline-flex display:flex(块伸缩容器)|inline-flex(行内伸缩容器)
- 两轴：主轴和侧轴
- 两容器：容器和项目
- 容器 父元素 flex container flex-flow:flex-direction | flex-wrap justify-content align-items align-content
- flex-flow:flex-direction | flex-wrap 默认值为row nowrap
- flex-direction: row | row-reverse | column | column-reverse; 定义了伸缩项目放置在伸缩容器的方向
- flex-wrap: nowrap | wrap | wrap-reverse; 伸缩容器里是单行还是多行显示
- 对齐 justify-content align-items align-content 多根轴线的对齐方式
- justify-content 主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between (平均分布) | space-around;（平均分布，两端保留一半的空间） 头中尾 两端分散
- align-items 交叉轴上如何对齐 align-items: flex-start | flex-end | center | baseline | stretch; 头中尾 基线
- align-content 多根轴线的对齐方式 align-content: flex-start | flex-end | center | space-between | space-around | stretch;，
- flex-flow:flex-direction | flex-wrap 默认值为row nowrap
- 项目 子元素 flex-item ： order、flex:grow shrink basis、align-self：头尾中 基线
- order:
<number>定义项目的排列顺序。数值越小，排列越靠前，默认为0。 需要每一个都要设置 显示顺序 - flex: grow shrink basis 放大 缩小 分配 默认值是0（grow），1（shrink）和 auto（basis）。
- flex: 0 1 auto 默认值
- flex: 1; flex:1 1 0% flex:3 —> flex:3 1 0%;
- flex: none | [ <’flex-grow’> 放大比例 <’flex-shrink’> 缩小比例 ? || <’flex-basis’> 分配多余空间 ]
- flex-grow 放大比例
- flex-shrink 项目的缩小比例
- flex-basis 理解为设置宽度 分配多余空间
- align-self 头尾中 基线 align-self: flex-start | flex-end | center | baseline | auto | stretch; 单个子元素对齐方式
- order:
grid 网格 container: grid(template auto) gap place-items/content item: grid-area place-self
row column cell container / item 、grid line 网格线 (n行有n + 1根水平网格线，m列有m + 1根垂直网格线)、网格轨道 grid-track、网格区域 area 网格线是从1开始的 坐标原点从（1,1）开始 1,1 ~ n+1,n+1 两个行线 和 两个列线确定一个 网格区域 坐标
容器 container
grid{ grid-template内(rows,columns,areas[搭配grid-area]) grid-auto(rows,columns,flow)} row(column)-gap/gap 间距 place-items(start | end | center | stretch;)/content(start | end | center | stretch | space-around | space-between | space-evenly;)fr 容器内剩余空间的分数比
max-content和min-content就是相对于元素自身内容块进行计算的属性值
- min-content顾名思义是根据元素内容来设置的最小宽度大小
fit-content，它实际上是min(maximum size, max(minimum size, argument))的简写，表示将元素宽度收缩到内容宽度，使用这个函数后会尽量不占用多余的空间。如果内容的宽度小于fit-content中设置的长度，那么实际子元素宽度是内容宽度。如果内容宽度超出了fit-content中设置的长度，那么实际子元素宽度就是设置的那个长度fit-content(200px) 指定固定的宽度 不占用多余空间
auto-fit 有空余空间 平均分配给所有的子元素
auto-fill 自动创建空白的列
place-item 所有单元格的对齐方式
place-content 整个项目容器的对齐方式
place-self 某个单元格里面的对齐方式
display:grid | inline-grid
grid 行列布局内外 属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
grid-template 行列内 列宽 行高 grid-template-rows、grid-template-columns、grid-template-areas
grid-template rows/columns 行 列
- repeat(次数,值) 重复 repeat(3,100px 200px 300px)
- auto-fit 自动填充
- repeat + auto-fit——固定列宽，改变列数量
- fr 片段
- minmax(最小值,最大值) 范围 1fr 2fr minmax(100px,3fr)
- repeat(auto-fit, minmax(200px, 1fr)) 去掉右侧空白
- auto 浏览器自己决定长度
- fit-content(40%) 指最大宽度不超过屏宽40%
- repeat+auto-fit+minmax-span-dense 解决空缺问题 grid-auto-flow: row dense;
- 设置网格线 [linename] 100px [linename2 linename3]
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
grid-template-areas 定义区域名 area 由单个或多个单元格组成 + grid-area使用
- . 表示不需要
- 区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
header-start header-end- grid-template-areas 定义
- 类名：{ grid-area: h; } 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18grid-template-areas: "header header header"
"main main sidebar"
"footer . footer";
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f"; .header {
grid-area: h;
}
.menu {
grid-area: m;
}
.content {
grid-area: c;
}
.footer {
grid-area: f;
}
grid-auto 行列外 grid-auto-rows、grid-auto-columns、grid-auto-flow
- grid-auto-flow 方向 网格容器放置的顺序 放置顺序是”先行后列”
- column(dense) row(dense) 当我们在网格定义的区域外放置子元素时，或因子元素数量过多而需要更多的网格线时，布局算法就会自动生成隐式网格。默认情况下这些隐式网格的大小也会随着内容尺寸不同而变化，而我们可以利用属性
grid-auto-rows和grid-auto-columns来控制隐式网格的大小
- column(dense) row(dense) 当我们在网格定义的区域外放置子元素时，或因子元素数量过多而需要更多的网格线时，布局算法就会自动生成隐式网格。默认情况下这些隐式网格的大小也会随着内容尺寸不同而变化，而我们可以利用属性
- grid-auto-columns | grid-auto-rows 超出显示网格的行列 作用是网格单元格不够的时候创建隐式的网格放置grid-item。自动创建的多余网格的列宽和行高。也就是原本放置在网格中的元素，指定在网格以外的区域
- 隐式和显式网格：显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列
- grid-auto-flow 方向 网格容器放置的顺序 放置顺序是”先行后列”
grid-gap 间距(旧删除了) => gap: row-gap column-gap 行间距 列间距
对齐方式
place-items: justify-items align-items 容器单元格 也就是所有单元格 container里面的item （项目）网格内单元的对齐方式
place-items 每个itme: <align-items> <justify-items>;设置单元格的水平和垂直位置 start | end | center | stretchjustify-items: start | end | center | stretch;水平位置align-items: start | end | center | stretch;垂直位置
place-content:justify-content align-content 容器整个内容区域 整个container（容器）的位置 start | end | center | stretch | space-around | space-between | space-evenly;
place-content 整个container: <align-content> <justify-content>justify-content: start | end | center | stretch | space-around | space-between | space-evenly;（左中右）align-content: start | end | center | stretch | space-around | space-between | space-evenly;（上中下）- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
项目 item
grid-area: (grid-column、grid-row)、place-self: <align-self> <justify-self>; 2个- 项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线
grid-column、grid-row 网格线项目单元格放置位置 定位 调整子元素的大小作用在子元素上 将其子元素放入这个 grid(网格) 中 通过确定四条边位于网格线的区域 网格线 grid-column 3/4 左网格线- grid-column 设置左右边框 : grid-column-start 左边框所在的垂直网格线 grid-column-end 右边框所在的垂直网格线
- 数字、span：grid-column: 1 / 3; 1 / span2;
- 网格线的名字搭配 grid-template-area：grid-column-start: header-start;
- grid-row 设置上下边框 : grid-row-start 上边框 grid-row-end 下边框
- 网格线的名字：grid-row-start: header-start;
- grid-column 设置左右边框 : grid-column-start 左边框所在的垂直网格线 grid-column-end 右边框所在的垂直网格线
grid-areagrid-area：grid-row grid-column 属性还可用作 顺序 grid-row-start、grid-column-start、grid-row-end、grid-column-end 指定项目放在哪一个区域 指定项目位置- grid-row: 1 / 3 grid-column 2 / 5 == grid-area: 1/2/3/5;
place-self: <align-self> <justify-self>;项目单元格内容 也就是单一单元格- justify-self: start | end | center | stretch;
- align-self: start | end | center | stretch;
columns 多列 作用：创建多个列对文本进行布局 就像报纸一样 colums \ column: grap rules span fill
- column：grap 列间距 rules 列边距 span 子元素跨列效果 fill 列高效果
- 列数 grap 列间距 rules 列边距
span 子元素跨列效果 fill 列高效果 - columns属性：columns-width 列宽度 columns-count
columns: <column-width> | <column-count> 列宽 和 列数- column
coloumn-rule <column-rule-width> | <column-rule-style> | <column-rule-color>- column-gap 列间距
- column-span 设置标题 column-span:none | all
- column-fill 每列的列高效果 如何填充列 auto 默认值 随内容变化自动变化| balance 各列的高度将会根据内容最多的一列的高度进行统一
- 定义分隔符出现位置（分列符）
- break-after break-before break-insert
- page-break-after page-break-before page-break-after
单列布局
- header,content和footer等宽的单列布局
- header与footer等宽,content略窄的单列布局
1 | |
两列布局
- float:left and right
- position
- 浮动+普通元素的margin
两列自适应布局
- 两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式
- float(子)+overflow:hidden（子）:主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。
- flex 布局
1 | |
三栏布局
两端自适应，中间定宽
中间列自适应宽度，旁边两侧固定宽度
- 圣杯布局：比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。
- center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
- 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)
- 双飞翼布局：同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
1 | |
等高布局
等高布局是指子元素在父元素中高度相等的布局方式
利用正padding+负margin
1 | |
- 绘制三角形
1 | |
选择器
- css 权重 和 超越
!important- 内联 > (#) ID > 类、伪类、属性选择 > 标签、伪元素选择器 > 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）
- !important > style > # > . > tag
background-color: orange !important;- 权重如何都取有
!important的属性值。但是宽高有例外情况，由于宽高会被max-width/min-width覆盖，所以!important会失效。
- 权重如何都取有
- css 权重 和 超越
盒子
- margin外边距
margin属性并不会参与盒子宽度的计算，但通过设置margin为负值，却能改变元素水平方向的尺寸：
- border 边框
border-style属性的值有none/solid/dashed/dotted/double
- padding 内边距
- content 内容
- 盒子大小
- w3c 盒模型(显示的大小) = content(width/height) + padding + border
- 元素的宽度计算为
content的宽度。- width = content width
- 元素的宽度计算为
- ie 盒模型(显示的大小) = width(height)
- 元素的宽度计算为
border+padding+content的宽度总和。- width = border + padding +content
- 元素的宽度计算为
- w3c 盒模型(显示的大小) = content(width/height) + padding + border
- margin外边距
盒模式 box-sizing 规定容器元素的最终尺寸计算方式
box-sizing: content-box|border-box|inherit:box-sizing
- content-box 内容盒子 设置 width/height 设置的是content的宽高
- 实际宽度和高度 = width[内容的宽度 content ] + (padding + border) * 2
- border-box 边框盒子 设置 width/height 设置的是实际显示的宽高，content= width - padding
- 实际宽度或高度 = width/height
- content-box 内容盒子 设置 width/height 设置的是content的宽高
内容的宽度或高度(content) vs 显示的宽度或高度(width hegiht)
content-box（向外膨胀，破坏DOM结构） (w3c标准盒模型) 默认值，设置 border、padding 会增加元素 width与 height 的尺寸，即 border 与 padding 相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。
- 属性width,height只包含内容content，不包含border和padding。
- 实际显示宽度 = width[内容的宽度 content ] + (padding + border) * 2
- 实际显示高度 = height [内容的高度 content] + (padding + border) * 2
border-box （向内缩小）IE模型（IE盒模式、怪异模式）指定盒模型为 IE模型（怪异模式），设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。即空间还是这个空间，只是将部分空余的地方，转变成了其他空间用法而已，为内部转变。
- width(实际显示宽度) = width(的值)
- height(实际显示高度) = height(的值)
换句话说，就是w3c盒 设置的 width 和 height 不是实际的width 和 height ,而是content的width和height 要 加上 padding 和border，ie盒模型 设置盒子的width 和 height 就是 实际的宽度和高度
- w3c 盒 width/height （content的宽度和高度）
- ie 盒 width/height (实际显示的宽度和高度)
注意点
- 设置
box-sizing:border-box当 padding 值大于 width/2 时 实际显示的宽度就会被撑开
- 设置
1 | |
- 块级元素和内联元素
- 块级元素
display:block：单独撑满一行的元素- div、ul、li、table、p、h1
- 内联元素
display:inline-block：行内元素，指只占据它对应标签的边框所包含的空间的元素- span、a、em、i、img、td
- 块级元素
- 布局
- table
- float
- position
- flex
- 项目：
- 容器：
- guid
- 布局
- height min-height和max-height
- height 高度
- min-height 最小高度（不超过最小高度）
- max-height 最大高度（不小于最大高度）
- min-height （最小 不能低于）vs height 谁大取谁
- max-height（最大 不能小于） vs height 谁小取谁
- min-height vs max-height 取min-height
1 | |
- line-height vertical-align
- px em rem
- px 像素
- em 相对长度
- rem 相对单位（root em，根em） 对于需要适配各种移动设备，使用rem
水平
子 inline-block + 父 text-align
优缺点
- 优点：兼容性好，甚至可以兼容ie6、ie7
- 缺点：child里的文字也会水平居中，可以在.child添加text-align:left;还原
子 table + margin
- 优点：只设置了child，ie8以上都支持
- 缺点：不支持ie6、ie7,将div换成table
父 flex 子 margin:0 auto
- 缺点：低版本浏览器(ie6 ie7 ie8)不支持
竖直
父 table-cell vertical-align 通过将父框转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
水平+ 竖直
使用 inline-block+text-align table-cell+vertical-align
- 父 text-align table-cell+vertical-align
- 子 inline-block
多列布局
定宽 + 自适应
- float+overflow:hidden
- float+margin
- float+margin 改良版 在1）的基础之上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。
1
2.right-fix float:right width:100% margin-left:-100px
.right- table 通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局 先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框display:table-cell，最后设置左框width、padding-right
- flex
两列定宽+ 一列自适应
- 先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden
不定宽 + 自适应
- float +overflow
- 原理：这种情况与两列定宽查不多。
- 用法：先将左框设置为float:left、margin-right，再设置右框overflow: hidden，最后设置左框中的内容width。
- table
- 原理：通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。
- 用法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width
- flex
- float +overflow
两列不定宽+ 一列自适应
- 先将左、中框设置为float:left、margin-right，再设置右框overflow:hidden，最后给左中框中的内容设置width。
等分布局
- float先将父框设置为margin-left: -*px，再设置子框float: left、width: 25%、padding-left、box-sizing: border-box
- table 先将父框的修正框设置为margin-left: -*px，再设置父框display: table、width:100%、table-layout: fixed，设置子框display: table-cell、padding-left。
- flex flex:1
定宽+自适应 + 两块高度一样
- float
- 原理：通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。
- 用法：将父框设置overflow: hidden，再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px，最后设置左框float: left、width、margin-right，右框overflow: hidden。
- table
- 原理：将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。
- 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框为display:table-cell，最后设置左框width、padding-right。
- flex
- display
- 原理：通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。
- 用法：将父框设置为display: -webkit-box、width: 100%，再设置左框width、margin-right，最后设置右框-webkit-box-flex: 1。
全屏布局
浏览器私有前缀
兼容老版本的写法 新版本的浏览器无法添加
-moz- firefox -ms- ie -webkit safari chome -o- Opera
精灵图 雪碧图 小的背景图片使用
1 | |
- 圣杯布局: 1. 两列定宽、中间自适应 2. main排在第一位 中左右
- position 指定三列的位置 container 设置releative main left right
- float
- wrapper {padding: 0 100px 0 100px;}
- .col {position: relative; float: left;}
- left margin-left: -100%; left: -100px; right margin-left: -100px; right: -100px;}
- .clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
- flex 三列布局 父 flex-direction: column flex 子 两列定宽度 中间 flex：1 左 order:-1
- grid
- header+main+nav+aside+footer
- 父 grid-template: auto 1fr auto / 200px 1fr 200px 子 header、footer grid-column: 1/4 、main，nav，aside grid-row 2/3 、main grid-column 2/3 nav 1/2 aside 3/4
- grid-tempalate-areas// grid-area
- 双飞翼布局 中(添加main-wrap)左右 col不需要position 和 main padding // main设置固定值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
<div class="header">header</div>
<div class="wrapper clearfix">
<div class="main col">
// 添加一层
<div class="main-wrap">main</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</div>
<style>
// 不需要position 和 padding
.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
</style>
- Sticky Footer
- flex main flex 1 0 auto
- grid grid-template-rows: auto 1fr auto;
- 12列布局
- grid grid-temp;ate-columns :repeat(12,1fr)
- 均分列 对列做均分布局，最为常见的就是在移动端的底部Bar
- flex flex:1
- grid grid-template-columns: repeat(3, 1fr);
- 解决flex grid 缺陷 在Flex容器或Grid容器显式设置一个min-width（或min-inline-size）
- 等布局
- 等高布局 高度一样
- 父 overflow:hidden 子 left和right padding-bottom: 9999px;margin-bottom: -9999px; left float:left right overflow:hidden
- table 父 display:table 子 table-cell
- flex flex aligin-items:stretch
- grid grid-template-columns:20vw 1fr 20vw height:100%
- 等宽布局 宽度一样
- 父 margin-left:-px column float:left
- 父 display:table table-layout:fixed 子 table-cell
- flex colum:flex:1
- 多列布局
- 多列定宽+单列自适应
- left float:left width right overflow:hidden
- 父 table table-layout:fixed 多列 display:table-cell
- 父 flex 多列 width 单列自适应 flex:1
- 多列不定宽，单列自适应
- 多 float left 单 overflow:hidden
- 多行布局
- 行布局
- 三行布局
- 多行布局
media 媒体查询
设置多套的css
- basic.css mobile desktop
响应式 自适应 流体网格
弹性图片
媒体类型 Media Type all screen print tv
px规格 0~320px ~550px ~768px ~960px
html 默认font-szie:16px
引用方法 link media=“screen” xml <style>@import url(“.css”) print.css @media screen{ }
orientation:portrait 竖屏 | landscape 横屏 @media only screen and (orientation:landscape)
媒体特征 Media Query
media 媒体查询 根据设备的尺寸，查询适配的样子
- @media 媒体类型 and（媒体特征 min-width：480px;） {}
- @media screen and (min-width:600px) and (max-width:900px){}
- max、min-width 最大、小宽度 and 和 not 排除 only 指定某种特定的媒体类型 and 多个媒体使用 max-devide-width 设备屏幕的输出宽度Devide Width
meta name=viewport
- content = width height initial-scale 初始缩放比例 minimum-scale 允许用户缩放到的最小比例 maximum-scale 允许用户缩放到的最大比例 user-scalable 用户是否可以手动缩放
浏览器兼容性
- -moz-(FireFox) -webkit-(Chrome) -ms-(IE) -o-(Opera) -khtml-
技巧
css hack 浏览器厂商 用来增强自已的竞争
两端对齐 text-align:justify
文本溢出 text-overflow:ellipsis overflow:hidden
首行缩进 text-indent:2em
position:fixed 降级 父 transform fixed 会降级成absolute
背景图片可以响应式调整缩放大小
- bg-size:container/cover
1px 细线
- box-shadow: inset 0px -1px 1px -1px #d4d6d7;
- 使用伪类 + transform
平滑滚动
html scroll-behavior:smooth !import;自定义滚动条
- -webkit-scrollbar
- -webkit-scrollbar-thumb
禁用用户选择
- user-select:none
竖排文字
- writing-mode:tb-rl
- transform:rotate(-180deg)
固定到底部
- flex-grow:auto
悬停放大图片
- 固定的width宽和height高。然后我们必须给予这个元素overflow: hidden属性。让图片放大的时候不会超出这个div元素的宽高