布局
文章平均质量分 50
绝世唐门三哥
改变世界的程序猿@三哥
展开
-
Vue---elementui的动态合计行,根据某个数据长度来合计行
【代码】Vue---elementui的合计行动态根据某个数据长度来合计。原创 2022-08-23 17:30:14 · 872 阅读 · 0 评论 -
CSS------CSS样式集合地,总结小片段有用就拿走
1. 推荐的字体font-family:font-family: Arial, Simhei, "黑体", sans-serif !important;原创 2022-03-17 14:01:01 · 115 阅读 · 0 评论 -
布局------最详细的盒子居中方式:水平竖直方向都居中;
本篇将学习到以下知识点: 盒子水平竖直居中的方式 盒子水平竖直居中的方式方法1:子盒子宽度和高度已知的。思路:给父元素相对定位给子元素绝对定位left: 50%;top: 50%;margin-left: 负的宽度一半。margin-top: 负的高度一半;<!DOCTYPE html><html> <head>...原创 2018-12-30 23:07:21 · 869 阅读 · 0 评论 -
布局------grid(二维网格)布局篇
CSS Grid 网格布局一、概述1. 网格布局(Grid)是将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局2. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。3. Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。二、基本概念2.1 容器和项目采...原创 2019-12-13 15:16:59 · 1225 阅读 · 0 评论 -
布局------flex弹性布局(一维)
简单说就是:只能控制一个方向(vertical 或者 horizontal)一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。二、基本概念...原创 2019-12-13 11:31:51 · 407 阅读 · 2 评论 -
布局------定位布局篇
什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式定位方式 参考系 是否脱离文档流 相对定位 自身原有位置 否 绝对定位 最近’‘定位’'父级 是 固定定位 文档窗口 是 二.相对定位参考系: 自身原有位置position: relative ==> 打来了四个定位方向1. top | bo...原创 2019-12-13 09:43:14 · 232 阅读 · 0 评论 -
布局------等高布局篇
等高布局:(自适应)第一种:采用table table-cell即可 #container { /* 表格的单元格默认是等高的 */ display: table; } .inner { display: table-cell; width: 300px; } .inner...原创 2019-12-13 09:35:51 · 213 阅读 · 0 评论 -
布局------等分布局篇(宽度等分)
等分布局:(自适应)第一种:子盒子使用float + width 百分比 #container { height: 300px; } .box { width: 25%; height: 300px; float: left; text-align: center...原创 2019-12-13 09:34:50 · 727 阅读 · 0 评论 -
布局------圣杯和双飞翼布局篇(圣杯------双飞翼)
圣杯布局:(两边定宽,中间自适应): 第一种:flex实现圣杯布局 .w200 { /* 左右定宽 */ width: 100px; height: 500px; background-color: green; } .parent { display: flex; /* f...原创 2019-12-13 09:32:17 · 240 阅读 · 0 评论 -
布局------二、三列布局篇
两列布局:(一边定宽,一边自适应的布局) 第一种:(左边定宽加浮动,右面margin-left:左面盒子宽度) 这一种方式的缺点:应为浮动,所以当右面盒子的子元素中样式含有:clear:both:会影响到左侧的盒子的浮动,高度会被撑起来,既不会到一行了~~~(所以采用该方式实现两列布局时,注意不要用该属性哦) .box:first-child { floa...原创 2019-12-13 09:29:01 · 261 阅读 · 0 评论 -
flex------如何用flexbox控制每行展示3条列表数据?
<style> .box{ overflow: hidden; } ul{ width: calc(100% + 10px); padding: 0; display: flex; flex-wrap: wrap; } li{ list-style:...原创 2019-11-26 11:41:29 · 2229 阅读 · 0 评论