• 学习java之前端知识掌握Day004

    目录

    盒子模型

    内边距padding

    外边距margin

    外边距的妙用

    盒子型模的尺寸

    box-sizing

    标准文档流的组成

    display属性

    浮动

    高度塌陷

    清除浮动

    解决父级边框塌陷的方法

    浮动元素后面加空div

    设置父元素的高度

    父级添加overflow属性

     父级添加伪类after

    inline-block和float的区别

    盒子模型

    内边距padding

        padding-left 
        padding-right
        padding-top
        padding-bottom
        padding

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         span {
    10.             border: 1px solid red;
    11.             /* 设置span标签中内容与边框之间的距离 */
    12.             /* padding: 30px; */
    13.  
    14.             /* 设置上下内边距为20px，左右内边距为10px */
    15.             /* padding: 10px 20px; */
    16.  
    17.             /* 上内边距10px，左右内边距20px 下内边距50px */
    18.             /* padding: 10px 20px 50px; */
    19.  
    20.             /* 上内边距10px，左右内边距20px 下内边距50px */
    21.             /* padding: 10px 20px 50px 80px; */
    22.  
    23.             padding-top: 10px;
    24.             padding-right: 20px;
    25.             padding-bottom: 60px;
    26.             padding-left: 30px;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31.     <span>我是span标签span>
    32. body>
    33. html>

    外边距margin

        margin-top
        margin-right
        margin-bottom
        margin-left
        margin

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         
    10.         .father{
    11.             border: 3px solid red;
    12.         }
    13.         .son{
    14.             width: 220px;
    15.             height: 200px;
    16.             border: 1px dashed blue;
    17.             /* margin-top: 20px;
    18.             margin-right: 10px;*/
    19.             /*父元素没有设置宽度，占整个一行，所以设置右边距是没有作用的 */
    20.             /* margin-bottom: 20px;
    21.             margin-left: 30px; */
    22.  
    23.             /* margin: 60px; */
    24.             /* margin:20px 50px */
    25.             /* margin:20px 50px 100px; */
    26.             margin:20px 50px 100px 80px;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31.     <div class="father">
    32.         <div class="son">div>
    33.     div>
    34. body>
    35. html>

    外边距的妙用

            网页居中对齐  margin:0px  auto;
            网页居中对齐的必要条件
                块元素
                固定宽度

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             width: 200px;
    11.             height: 50px;
    12.             border: 1px solid red;
    13.             margin: 0px auto ;
    14.             /* 元素内容水平居中通过 */
    15.             text-align: center;
    16.             /* 元素内容垂直居中，将行高属性与元素高度设置为一样就可以实现 */
    17.             line-height: 50px;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <div>我是div元素div>
    23. body>
    24. html>

    盒子型模的尺寸


        

    盒子模型总尺寸=border+padding+margin+内容宽度

    box-sizing

    content-box   默认值，盒子的总尺度
    border-box    盒子的宽度或高度等于元素内容的宽度或高度
    inherit   元素继承父元素的盒子模型模式

    标准文档流的组成

        块级元素
            

    …

    、

    、

    、列表
        内联元素
            、、、...

    display属性

        控制元素的显示和隐藏
        块级元素与行内元素的转变
        

    浮动

    设置左浮动  float:left
    设置右浮动  float:right

    高度塌陷

    浮动元素脱离标准文档流

    清除浮动

        clear属性

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>浮动title>
    6.     <link href="css/float.css" rel="stylesheet" type="text/css"/>
    7. head>
    8. <body>
    9. <div id="father">
    10.     <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/>div>
    11.     <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/>div>
    12.     <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/>div>
    13.     <div class="layer04">
    14.         浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    15.     div>
    16. div>
    17. body>
    18. html>
    1. div {
    2. 	margin:10px;
    3. 	padding:5px;
    4. }
    5. #father {
    6. 	border:1px #000 solid;
    7. }
    8. .layer01 {
    9. 	border:1px #F00 dashed;
    10. 	/*float:right;*/
    11. 	float:left;
    12. }
    13. .layer02 {
    14. 	border:1px #00F dashed;
    15. 	float:right;
    16. }
    17. .layer03 {
    18. 	border:1px #060 dashed;
    19. 	float:left;
    20. }
    21. .layer04 {
    22. 	border:1px #666 dashed;
    23. 	font-size:12px;
    24. 	line-height:23px;
    25. 	width: 200px;
    26. 	float: right;
    27. 	/*clear:left;*/
    28. 	/*clear: right;*/
    29. 	clear: both;
    30. }
    31.  
    32. body {
    33. 	font-size:12px;
    34. 	line-height:22px;
    35. }
    36. #content {
    37. 	width:200px;
    38. 	height:150px;
    39. 	border:1px #000 solid;
    40. 	/*overflow:visible;*/
    41. 	/*overflow:hidden;*/
    42. 	/*overflow:scroll;*/
    43. 	overflow:auto;
    44. }

    解决父级边框塌陷的方法

    浮动元素后面加空div

        简单，空div会造成HTML代码冗余

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>浮动title>
    6.     <link href="css/float.css" rel="stylesheet" type="text/css"/>
    7. head>
    8. <body>
    9. <div id="father">
    10.     <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/>div>
    11.     <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/>div>
    12.     <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/>div>
    13.     <div class="layer04">
    14.         浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    15.     div>
    16.     
    17.     <div class="clear">div>
    18. div>
    19. body>
    20. html>
    1. div {
    2. 	margin:10px;
    3. 	padding:5px;
    4. }
    5. #father {
    6. 	border:1px #000 solid;
    7. }
    8. .layer01 {
    9. 	border:1px #F00 dashed;
    10. 	float:left;
    11. }
    12. .layer02 {
    13. 	border:1px #00F dashed;
    14. 	float:right;
    15. }
    16. .layer03 {
    17. 	border:1px #060 dashed;
    18. 	float:left;
    19. }
    20. .layer04 {
    21. 	border:1px #666 dashed;
    22. 	font-size:12px;
    23. 	line-height:23px;
    24. 	width: 200px;
    25. 	float: right;
    26. }
    27. .clear{
    28. 	clear: both;
    29. 	margin: 0;
    30. 	padding: 0;
    31. }

    设置父元素的高度

        简单，元素固定高会降低扩展性

    1. html>
    2. <html>
    3. <head lang="en">
    4.   <meta charset="UTF-8">
    5. <title>浮动title>
    6. <link href="css/float.css" rel="stylesheet" type="text/css" />
    7. head>
    8. <body>
    9. <div id="father">
    10.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
    11.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
    12.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
    13.   <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。div>
    14. div>
    15. body>
    16. html>
    1. div {
    2. 	margin:10px;
    3. 	padding:5px;
    4. }
    5. #father {
    6. 	border:1px #000 solid;
    7. 	/*方法二：在父级里设置高度来防止边框塌陷*/
    8. 	height: 400px;
    9. }
    10. .layer01 {
    11. 	border:1px #F00 dashed;
    12. 	float:left;
    13. }
    14. .layer02 {
    15. 	border:1px #00F dashed;
    16. 	float:right;
    17. }
    18. .layer03 {
    19. 	border:1px #060 dashed;
    20. 	float:left;
    21. }
    22. .layer04 {
    23. 	border:1px #666 dashed;
    24. 	font-size:12px;
    25. 	line-height:23px;
    26. 	width: 200px;
    27. 	float:left;
    28. }

    父级添加overflow属性

        溢出处理overflow属性    
        简单，下拉列表框的场景不能用

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>浮动title>
    6.     <link href="css/float.css" rel="stylesheet" type="text/css"/>
    7. head>
    8. <body>
    9. <div id="father">
    10.     <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/>div>
    11.     <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/>div>
    12.     <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/>div>
    13.     <div class="layer04">
    14.         浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    15.     div>
    16. div>
    17. body>
    18. html>
    1. div {
    2. 	margin:10px;
    3. 	padding:5px;
    4. }
    5. #father {
    6. 	border:1px #000 solid;
    7. 	overflow: hidden;
    8. }
    9. .layer01 {
    10. 	border:1px #F00 dashed;
    11. 	float:left;
    12. }
    13. .layer02 {
    14. 	border:1px #00F dashed;
    15. 	float:right;
    16. }
    17. .layer03 {
    18. 	border:1px #060 dashed;
    19. 	float:left;
    20. }
    21. .layer04 {
    22. 	border:1px #666 dashed;
    23. 	font-size:12px;
    24. 	line-height:23px;
    25. 	width: 200px;
    26. 	float:left;
    27. }

     父级添加伪类after

        .clear:after{
        content: '';          /*在clear类后面添加内容为空*/
        display: block;      /*把添加的内容转化为块元素*/
        clear: both;         /*清除这个元素两边的浮动*/
    }
        写法比上面稍微复杂一点，但是没有副作用，推荐使用

    1. html>
    2. <html>
    3. <head lang="en">
    4.   <meta charset="UTF-8">
    5. <title>浮动title>
    6. <link href="css/float.css" rel="stylesheet" type="text/css" />
    7. head>
    8. <body>
    9. <div id="father" class="clear">
    10.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
    11.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
    12.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
    13.   <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。div>
    14. div>
    15. body>
    16. html>
    1. div {
    2. 	margin:10px;
    3. 	padding:5px;
    4. }
    5. #father {
    6. 	border:1px #000 solid;
    7.  
    8. }
    9. .layer01 {
    10. 	border:1px #F00 dashed;
    11. 	float:left;
    12. }
    13. .layer02 {
    14. 	border:1px #00F dashed;
    15. 	float:right;
    16. }
    17. .layer03 {
    18. 	border:1px #060 dashed;
    19. 	float:left;
    20. }
    21. .layer04 {
    22. 	border:1px #666 dashed;
    23. 	font-size:12px;
    24. 	line-height:23px;
    25. 	width: 200px;
    26. 	float:left;
    27. }
    28.  
    29. .clear:after{
    30. 	content: '';         /*在clear后面添加内容为空*/ 
    31. 	display: block;      /*把添加的内容转化为块元素*/
    32. 	clear: both;         /*清除这个元素两边的浮动*/
    33. }

    inline-block和float的区别

        display:inline-block
            可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
            位置方向不可控制，会解析空格
        float 
            可以让元素排在一行并且支持宽度和高度，可以决定排列方向
            float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

  • 相关阅读:
    TS流分析
    扫码登录基本流程
    Spring AOP 通俗理解与应用
    Linux安装MySQL8.0.29，并使用Navicat连接
    three.js入门 —— 实现第一个3D案例
    Vue项目搭建图文详解教程
    Day01 SpringBoot第一次笔记---运维实用篇
    基础算法篇——归并排序
    npm install 报node-sass command failed
    golang的defer执行时机案例分析
  • 原文地址：https://blog.csdn.net/qihaojinqiuma/article/details/126817109