![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS零散知识
那个小屋
这个作者很懒,什么都没留下…
展开
-
Flex布局(弹性盒子布局)
Flex布局(弹性盒子布局)开启 flex 布局:display:flex;行内元素开启flex布局:display: inline-flex;容器属性flex-direction 决定主轴方向flex-wrap 定义项目在一条主轴上排列不下该如何排列flex-flow 是flex-direction和flex-wrap的复合写法justify-content 定义项目在主轴上的对齐方式align-items 定义项目在交叉轴上的对齐方式align-content 定义多条轴线的对齐原创 2020-10-03 22:23:51 · 250 阅读 · 0 评论 -
盒子模型
盒子模型标准盒模型 box-sizing: content-box;怪异盒模型 box-sizing: border-box;标准盒模型:元素style的width等于**内容区域**的宽度怪异盒模型:元素style的width等于**内容区域+padding+border**的宽度flex弹性盒模型column多列布局答:其实我们常用的是标准盒模型,它的width是指的内容宽度,盒子的宽高是内容+padding+border,但是我在做项目的是时候给盒子加border就会让盒子变大要重新计算原创 2020-09-18 12:22:27 · 120 阅读 · 0 评论 -
CSS3过渡、动画和形变
CSS3过渡和动画详情:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html过渡transition.item { /*transition: 过渡时间 延迟时间 目标属性 过渡速度;可用‘,’同时指定多个属性变化*/ transition: 1s 1s height linear, 1s width;}单独定义: transition-property: height; transitio原创 2020-09-18 12:13:42 · 132 阅读 · 0 评论 -
两栏布局和三栏布局
两栏布局和三栏布局两栏布局<div class="wrapper"> <div class="left">我是文字测试君</div> <div class="right">我是文字测试君</div></div>1.浮动方法float给固定宽度的一方设置浮动,给自适应的一方设置100%宽度值,用浮动控制左右宽固固定或自适应<style> .left {原创 2020-09-18 00:42:31 · 910 阅读 · 0 评论 -
BFC
BFCBFC 定义BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。哪些元素会生成BFC?根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverf原创 2020-09-17 23:28:36 · 63 阅读 · 0 评论 -
清除浮动 clear float
清除浮动 clear float清除浮动.wrapper::after { content: ''; display: block; clear: both; }清除浮动和边框塌陷.wrapper::after,.wrapper::before { content: ''; display: block; }.wrapper::atter { c原创 2020-09-17 21:19:55 · 545 阅读 · 0 评论