码迷,mamicode.com
首页 > 其他好文 > 详细

随笔3

时间:2019-12-16 19:22:14      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:flex   超出   取消   其他   包含   position   padding   mil   不同的   

让一个不定宽高的 DIV,垂直水平居中?

1.使用Flex

  只需要在父盒子设置:display: flex; justify-content: center;align-items: center;

2.position 几个属性的作用

  position 的常见四个属性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。

     **static:默认位置。**在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用Position:static取消继承,即还原元素定位的默认值。设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。
     **relative:相对定位。**相对定位是相对于元素默认的位置的定位,它偏移的 top,right,bottom,left 的值都以它原来的位置为基准偏移,而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。
     **absolute:绝对定位。**设置为 absolute 的元素,如果它的 父容器设置了 position 属性,并且 position 的属性值为 absolute 或者 relative,那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性,那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
     **fixed:固定定位。**位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3.浮动相关知识

float属性的取值;left:元素向左浮动;right:元素向右浮动;none:默认值。元素不浮动,并会显示在其在文本中出现的位置。

浮动的特性:浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则:

浮动元素在浮动的时候,其margin不会超过包含块的padding。PS:如果想要元素超出,可以设置margin属性
如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。
如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素
浮动元素会尽可能地向顶端对齐、向左或向右对齐
重叠问题

行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上
clear属性clear属性:确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。取值:left、right、both

随笔3

标签:flex   超出   取消   其他   包含   position   padding   mil   不同的   

原文地址:https://www.cnblogs.com/wyee/p/12050631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!