HTML CSS布局

HTML5网站布局

HTML5 提供的新语义元素定义了网页的不同部分:

元素含义
header定义文档或节的页眉
nav定义导航链接的容器
section定义文档中的节
article定义独立的自包含文章
aside定义内容之外的内容(比如侧栏)
footer定义文档或节的页脚
details定义额外的细节
summary定义 details 元素的标题

CSS 布局

position(定位)

  • 它允许你定义一个元素相对于其他正常元素的位置

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。即块、行垂直排列下去,行内水平从左到右。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .block {
            position: relative;
            top:10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            box-sizing: border-box;
        }
        .block:nth-child(2){
            position: static;  //忽略 top 属性
            border-color:red;
        }
    </style>
</head>
<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>
</html>

76

relative

  • 相对定位,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。

  • 我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移

  • 这里的top有点类似qml中的topMargin。Top的值表示对象相对原位置向下偏移的距离,bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离,right的值表示对象相对原位置向左偏移的距离,两者同时存在时,只有left起作用。

  • 无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。

html:

<h1>这里是正常位置的标题</h1>
<h1 class="pos_top">这里是相对于正常位置向下移动的标题</h1>
<h1 class="pos_left">这里是相对于正常位置向右移动的位置</h1>

css:

.pos_top{
    position: relative;
    top:20px;
}
.pos_left{
    position: relative;
    left:50px;
}

77

absolute

  • 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
  • 绝对定位的元素相对于于最近的非static祖先元素定位,如果这样的祖先不存在,那么它的位置是相对于的;
  • 绝对定位的元素脱离了正常流。

absolute 与relative区别

  • relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。

78

  • 对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位

79

html:

<div class="first">
        <div class="second"></div>
    </div>

css:

.first{
    width:400px;
    height:400px;
    background-color: green;
    position: relative;
}
.second{
    width:100px;
    height:100px;
    background-color: red;
    position: absolute;
    top:50%;
    left

80

fixed

固定定位是指元素的位置相对于浏览器窗口是固定的,即使窗口是滚动的它也不会滚动,固定定位脱离了正常流,所以它有可能和其他元素发生重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-fixed</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .ad-right-float {
            position: fixed;
            bottom: 50px;
            right: 0;
            width: 80px;
            height: 80px;
            background: gray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="ad-right-float">
        悬停广告
    </div>
</body>
</html>

81

sticky

sticky结合了position:relative和position:fixed两种定位的特性。
元素定位表现为在跨越特定的阈值之前表现为相对定位,在之后为固定定位。

#box { position: sticky; top: 20px; }

在 viewport 视口滚动到元素 top 距离小于 20px 之前,元素为相对定位。之后,元素将固定在与顶部距离 20px 的位置,直到 viewport 视口回滚到阈值以下。

display

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row此元素会作为一个表格行显示(类似 <tr>)。
table-column-group此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column此元素会作为一个单元格列显示(类似 <col>
table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>
table-caption此元素会作为一个表格标题显示(类似 <caption>
inherit规定应该从父元素继承 display 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        div {
            /* 块级转行内元素 */
            display: inline;
        }

        span {
            /* 行内元素转块级元素 */
            display: block;
        }

        a {
            /* 行内元素转行内块元素 */
            width: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>Hello world</div>
    <div>Hello world</div>
    <div>Hello World</div>

    <span>How are you</span>
    <span>How are you</span>
    <span>How are you</span>

    <a href="#" >We</a>
    <a href="#" >We</a>
    <a href="#" >We</a>

</body>
</html>

82

尺寸

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

height width属性

描述
auto默认值。浏览器可计算出实际的宽度。
length使用 px、cm 等单位定义宽度。
%定义基于包含块(父元素)宽度的百分比宽度。
inherit规定应该从父元素继承 width 属性的值。

max-height max-width

描述
none默认。定义对元素被允许的最大高度没有限制。
length定义元素的最大高度值。
%定义基于包含它的块级对象的百分比最大高度。
inherit规定应该从父元素继承 max-height 属性的值。

min-height min-width

描述
length定义元素的最小宽度值。默认值:取决于浏览器。
%定义基于包含它的块级对象的百分比最小宽度。
inherit规定应该从父元素继承 min-width 属性的值。

line-height

描述
normal默认。设置合理的行间距。
number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
inherit规定应该从父元素继承 line-height 属性的值。

浮动

html元素依照默认规则从上到下从左到右依次排列布局的方式 给元素设置float这个css元素后,可以产生让元素脱离文档流的效果,按照浮动的方向漂浮起来, 直到遇到自己爸爸的边框或者遇到其他浮动元素。

示例

不设置浮动的样子:

83

左浮动

            .son{
                width: 150px;
                height: 150px;
                float: left;/*当给三个son都设置左浮动的时候,三个div向左排成一排*/
            }
            .son1{
                background:red;
            }
            .son2{
                background: green;
                
            }
            .son3{
                background: blue;
            }
</style>
<body>
        <div class="baba">
            <div class="son son1"> 
                       </div>
            <div class="son son2"> 
                       </div>
            <div class="son son3"> 
                      </div>
<!--给son设置样式,son1 、son2、son3都会有样式-->
        </div>

84

当son1 son2设置左浮动,son3设置右浮动,son3会漂浮到大div的右边:

            .son{
                width: 150px;
                height: 150px;
            }
            .son1{
                background:red;
                  float: left;
            }
            .son2{
                background: green;
                float: left;
            }
            .son3{
                background: blue;
                float:right;
            }
</style>
<body>
        <div class="baba">
            <div class="son son1"> 
                       </div>
            <div class="son son2"> 
                       </div>
            <div class="son son3"> 
                      </div>
<!--给son设置样式,son1 、son2、son3都会有样式-->
        </div>

85

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×