![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS布局
zhongbusi
这个作者很懒,什么都没留下…
展开
-
Flex弹性布局
概述Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。这意味着,现在就能很安全地使用这项功能。作用在flex容器上作用在flex子项上flex-directionorderflex-wrapflex-growflex-flowflex-shrinkjustify-contentflex-basisalign-itemsflexalign-contentalign-self属性flex-d原创 2020-07-17 02:32:33 · 232 阅读 · 0 评论 -
Grid网格布局
概述Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。作用在Grid容器上作用在Grid子项上grid-template-columnsgrid-column-stratgrid-template-rowsgrid-column-endgrid-template-areasgrid-row-startgrid-templategrid-row-endgrid-column-gapgrid-columngrid-row-gapgrid原创 2020-07-16 00:37:17 · 237 阅读 · 0 评论 -
CSS圣杯布局
代码如下所示:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>圣杯布局</title> <style> * { margin: 0; padding: 0; } html,body { height: 100%; .原创 2020-07-12 19:28:42 · 154 阅读 · 0 评论 -
CSS双飞翼布局
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼布局</title> <style> .left{转载 2020-07-12 14:59:12 · 98 阅读 · 0 评论 -
CSS等高布局(margin与padding抵消)
等高布局概念等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。下面将介绍的是:伪等高(margin与padding)真等高()margin与padding实现伪等高1、使用正值的padding-bottom把元素撑开;2、用负值的margin-bottom把两个元素的下边界收回原来的位置。3、父元素用overflow:hidden;把超出部分隐藏。<style> #fu{原创 2020-07-11 23:43:45 · 1003 阅读 · 0 评论