Internship5
今天所学到的知识
-
定位(position)
如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。
定位是难点,一定要学好为什么要用定位?
那么定位,最常运用的场景再那里呢?
如果用标准流或者浮动,实现会比较复杂或者难以实现,此时我们用定位来做。
元素的定位属性
边便宜
top 顶端偏移量
bottom 低部偏移量
left 左则偏移量
right 右侧偏移量
也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等等
定位模式
在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:
选择器{position:属性值;}
position属性的常用值
值 描述
static 自动定位(默认值)
relative 相对定位(移动过后,继续占着原本位置,不脱标,相对于自己)
absoulte 绝对定位 (脱标,移动过后,不占位置,相对于定位父级)
fixed 固定定位(脱标,固定在设置过的位置上,相对于浏览器移动)
父级没有定位
若所有父元素都没有定位,以浏览器为准对齐(document文档)。
父级有定位
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
**子绝父相 **
非常重要,是我们的口诀
首先,绝对定位是将元素依据最近的已经定位绝对,固定,相对的父元素(祖先)进行定位。
也就是说,子级绝对定位,父级只要是定位(除static静态定位)就可以,也就是说,子绝父绝也行
那么,为何父级要求时相对定位呢?
子级绝对定位,父级就用相对定位(最优解),因为子级时绝对定位不占位置,就可放在父级的任何位置
因为父盒子在布局时,需要占有位置,因此父级要相对定位
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可, 但是对于绝对定位就无效了
水平居中的算法:
1.left 50% ,父盒子的一半大小
2.再有外边距负的一半值即可
叠放次序(z-index)
当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。
1.默认值是0,取值越大,定位元素越居上
2.取值相同,看书写顺序
3.数字没有单位
4.只有定位才有该属性,浮动,标准流,静态定位都没有该属性
定位模式转换
跟 浮动一样, 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式,
元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。
display 显示
display 设置或检索对象是否及如何显示。
none 隐藏功能
block 除了转换成块级元素外,还有显示元素功能
特点:隐藏之后,不保留位置
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点:隐藏之后,继续保留位置
overflow 溢出
/overflow: visible;/ /默认值,超出显示/
/overflow: auto;/ /自动 超出显示滚动条,不超出不显示滚动条/
/overflow: scroll;/ /一直显示滚动条/
overflow: hidden; /不显示超出的内容,超出的内容隐藏/
CSS用户界面样式
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
- 我是小白
- 我是小手
- 我是移动
- 我是文本
轮廓 outline
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。
最直接的写法是 : outline: 0
防止拖拽文本域resize
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
右下角可以拖拽:
右下角不可以拖拽:
vertical-align 垂直对齐
以前我们讲过让带有宽度的块级元素居中对齐,是margin: 0 auto;
以前我们还讲过让文字居中对齐,是 text-align: center;
但是我们从来没有讲过有垂直居中的属性, 我们的妈妈一直很担心我们的垂直居中怎么做。
vertical-align 垂直对齐, 这个看上去很美好的一个属性, 实际有着不可捉摸的脾气,否则我们也不会这么晚来讲解。
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片和表单等。
图片和文字对齐
所以我们知道,我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
去除图片底侧空白缝隙
有个很重要特性你要记住: 如果一个元素没有基线,比如图片或者表单等行内块元素,则他的底线会和父级盒子的基线对齐。 这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决的方法就是:
-
给img vertical-align:middle | top等等。 让图片不要和基线对齐。
-
给img 添加 display:block; 转换为块级元素就不会存在问题了。
溢出的文字隐藏
word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
text-overflow 文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记(…)标示对象内文本的溢出
clip : 不显示省略标记(…),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(…)