HTML学习总结4

最新推荐文章于 2024-07-24 16:51:29 发布

鱼晚.

最新推荐文章于 2024-07-24 16:51:29 发布

阅读量24

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/m0_62146534/article/details/134455123

版权

标准流

标准流即文档流，标准流指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

浮动

让元素即盒子水平排列

属性名：float

属性值

left
right

选中的水平排列的盒子都要加一个float属性

使用float属性会脱离标准流控制，浮动之后的盒子会顶对齐

产品区域布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>        
       *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
       }
       li{
        list-style: none;
       }

       /*大盒子样式*/
       .first{
        width:1352px;
        height: 693px;
        background-color: #c57b7b;
        margin:100px auto;
        margin-left: 42px;
        margin-top: 24px;

        
       }
       .left{       /*左盒子左浮动*/
        float:left;
        background-color: #ececee;
        width: 529px;
        height: 695px;                 
       }

       .right{      /*右盒子右浮动*/
        float:right;
        width: 823px;
        height: 695px;
        background-color: #f5f5f5;
        

       }
       .right li{       /*每个小盒子左排列*/
            float:left;
            background-color: rgb(23, 212, 124);
            width: 193px;
            height:335px;            
            margin-left: 12px;
            margin-bottom: 23px;
       }
       
       .right li:nth-child(4n){     /*最右边的盒子的右边距是0*/
        margin-right:0px;
       }
       


    </style>
</head>
<body>
    <!-- 一个大盒子里面有两个小盒子，总体分左右两个盒子，左边单独一个盒子，
        右边盒子又分八个小盒子，使用li实现
    当浮动的盒子掉下来时，可能是宽度或者高度超出了父级盒子的范围了，调整一下就好 -->
    <div class="first">
    <div class ="left"></div>
    <div class="right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    
</div>

    
</body>
</html>

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能就会导致布局混乱）

解决方法：清除浮动（清除浮动带来的影响）

使用场景：主要用于不方便添加高度的父级盒子上

为.clearfix::after伪元素添加一个空的块级元素，是用于清除浮动。这个空的块级元素的作用是告诉浏览器，浮动元素所占用的空间已经被释放，后续的元素应该从浮动元素的下方开始布局。

方法一：额外标签法

在父元素内容的最后添加一个块级元素，设置css属性clear:both
.clearfix{
    clear:both;
}
如上在父元素内容的最后添加了一个名为cleafix的块级元素标签<div class="clearfix"></div>

方法二：单伪元素法

直接在父元素标签中添加一个class名“clearfix”，若原本已有class名了，空格再加个名字即可。谁里面的盒子浮动了，就在谁的开始标签身上添加class="clearfix"。
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

方法三：双伪元素法（推荐）
.clearfix::before,
clearfix::after{
    content:"";
    display:table;
}

.clearfix::after{
    clear:both;
}
   
双伪元素法使用伪元素在父元素的前后添加一个标签并清除浮动，之后父元素会自动根据内容计算高度，避免影响下面的标准流。

.clearfix::before伪元素是为了解决外边距塌陷问题的，因为父子级的标签里，如果子级添加了外边距，就会造成父元素的塌陷问题，所以在父元素最前面添加一个标签，就会隔离有margin的子集，避免塌陷问题。

方法四：overflow

在父级元素添加css属性overflow：hidden；

浮动总结

浮动属性float，left表示左浮动，right表示右浮动
浮动后的盒子顶部对齐
浮动后的盒子具备行内块特点
父级宽度不够，浮动的子级会换行
浮动后的盒子脱标
清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
浮动的本质作用是实现图文混排的效果

flex布局模型（推荐）

flex布局也叫弹性布局，是浏览器提倡的布局类型，非常适合结构化布局，提供了强大的空间布局和对齐能力。flex模型不会产生浮动布局中的脱标，布局网页更简单、灵活。

flex组成

设置方式：给父元素设置display：flex；子元素可以自动挤压或拉伸。

组成部分

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴/交叉轴：默认在垂直方向

flex布局

描述	属性
创建flex容器	display:flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩化	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

主轴对齐方向

justify-content属性值

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	沿主轴居中排列
space-between	沿主轴（水平方向）均匀排列，空白间距均分再在弹性盒子之间，使弹性盒子之间的间距相等
space-around	空白间距均分在弹性盒子两侧，弹性盒子之间的间距是弹性盒子两侧的两倍
space-evenly	弹性盒子与容器之间间距相等，各个间距都相等

侧轴对齐方式

属性名

align-items：当前弹性容器内所有弹性盒子的侧轴（垂直方向）对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

align-items与align-self的属性值如下：

属性值效果
stretch 弹性盒子沿侧轴被拉伸至铺满容器（弹性盒子没有设置垂直方向（即高度）的尺寸时则会默认拉伸）
cneter 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排

属性值	效果
stretch	弹性盒子沿侧轴被拉伸至铺满容器（弹性盒子没有设置垂直方向（即高度）的尺寸时则会默认拉伸）
cneter	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排

align-self的使用方法：

.box{
    display:flex;
    /*align-items：flex-start；*/
}

.box div:nth-child(2){
        align-self:center;   /*选择第二个弹性盒子做垂直居中对齐*/
}

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值

属性值效果
row 水平方向，从左到右
column 垂直方向，从上向下
row-reverse 水平方向，从右向左
column-reverse 垂直方向，从下至上

属性值	效果
row	水平方向，从左到右
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下至上

示例：初始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>        
       .c{
        display: flex;
        
        width: 500px;
        height: 300px;
        border:3px solid black;
       }
       .c1{
        width: 100px;
        height: 50px;
        background-color: pink;
       }
       .c2{
        width:40px;
        height: 30px;
        background-color: green;
       }    
    </style>
</head>
<body>
    <div class="c">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
   
    
</body>
</html>

初始样式

改变主轴以后设置的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>        
       .c{
        display: flex;
        flex-direction: column;       /*改变主轴默认的水平排列方式为垂直排列*/
        justify-content: center;     /*主轴居中*/
        align-items:center;         /*侧轴居中*/
        width: 500px;
        height: 300px;
        border:3px solid black;
       }
       .c1{
        width: 100px;
        height: 50px;
        background-color: pink;
       }
       .c2{
        width:40px;
        height: 30px;
        background-color: green;
       }    
    </style>
</head>
<body>
    <div class="c">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
   
    
</body>
</html>

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数

默认情况下，主轴方向是按照内容撑开，侧轴会默认拉伸（如果没有设置高度的话）

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>        
       .c{
            display:flex;
            width:700px;
            height:500px;
            border:1px solid black;
       }  
       .c1{

            width: 200px;
            background-color: orangered;
       }
       .c2{
        flex:1;
        background-color: green;
       }
       .c3{
        flex:3;
        background-color: rgb(216, 204, 41);
       }
    </style>
</head>
<body>
    <div class="c">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
   
    
</body>
</html>

本例子一个大盒子里面有三个小盒子，第一个小盒子已经设置了宽度，故父级剩余尺寸为原来的宽度减去第一个盒子的宽度，然后剩下的由第2和第3个盒子瓜分，第2个盒子占剩余的一份，第3个盒子设置了占据剩余部分的两份。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性名：flex-wrap

属性值：

wrap：换行
nowrap：不换号（默认）

行对齐方式

属性名：align-content

属性值

属性值效果
flex-start
默认值，弹性盒子从起点开始排列

flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around 空白间距均分在弹性盒子两侧
space-evenly 弹性盒子于容器之间间huyi

属性值	效果
flex-start	默认值，弹性盒子从起点开始排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	空白间距均分在弹性盒子两侧
space-evenly	弹性盒子于容器之间间huyi

注：调整行对方式对单行的弹性盒子不生效，故一般要结合flex-wrap使用

综合案例

盒子结构的关键代码

.box ul{           
            display: flex;   /*设置flex模型*/
            flex-wrap: wrap;  /*设置换行*/
            justify-content: space-between;/*主轴对齐方式*/
            align-content: space-between;  /*行对齐方式*/  
            padding:30px;         
        }       
        li{                       
            list-style: none;  
            width:200px;
            height:50px;              
            background-color: pink;        
        }

li加图片和文字的部分代码

在每个li标签内添加两个块，一个块装图片，另一个div块装文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            display:flex;
            margin:50px auto;
            border-radius: 10px ;
            width:500px;
            height:200px;
            background-color: grey;
        }  

        .box ul{          /*设置每个li的排列方式*/
            display: flex;   /*设置flex模型*/
            flex-wrap: wrap;  /*设置换行*/
            justify-content: space-between;/*主轴对齐方式*/
            align-content: space-between;  /*行对齐方式*/  
            padding:30px;         
        }       
        li{        
            display: flex;   /*设置li里面的图片与文字盒子的排列方式*/             
            list-style: none;  
            width:200px;
            height:50px;              
            background-color: pink;        
        }  
        .box .text{     /*设置小标题样式*/       
            line-height: 30px;
            font-weight: 400;
            color:#666666;
        }
        .box .text p{        /*设置盒子里的图片样式*/
            margin-right: 10px;
            line-height: 7px;
            font-size: 7px;
            color: rgb(27, 89, 203);
        }        
        .p{        /*设置文字样式*/
            line-height: 50px;
            margin-right: 10px;
        }                    
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="p">
                    <img src="./a.png" width="20px">
                </div>
                <div class="text">
                    <h>你好，海绵宝宝</h>
                    <p>今天是星期六，派大星寻找海绵宝宝一起去海边玩</p>
                </div>
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>  
</body>
</html>

鱼晚.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML学习总结4

clearfix::before伪元素是为了解决外边距塌陷问题的，因为父子级的标签里，如果子级添加了外边距，就会造成父元素的塌陷问题，所以在父元素最前面添加一个标签，就会隔离有margin的子集，避免塌陷问题。本例子一个大盒子里面有三个小盒子，第一个小盒子已经设置了宽度，故父级剩余尺寸为原来的宽度减去第一个盒子的宽度，然后剩下的由第2和第3个盒子瓜分，第2个盒子占剩余的一份，第3个盒子设置了占据剩余部分的两份。场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能就会导致布局混乱）
复制链接

扫一扫