HTML/CSS 的layout

最新推荐文章于 2023-12-05 21:30:00 发布
最新推荐文章于 2023-12-05 21:30:00 发布
阅读量425 收藏 1
点赞数
分类专栏： markdown 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48984634/article/details/115426340
版权

HTML/CSS 的layout

01_文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            background-color: yellow;
        }
        .box2{
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 
        文档流（normal flow）
            - 网页是一个多层的结构，一层摞着一层
            - 通过CSS可以分别为每一层来设置样式
            - 作为用户来讲只能看到最顶上一层
            - 这些层中，最底下一层称为文档流，文档流是网页的基础
                我们所创建的元素默认都是在文档流中进行排列
            - 对于我们来元素主要有两个状态
                 在文件流中
                 不在文件流中
            
            元素在文档流中有什么特点
                - 块元素
                    - 块元素会在页面中独占一行
                    - 默认宽度是父元素的全部（会把父元素撑满）
                    - 默认高度是被内容撑开（子元素）

                - 行内元素
                    - 行内元素不会独占页面的一行，只占自身大小
                    - 行内元素在页面中由左向右排列（书写习惯一致）
                    - 行内元素的默认宽高都是被内容撑开

     -->
     <div class="box1">I am box1</div>
     <div class="box2"> I am box2</div>

     <span>I am span1</span>
     <span>I am span2</span>
</body>
</html>

02_盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* 
                内容区（content），元素的所有子元素和文本内容都在内容区中排列
                    内容区的大小由width和height两个属性设置
                        width 设置内容区的宽度
                        height 设置内容区的高度
             */
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 
                边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
                    边框的大小会影响整个盒子的大小
                要设置边框，需要至少设置三个样式：
                    边框的宽度：border-width
                    边框的颜色：border-color
                    边框的样式：border-style
             */
             border-color: red;
             border-width: 10px;
             border-style: solid;
        }
    </style>
</head>
<body>
    <!-- 
        盒模型，盒子模型，框模型（box model）
            - CSS将页面中的所有元素都设置为了一个矩形的盒子
            - 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
            - 没一个盒子都由以下几个部分组成
                内容区（content）
                内边框（padding）
                边框（border）
                外边框（margin）


     -->
     <div class="box1"></div>
</body>
</html>

03_盒子的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            background-color: #bfa;
            width: 200px;
            height: 200px;
            /* 
                边框的宽度 border-width
                边框的颜色 border-color
                边框的样式 border-style
             */
             /* 
            border-width：10px
                默认值： 一般都是3个像素
                border-width可以用来指定四个方向的边框的宽度
                    值的情况
                        四个值：上 右 下 左
                        三个值：上 左右 下
                        两个值： 上下 左右
                        一个值：上下左右

                除了border-width还有一组 border-xxx-width
                    xxx可以是top right bottom left
                    用来单独指定某一个边的宽度
              /* */
              border-width: 10px;
              /* 
                border-color用来指定边框的颜色，同样可以分别指定四个边的边框
                    规则和border-width一样

                border-color也可以省略不写，如果省略不写则自动使用color的颜色值

               */
              /* border-color: orange red yellow green;
              /*  */
                /* border-style 指定边框的样式
                    sold 表示实线
                    dotted 点状虚线
                    dashed 虚线
                    double 双实线

                    border-style的默认值是none 表示没有边框
               */
               
        } 
        /* 
            border简写属性，通过该属性可以同时设置边框所有的样式，并且没有顺序要求
            除了border以外还有四个 border-xxx
                border-top
                border-right
                border-bottom
                border-left
         */
   
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

04_盒子模型—内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px orange solid;

            padding-top: 100px;
            padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px;

        }
        /* 
            内边距（padding）
                - 内容区和边框之间的距离是内边框
                - 一共有四个方向的内边距
                    padding-top
                    padding-right
                    padding-bottom
                    padding-left
                
                -内边距的设置会影响到盒子的大小
                - 背景颜色会延伸到内边距上

            一共盒子的可见框的大小，有内容区 内边框 和边框共同决定
                所以在计算盒子大小时，需要将这三个区域加到一起计算

                padding 内边距的简写属性，可以同时指定四个方向的内边距
                    规则和border-width一样
         */
        .inner{
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
       

    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>

05_盒子模型—外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px red solid;
            margin-top: 100px;
            margin-left: 100px;

            /* 
            外边距（margin）
                - 外边距不会影响盒子可见框的大小
                - 但是外边距会影响盒子的位置
                - 一共有四个方向的外边距
                    margin-top
                        - 上外边距，设置一个正值，元素会向下移动
                    margin-right
                    margin-bottom
                        -下外边距，设置一个正值，其下边的元素会向下移动
                    margin-left
                        -左外边距，设置一个正值，元素hui'xiang

                    margin 也可以设置负值，如果是负值则元素会向相反的方向移动

                - margin 的简写属性
                    margin 可以同时设置四个方向的外边距，用法和padding一样

                - margin 会影响到盒子实际占用空间
             */

        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: black;
        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

06_盒子的水平布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
            
        }
        .inner{
            width: auto;
            height: 200px;
            background-color: #bfa;
            margin-left: 200px;
            /* 
            元素的水平方向的布局：
                元素在其父元素中水平方向的位置由以下几个属性共同决定
                margin-left
                border-left
                padding-left
                width
                padding-right
                border-ringht
                margin-right

                一个元素在其父元素中，水平布局必须要满足以下等式
                margin-left +border-left+padding-left+width+padding-right+border-ringht+margin-right=父元素内容区的宽度

                    - 以上等式必须满足，如果想加结果使等式不成立，则称为过渡约束，则等式会自动调整
                        - 调整的情况：
                            如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right 值以使等式满足
                        - 这七个值中有三个值可设置为auto
                            width
                            margin-left
                            margin-right
                            - 如果某个值为auto，则会自动调整为auto的那个纸以使等式成立

                            - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
                            - 如果将三个值都设置为auto ，则外边距都是0，宽度最大
                            - 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
                                所以我们经常利用这个特点来使一个元素在其父元素中水平居中
                                示例：
                                    width：xxxpx;
                                    margin:0 auto;
             */
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

07_垂直方向的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer{
            width: 200px;
            background-color: #bfa;
            height: 600px;
            overflow: hidden;
            overflow: scroll;
            /* 
                默认情况下父元素的高度被内容撑开
                
                子元素在父元素的内容区中排列的
                    如果子元素的大小超过了父元素，则子元素会从父元素中溢出
                    使用overflow 属性来设置父元素如何处理溢出的子元素

                        可选值：
                            visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
                            hidden 溢出内容将会被裁剪不会显示
                            scroll 生成两个滚动条，通过滚动条来查看完整的内容
                            auto 根据需要生成滚动条
                    overflow-x：单独处理水平方向
                    overflow-y：单独处理垂直方向
             */
        }
        .inner{
            width: 100px;
            height: 700px;
            background-color: yellow;
            margin-bottom: 100px;
           
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

08_外边距的折叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            font-size: 100px;
        }
        .box1{
            background-color: #bfa;
            /* 设置一个下外边距 */
            margin-bottom: 100px;


        }
        /* 
            垂直外边距的重叠（折叠）
                - 相邻的垂直方向外边距会发生重叠现象
                - 兄弟元素
                    - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值时）
                    - 特殊情况：
                        如果相邻的外边距一正一负，则去两者的和
                        如果相邻的外边距都是负值，则取两者中绝对值较大的

                    - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
                - 父子元素  
                    - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
                    - 父子外边距的折叠会影响到页面的布局，必须要进行处理

         */
        .box2{
            /* 设置一个上外边距 */
            background-color: orange;
            margin-top: 100px;
        }
        .box3{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            padding-top: 100px;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* margin-top: 100px; */
        }
    </style>
</head>
<body>
    <div class="box3">
        <div class="box4"></div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

09_行内元素的折叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1{
            background-color: yellow;
            /* 
                行内元素的盒模型
                    - 行内元素不支持设置宽度和高度
                    - 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
                    - 行内元素可以设置border，垂直方向的border不会影响页面的布局
                    - 行内元素可以设置margin，垂直方向的margin不会影响布局

             */
             /* width: 100px;
             height: 100px; */
             /* padding: 100px; */
             margin: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

        }
        a{
            /* 
                display 用来设置元素显示的类型
                    可选值：
                        inline 将元素设置为行内元素
                        block 将元素设置为块元素
                        inline-block 将元素设置为行内块元素
                            行内块，既可以设置宽度和高度又不会独占一行
                        table 将元素设置为一个表格
                        none 元素不在页面中显示
                visibility 用来设置元素的显示状态
                    可选值：
                        visible 默认值，元素在页面中正常显示
                        hidden 元素在页面中隐藏 不显示 ，但是依然占据页面的位置
             */
             width: 100px;
             height: 100px;
             display: block;

             visibility: hidden;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <a href="javascript:">超链接</a>
    <span class="s1">我是span</span>
    <div class="box1"></div>
    
</body>
</html>

10_默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认样式</title>
    
    <!-- 
        重置样式表：专门用来对浏览器的样式进行重置的
            reset.css 直接去除了浏览器的默认样式
            normalize.css 对默认样式进行统一

     -->
    <style>
        /* 
            默认样式
                - 通常情况，浏览器都会为元素设置一些默认样式
                - 默认样式的存在会影响到页面的布局
                    通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

         */
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;

            }
        /* body{
            margin: 0;
        } */
        /* ul{
            margin: 0;
            padding: 0; */
            /* 
                去除项目符号
             */
            /* list-style: none;
        } */
        /* p{
            margin: 0;

        } */
        /* *{
            margin: 0;
            padding: 0;
        } */
    </style>
</head>
<body>
    <div class="box1"></div>

    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>

    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>

</body>
</html>

11_文件的尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px red solid;
            /* 
                默认情况下，盒子的可见框由内容区、内边框和边框共同决定

                    box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
                        可选值：
                            content-box 默认值，宽度和高度用来设置内容区的大小
                            border-box 宽度和高度用来设置整个盒子可见框的大小
                                width 和 height 指的是内容区 和内边距 和 边框的总大小
             */
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    
    <div class="box1"></div>

</body>
</html>

12_轮廓和圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            /* 
                box-shadow 用来设置元素的阴影效果，阴影不会影响页面的布局
                第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
                第二个值 垂直偏移量 设置阴影的垂直位置 正值向下移动 负值向上移动
                第三个值 阴影的模糊半径
                第四个值 阴影的颜色 

             */
             box-shadow:10px 10px 50px rgba(0, 0, 0,.3);

/* 
            outline 用来设置元素的轮廓线，用法和border一样
                轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
 */
        
        }
        /* .box1:hover{
            outline: 10px red solid;
        } */
        .box2{

            width: 200px;
            height: 200px;
            background-color: orange;

            /* border-radius: 用来设置圆角 圆角设置的圆的半径大小; */
            /* border-top-left-radius: 左上角; */
            /* border-top-right-radius:  */
            /* border-bottom-left-radius:  */
            /* border-bottom-right-radius: 右下角 */
            /* border-radius: 可以分别指定四个角的圆角
                    四个值 左上 右上 右下 左下
                    三个值 左上 右上/左下 右下 
                    两个值 左上/右下 右上/左下

             */
            /* border-top-left-radius:100px 50px; */
            border-radius: 20px / 40px;
        }
    </style>
</head>
<body>
    <!-- <div class="box1"></div>
    <span>hello</span> -->
    <div class="box2"></div>
</body>
</html>

13_重置样式表

/* 清除内外边距 /
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, / structural elements 结构元素 /
dl, dt, dd, ul, ol, li, / list elements 列表元素 /
pre, / text formatting elements 文本格式元素 /
fieldset, lengend, button, input, textarea, / form elements 表单元素 /
th, td { / table elements 表格元素 */
margin: 0;
padding: 0;
}

/* 设置默认字体 /
body,
button, input, select, textarea { / for ie /
/font: 12px/1 Tahoma, Helvetica, Arial, “宋体”, sans-serif;/
font: 12px/1 Tahoma, Helvetica, Arial, “\5b8b\4f53”, sans-serif; / 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 /
code, kbd, pre, samp, tt { font-family: “Courier New”, Courier, monospace; } / 统一等宽字体 /
small { font-size: 12px; } / 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}

q:before, q:after { content: ‘’; }

/* 重置表单元素 /
legend { color: #000; } / for ie6 /
fieldset, img { border: none; } / img 搭车：让链接里的 img 无边框 /
/ 注：optgroup 无法扶正 /
button, input, select, textarea {
font-size: 100%; / 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* 重置 hr */
hr {
border: none;
height: 1px;
}

沧海一小帆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML/CSS常用单词.zip
03-31
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发的基石，用于构建和美化网页。为了熟练地进行HTML/CSS编程，掌握一些基础的英文词汇至关重要。以下是一些重要的HTML/CSS常用单词及其...
html5/css3响应式页面开发总结
09-22
HTML5和CSS3的引入为响应式设计提供了强大的工具和支持。在本文中，我们将探讨响应式页面开发的核心概念、自适应与响应式之间的区别，以及实现响应式设计的一些关键技术。 首先，我们需要理解自适应布局和响应式...
HTML-Layout
m0_47104421的博客
10-11 239
布局
HTML布局（HTML Layout）简介
cnds123的专栏
09-17 7363
HTML布局（HTML Layout）是创建一个网站时需要考虑的情况，合理设计网页中内容的排列方式，让网页看起来更加合理、美观，能产生引人注目的视觉效果。
html css 布局layout
weixin_46328739的博客
12-05 870
【代码】html css 布局layout。
分享10个常见的CSS3页面布局
黑马程序员官方博客
05-22 3045
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；瀑布流也是一种很常见的布局，尤其是在图片信息流的产品，以往如果要完美的实现瀑布流，我们需要费不少的功夫，还要借助JS进行实现。两列布局，左边是导航栏目，右边是内容部分。尤其在后台的场景，是非常常用的。圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示。如下图所示，卡片布局是我们常见的一种页面布局。
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3929
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
HTMLayout界面CSSS样式解析笔记
LindaXu1220的博客
12-10 595
HTMLayout学习笔记 by BBDXF 一、界面篇 学习界面需要有一定的HTML、CSS认知，如果你问为什么，那就当我白说。 由于界面库官方没有给一个完善的User guide，所有的学习都靠自己，而唯一的标准教程就是SDK中给的例程，所以为了完善地学习此库，以SDK中的例程一个个解析学习。 此篇主要来解析html_samples下的界面编写，我想这是大家都非常关心的话题...
cssLayout:CSS 布局
05-21
本项目"cssLayout"着重探讨了CSS布局的几个关键方面：居中布局、多列布局以及全屏布局，这些都是构建现代网页必不可少的技术。 ### 一、居中布局 居中布局是一种常见的网页设计需求，使得内容无论在什么分辨率下都...
html css 网页大作业
最新发布
06-13
HTML和CSS是构建网页设计的基础技术，它们在网页开发中起着至关重要的作用。HTML（HyperText Markup Language）是用于创建网页结构的语言，而CSS（Cascading Style Sheets）则负责定义这些结构的外观和布局。 HTML...
Layout框架
06-03
Layout框架，根据html文件，来生成aspx页面。
06-HTML_CSS_Layout
05-24
【标题】"06-HTML_CSS_Layout" 涉及到的是网页设计中的核心元素——HTML（超文本标记语言）和CSS（层叠样式表）在布局方面的应用。这一主题探讨了如何通过HTML和CSS来创建和控制网页的结构与样式，实现各种复杂的...
【尚硅谷前端html+css】03_layout
m0_50663470的博客
07-18 96
文档流、盒子模型、默认样式、盒子的尺寸、轮廓阴影和圆角 form尚硅谷
android 布局学习
dashenju7973的博客
01-13 253
各种layout用到的一些重要属性 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中 android:layout_alignParentBottom 贴紧父元素的下边缘 an...
html 流式布局 置顶,自定义UICollectionViewLayout实现
weixin_42512183的博客
05-30 280
在使用UICollectionView时，基于系统提供的UICollectionViewFlowLayout能实现大部分的功能，但是不能实现瀑布流的布局，同时iOS 9.0之后支持的Header置顶功能，不能满足多个Header叠加置顶的场景。研究网上的一些自定义布局实现，没有发现一个完全能满意的实现，于是就兴起了自己实现一个的念头。研究了UICollectionViewFlowLayout的布局...
position
Major_S的博客
02-11 383
126.less简介 127.less中的变量 128.父元素和扩展 129.混合函数 130.less的补充 131.弹性盒简介 132.会弹的导航条 133.弹性容器上的样式 134.弹性元素上的样式 135.淘宝导航 136.聊聊像素 137.手机像素 138.完美视口 139.vw单位 140.vw适配 141.移动端页面上部分 142.完成移动端页面 143.媒体查询简介 144.媒体...
【HTMLayout学习】1.Hello world，你懂的
热门推荐
笨笨D幸福 - 后花园
08-07 1万+
每种编程语言都有它的Hello world，这已经是大家的共识了，所以我也不能免俗。 1、需求软件： VS软件 + HTMLayout SDK SDK下载地址：http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip 也可以在页面右侧查看对应的使用说明。 2、配置 将下载的文档解压到任意目录，现对于重要文档加以说明： bin
html+div属性布局,解析四大DIV布局（Layout）属性用法
weixin_26850469的博客
06-04 1264
在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素，这里和大家分享一下DIV布局(Layout)属性，主要包括position属性，direction属性，float和clear属性等内容。DIV布局(Layout)属性：在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于...
html layout 布局
dualvencsdn的博客
01-16 6385
我的理解： 自然布局：默认的流式布局：就是块级的垂向下，块内的横向移动。 浮动布局：通过float，可以将块级的并行在一排。 层模型 特点：如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed absolute 需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖...
/* layout_1.css */应该插入到哪里
05-29
一般情况下，/* layout_1.css */应该插入到HTML文档的标签中的标签中，或者单独引用一个CSS文件。这样可以确保CSS样式表在页面加载时能够被正确加载，从而对页面的样式进行控制。如果你使用的是外部CSS文件，则可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值