![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
ASIA_技术
习惯优秀,就会更优秀。
专注 专注 专注!!!
展开
-
CSS3 系统学习
边框:圆角:border-radius:4px;推荐使用4px,表示圆角的半径;如果设置为50%,元素就有可能是椭圆或者圆,取决元素的宽和高最多可以有4个值分别确定四个角的圆角,border-radius: 15px/50px;椭圆盒阴影:box-shadow: 10px 10px 5px 5px #888;阴影实现原理:构造一个元素的影子,通过平移影子的位置来实现的第一个...原创 2019-09-02 18:10:10 · 561 阅读 · 0 评论 -
CSS3 2D 3D 过度与动画
2D使用transform属性,结合2D变换方法下面代码是基本模板div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */}<body> &l...原创 2019-09-10 18:38:34 · 147 阅读 · 0 评论 -
BFC理解与应用
什么是BFC?块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。个人理解就是BFC的触发会让盒子形成封闭空间与外部元素布局互不影响。BFC触发条件:html根元素(其实BFC就是构造了一个和根元素类似的盒子) 浮动元素:float 除 none 以外的...原创 2019-09-12 14:58:30 · 209 阅读 · 0 评论 -
Flex 弹性盒子布局理解
认知和准备解决问题:弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间任何元素都可以指定为Flex布局,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效这张图来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html设置为flex...原创 2019-09-17 14:58:11 · 517 阅读 · 0 评论