![](https://img-blog.csdnimg.cn/52f95abdfbdc440ab96e665616ddb672.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS布局
文章平均质量分 92
CSS布局
Vanghua
这个作者很懒,什么都没留下…
展开
-
清除浮动的方法
浮动副作用介绍:<div style="width: 250px; background: blue;"> <div style="width: 50px; height: 50px; background: red; display: inline-block; float: left;"></div> <div style="width: 50px; height: 50px; background: red; display: inline-原创 2022-02-01 13:11:44 · 388 阅读 · 0 评论 -
消除行内块元素水平间隙的方法
水平间隙介绍:水平间隙一般是指行内块元素连续排列造成的水平间隙,示例如下:<div style="width: 250px; height: 100px; background: blue;"> <div style="width: 50px; height: 50px; background: red; display: inline-block;"></div> <div style="width: 50px; height: 50px; b原创 2022-02-01 13:10:27 · 1298 阅读 · 0 评论 -
BFC和IFC
参考&翻译:https://www.w3.org/TR/CSS2/visuren.html 可视化盒模型1.BFC1.1 BFC概念:BFC: Block Formatting Context 块级格式化上下文1.2 BFC触发:在某个元素上设置以下属性,那么该元素内部将成为一个BFC空间overflow属性不是visible,通常设置为autofloat属性不是noneposition属性不是relative和staticdisplay为inline-block或table-c原创 2022-02-01 13:08:56 · 586 阅读 · 0 评论 -
水平居中和垂直居中方法
参考并稍作修改:https://juejin.cn/post/6844903799446831117#heading-5https://juejin.cn/post/6844903474879004680#heading-0https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content1.水平居中1.行内元素的水平居中方法: 在行内元素的父元素上设置text-align: center;2.块级元素的水平居中方法: 在块级元素上设置m原创 2022-01-28 20:50:45 · 4198 阅读 · 0 评论 -
Grid布局练习-汇总
Grid布局练习-汇总骰子布局骰子布局/*网格外层容器*/.container{ width: 90px; height: 90px; display: grid; grid-template-rows: repeat(3, 30px); grid-template-columns: repeat(3, 30px); background-color: grey; }<div class="container" style="grid-templa原创 2021-03-17 17:50:49 · 640 阅读 · 0 评论 -
Grid 布局
Grid 布局Grid布局思想父元素属性(1)==display==:(2)==grid-template-rows和grid-template-columns==子元素属性注:学习来源:菜鸟教程,MDN,阮一峰的博客Grid布局思想注:这个部分和Flex布局总结一样,推荐去看阮一峰的博客(图画的好),就不盗图了。阮一峰的Grid布局父元素属性父元素上有18个属性display,grid-template-rows,grid-template-columns,grid-template-area原创 2021-03-17 17:35:44 · 319 阅读 · 0 评论 -
Flex布局练习-其它布局
Flex布局练习-其它布局1.圣杯布局2.输入框布局学习来源:阮一峰的flex布局实战1.圣杯布局<style type="text/css"> /*圣杯容器*/ .HolyGail{ height: 100px; width: 120px; display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; flex-direction: column; } /*头部导航原创 2021-03-08 15:46:45 · 311 阅读 · 0 评论 -
Flex布局练习-网格布局
Flex布局练习-网格布局学习来源:阮一峰的flex布局实战网格布局<style type="text/css"> /*设置最外层父元素*/ .div1{ width: 100px; height: 100px; background-color: grey; display: flex; display: -moz-flex; display; -webkit-flex; } /*设置显示字体*/ div{ font-size原创 2021-03-08 15:17:35 · 237 阅读 · 0 评论 -
Flex布局练习-骰子布局
flex布局练习--骰子布局骰子布局(1)单项目(2)双项目(3)三项目学习来源:阮一峰的flex布局实战骰子布局<style type="text/css"> /*div1是父级元素*/ .div1{ height: 90px; width: 90px; background-color: grey; display: flex; display: -moz-flex; display: -webkit-flex; ove原创 2021-03-08 15:00:13 · 338 阅读 · 1 评论 -
Flex 布局
Flex布局1.CSS flex布局属性启用flex布局(1)==display==容器上的属性(1)==flex-direction==(2)==flex-wrap==(3)==flex-flow==(4)==justify-content==(5)==align-items==(6)==align-content==子元素上的属性(1)==order==(2)==flex-grow==(3)==flex-shrink==(4)==flex-basis==(5)==flex==(6)==align-sel原创 2021-03-08 11:09:31 · 1165 阅读 · 0 评论