继续
outline
设置轮廓属性,不占用空间
outline-color:轮廓颜色out-style:样式none:默认,不设置样式dotted:点状dashed:虚线solid:实线double:双实线groove:3D凹槽ridge:3D垄状inset:陷入ouset:突出inherit:继承父元素
out-width:轮廓宽带
display visibility
display设置一个元素如何显示,设置none时,元素会被隐藏且不占用空间,但是不会被继承visibility知道一个元素可见还是隐藏,设置为hidden时,元素会被隐藏但空间仍被占用,可以被继承
display属性
block:会独占一行,多个元素会另起一行,可以设置width、height、margin、padding属性inline:不会独占一行,设置width、height属性无效,可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margininline-block:将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。
行内元素和块级元素
- 行内元素
- 设置宽度无效
- 可以设置水平方向的
margin和padding属性,但不能设置垂直方向的padding和margin属性 - 不会自动换行
- 块级元素
- 可以设置宽度
- 设置
margin和padding都可以 - 可以自动换行
- 多个块级元素,默认排列从上到下
position
absolute:生成绝对定位的元素,相对于static定位以外的一个父元素进行定位。
元素的位置通过left、top、right、bottom属性进行规定。
浏览器会递归查找该元素的所有父元素,如果找到了设置position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器的边界进行定位
relative:生成相对定位的元素,相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。relative永远都相对于自身位置进行定位,与其他元素无关,也不会影响其他元素。
fiexd:生成绝对定位的元素,相对于屏幕视口(viewport)进行定位,元素的位置在屏幕滚动时并不会改变,回到顶部的按钮一般用这种方式进行定位
static:默认值,没有定位,会忽略top、bottom、left、rioght或者z-index属性。块级元素从上往下排布,行级元素从左到右排列
absolute和fixed比较
共同点:
改变行内元素的呈现方式,将
display置为inline-block使元素脱离普通文档流,不再占用文档物理空间
覆盖非定位文档元素
不同点:absolute和fixed根元素不同,absolute的根元素可以设置,fixed的根元素是浏览器在有滚动条的页面中,a
bsolute会跟着父元素移动,fiexd固定在页面的具体位置不变
display float position 关系
- 首先判断
display属性是否为none,如果为none,则position和float属性的值不影响元素最后的表现 - 然后判断
position的值是否为absolute或者fixed,如果是,则float属性失效,并且display的值应该被设置为table或者block - 如果
position的值补位absolute或者fixed,则判断float属性的值是否为none,如果不是,则display的值则按上面的规则转换。注意,如果position的值为relative并且float属性的值存在,则relative相对于浮动后的最终位置定位 - 如果
float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,则保持指定的display属性值不变
总的来说,可以把它看作是类似优先级的机制,position:absolute和position:fixed优先级最高,有它存在对的时候,浮动不起作用,display的值也需要调整。其次,元素的float特性的值不是none的时候或者它是根元素的时候,调整display的值。最后,非根元素,并且非浮动元素,并且非绝对定位的元素,display特性值同设置值
一与人同,未免屈意以循之😜😜😜
临江仙 送钱穆父 苏轼
一别都门三改火,
天涯踏尽红尘。
依然一笑作春温,
无波真古井,
有节是秋筠。
惆怅孤帆连夜发,
送行淡月微云。
尊前不用翠眉颦。
人生如逆旅,
我亦是行人。