css9_定位_overflow_可替换元素与不可替换元素

定位

position属性进行元素定位

div{
    width：400px；
    height:400px;
    background:gold;
    
    /* position:absolute; 表示绝对定位 */
    /* position:relative; 表示相对定位 */
    position:absolute;
    
    /* 定位之后，可以通过left、top、right、bottom进行位置定位 */
    left:500px;
    top：200px;
    right:200px;
    bottom:20px;
}

绝对定位（absolute）---->谨慎使用

1. 绝对定位默认参考电脑窗口边界进行定位

2. 如果祖先元素有定位，则子元素会参考定位的祖先元素进行定位

3. 绝对定位不允许元素margin:auto;

4. 绝对定位不需要使用浮动(浮动无效果)

5. 绝对定位可以把元素变成行内块元素(行内元素可以设置宽高)

6. 绝对定位会让元素脱离文档流（类似浮动）

7. 绝对定位一般会与相对定位结合使用，子元素设置绝对定位，父元素设置相对定位

8. 绝对定位重叠时下面的标签会覆盖上面的标签

相对定位（relative）

1. 相对定位不会脱离文档流
2. 相对定位会以当前位置为参考进行平移
3. 相对定位元素偏移后会保留之前的位置，不会被其他元素顶替掉
4. 相对定位不会把元素变成行内块元素
5. 相对定位可以让元素浮动
6. 总结：相对定位除了元素本身能偏移位置外不会对元素有任何影响

固定定位（fixed）

• 固定定位的元素不会随着页面的滚动而滚动
• 其他方面基本与绝对定位一样

z-index属性(元素的层级)

.div1{
    width：400px；
    height:400px;
    background:gold;
 
    position:absolute;
    
    z-index:1;
}

.div2{
    width：400px；
    height:400px;
    background:red;
 
    position:absolute;
    
    z-index:2;
}

• 绝对定位重叠时下面的标签会覆盖上面的标签，可以通过z-index设置定位的元素的层级，层级高的就在上面
• z-index可以写负数

元素居中

#box{
    width:200px;
    height:200px;
    background:gold;
    
    /* 元素页面最中心 */
    position:absolute;
    
    top:calc(50% -100px); /* 50%默认时div的左上角偏移到页面的中心点，实际中心还要减去高一半 */
    left:calc(50% -100px);/* 50%默认时div的左上角偏移到页面的中心点，实际中心还要减去宽一半 */
}

overflow

#box{
    
    width:100px;   
    height:100px;
    border:1px solid red;
    
    /* 内容超出部分隐藏 */
    overflow: hidden;
}

属性值	作用
hidden	内容超出部分隐藏，不出现滚动条
visible	对溢出内容不做处理
scroll	隐藏溢出容器的内容，溢出的内容可以通过滚动呈现，无论内容是否溢出都有滚动条
auto	当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
clip	与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。

overflow解决浮动问题

同clear一样，在浮动元素的父元素里加overflow：hidden也可以达到清浮动(父元素因子元素浮动造成的高度坍塌)的效果

<ul>
    <li>xxx</li>
    <li>xxx</li>
</ul>

li{
    float:left;
}

/* 清浮动1 */
ul::after{
    content:"";
    clear:both;
    display:block;
}

/* 清浮动2 */
ul{
    overflow：hidden;
}

可替换元素与不可替换元素

块级元素特点

1. 独占一行
2. 可以设置宽高

行内元素特点

1. 不独占一行
2. 不可以设置宽高

元素本身分为块级元素和行内元素

行内块元素（本身是css设置的特性，不属于标签本身的特性）

1. 不独占一行
2. 可通过display=inline-block来改变特性设置宽高

PS：img标签本质是行内元素，之所以能设置宽高，是因为元素本身内嵌了宽和高

HTML元素标签还可以分为

​ 可替换元素：比如说img标签（外部资源）

​ 不可替换元素：比如说p标签和h1标签

PS:input标签比较特殊，因为这个标签他有不同的类型，所以input标签也是一个可替换属性

关于标签属性

html标签会自带一些属性，这些标签属性可以直接写在标签中(比如id、class、style)

注意要和css样式属性区分开来

HTML标签常见的全局标签属性

标签全局属性：这样全局属性可以让所有标签共用

比较常见的全局标签属性

​ accesskey:规定激活元素的快捷键

​ class：规定元素的一个或多个类名（引用样式表中的类）

​ dir：规定元素中内容的文本方向

​ ltr：默认；从左向右的文本方向

​ rtl：从右向左的文本方向

​ id：规定元素的唯一id

​ style：规定元素的行内css样式

​ title:规定有关元素的额为信息

<!-- 按下Alt + t可以直接访问 -->
<a accesskey="t" href="www.baidu.com">百度</a>

<!-- dir属性设置文字的排版方向 -->
<p dir="rtl">
    客流量
</p>