day12 html5

      day12

Positioning: attribute value:
1. static static positioning
2. relative relative positioning
3. absolute absolute positioning
4. fixed fixed positioning
5. sticky sticky positioning
position: fixed; fixed positioning
1: reference object: browser window.
2: Not occupying space, leaving the layout flow.

让一个元素在浏览器窗口左右上下居中?
    第一种方法:
        position:fixed;
        left:50%;top:50%;
        margin-left:-元素宽度一半;
        margin-top:-元素高度的一半;

    第二种方法:
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
         margin:auto;
         
    粘性定位:
    position:sticky;
   执行逻辑:
    默认情况下:当浏览器窗口滚动条不滚动,当前元素没有超出整个浏览器窗口的时候
    执行的position:relative;如果元素超出当前窗口则应用的position:fixed;
    
定位 总结
       脱离布局流:
       position:absolute
       position:fixed;

注:如果块状元素没有设置宽度的时候,添加position:absolute || position:fixed
出现宽度被内容撑开

Anchor:
A type of hyperlink.
Function: It can realize jumps in different positions within the same page.
Description: Let the element with the id name bound to the anchor point return to the top of the browser window.
<Tag id = ""> </ tag>

高度自适应第一种情况:
    当元素height不去设置或者是设置成height:auto;
    元素的高度是被内容撑开的。
    需求1:当内容增加的时候,内容能把容器撑开。
    需求2:当内容极少或者没有内容的时候,让容器保持一个最小高度。
  • The minimum height setting:
    min-height:
    can meet 1: When the content increases, the content can hold the container apart.
    Can meet 2: When there is little or no content, let the container maintain a minimum height.
Published 21 original articles · praised 0 · visits 286

Guess you like

Origin blog.csdn.net/jiatinghui/article/details/105207930