CSS
自在飞花轻似梦paofu
远赴人间惊鸿宴,一睹人间盛世颜
展开
-
Position定位(fixed,absolute,relative),Float
position有3个属性是我们平常用的最多的,即fixed,absolute,relative。1、absolute,绝对定位,是相当于父元素(或者父父元素)的定位,不遵循文档流;也不占据空间。后来者居上,后边的元素会被顶到它使用绝对定位之前的位置。2、relative,相对定位,是相当于定位之前自身的位置,遵循文档流,定位之前的区域不会被顶替,还在原来占据着位置。定位之后的区域,不占据任何...原创 2019-04-30 21:23:16 · 2711 阅读 · 0 评论 -
image居中、div嵌套div上下左右居中
1、如何让图片居中放在div中,设置div:margin:0 auto;,这样div左右居中,包含在里面的图片也会随之居中。 <head> <meta charset="utf-8"> <title>居中</title> <style type="text/css"> div{ wid...原创 2019-04-30 23:01:47 · 3753 阅读 · 0 评论 -
关于display:flex的使用
未使用display:flex<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-05-27 13:29:26 · 358 阅读 · 2 评论 -
flex弹性布局的应用一之属性组合
这四种属性由不同的属性值进行组合,会产生不同的变化,很是奇妙,学会如何运用会有很大帮助。我写的是我经常用的几种组合方式,供大家借鉴。flex-direction的属性值:https://www.runoob.com/cssref/css3-pr-flex-direction.htmljustify-content的属性值:https://www.runoob.com/cssref/css3-p...原创 2019-06-14 20:04:01 · 386 阅读 · 0 评论 -
flex弹性布局的应用二之属性组合
这四种属性的组合方式是经常用到的。主要以 flex-direction: column为例一、组合方式1 display: flex; //弹性布局,伸缩布局 flex-direction: column; //弹性盒元素的方向,列,即垂直方向 justify-content: space-around; //主轴(水平)方向的对齐方式 align-items: center; //侧...原创 2019-06-14 20:25:06 · 167 阅读 · 0 评论 -
flex弹性布局的应用三 之flex-warp属性
关于flex-warp属性的使用1、使用方式display: flex; //弹性盒子,默认弹性盒元素的方向是横向flex-wrap: wrap; //在必要时换行align-content: stretch; //堆栈排列,控制wrap换行2、使用方式display: flex;justify-content: space-between;align-items: cente...原创 2019-06-14 21:06:48 · 7067 阅读 · 5 评论 -
flex弹性布局的应用四 之flex属性
flex属性可理解为 :子元素的长度主要代码html <div class="content"> <div class="c-1">1</div> <div class="c-1">2</div> <div class="c-1">3</div> <div class="c-1">...原创 2019-06-14 21:18:03 · 170 阅读 · 0 评论 -
css之height
别看height简单,但是用错了会造成内容区域的乱套,说说自己遇到的两种情况1、根据750x1334设计的图,去做页面,给了整体一个height:100%,然后在写内容的时候,发现上边写的内容被下边的给“顶”了,然后看到上边的内容不全了,这是因为内容区的高度大于100%,不得不覆盖一部分以实现整体的100%。2、pc端页面。某一个div设置了450px的高度,但是div内容有一部分缺少了,还跟...原创 2019-07-11 11:26:16 · 109 阅读 · 0 评论