css学习四
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特性值同设置值
一与人同，未免屈意以循之😜😜😜
临江仙 送钱穆父 苏轼
一别都门三改火，
天涯踏尽红尘。
依然一笑作春温，
无波真古井，
有节是秋筠。
惆怅孤帆连夜发，
送行淡月微云。
尊前不用翠眉颦。
人生如逆旅，
我亦是行人。
