发表于: 2019-10-31 18:56:46
1 765
今天完成的事情:
完成部分任务4,了解float浮动,position定位
明天计划的事情:(一定要写非常细致的内容)
完成任务4 ,了解任务5。了解自适应。
遇到的问题:
文字垂直居中无法用行高实现?
使用padding内边距实现居中。
收获:
Float(浮动)
会使元素向左或向右移动,其周围的元素也会重新排列。
浮动元素脱离标准文档流与其他元素发生重叠,但不会与文字内容发生重叠。
有一个元素a是浮动的,a的上一个元素也是浮动的,a会跟随上一个元素后面(如果一行放不下,会自动换行);
a的上一个元素是标准文档流中的元素,a相对垂直的位置不变
clear 属性指定元素两侧不能出现浮动元素。
这个规则只能影响使用清除的元素本身,不能影响其他元素
浮动元素不占据空间无法撑开父元素=0
方法一:直接为父元素设置高度,方法二:overflow:auto自动溢出
方法三:clear:清除浮动left、right、both(清除左右浮动影响)
Position(定位)
relative:生成相对定位的元素,相对于其正常位置进行定位。
元素的位置通过left、right、top、button属性进行规定,可以通过z-index进行层次分级。
absolute:生成绝对定位元素。使元素脱离文档流,并相对于其包含块进行定位,包含块可能是文档中的另一个元素或者是初始包含块,
元素原先在正常文档流中所占的空间会会被后面元素占据;
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框;
绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。如果都没有定义,那么就相对于整个文档body定位(注意不是相对于浏览器窗口定位)
相对定位一般都是配合绝对定位元素使用
fixed:生成绝对定位元素,相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed
评论