前端 盒模型布局 浮动布局

盒模型布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型布局</title>
    <style>
        body {
            margin: 0;
            padding: 100px 0 0 200px;
        }

        /*盒模型组成部分: */
        /*margin + border + padding + content
        1.每部分都有自己的独立区域
        2.content是宽x高,作为内容或子标签的显示区域
        3.padding是内边距,没有自身颜色,完成内容的内移(保证显示区域大小不变,可以响应减小content)
        4.border是边框,有宽度、样式、颜色,自身透明(transparent)时,是可以透出背景颜色的
        5.margin是外边距,控制盒子的显示位置,left、top控制自身,right、bottom影响兄弟
        注:margin的偏移依据当前所在位置
        */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        owen {
            /*margin: 10px;*/
            margin-top: 50px;
            margin-left: 10px;
            /*margin-right: 10px;*/
            /*margin-bottom: 100px;*/
        }

        owen {
            /*border-color: black;*/
            /*border-width: 3px;*/

            /*none solid dashed dotted*/
            /*border-style: solid;*/

            border: red dashed 10px;
        }

        owen {
            /*padding: 上右下左,不足找对边*/
            /*padding: 10px 20px 30px;*/
            padding: 10px;
        }
        owen {
            display: block;
            /*width: 100px;*/
            width: 80px;
            /*height: 100px;*/
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!--
    盒模型:
    概念:广义上页面中所有的标签都称之为盒子,狭义上布局的盒子指的是display:block
    -->
    <owen>123</owen>
    <div></div>
</body>
</html>

浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .wrap {
            border: 10px solid yellow;
            width: 300px;
            /*父级在宽度不固定时高度不能设置死*/
            /*height: 300px;*/
        }
        /*清浮动:父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集*/
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            font: 20px/100px 'Arial';
            color: blue;
            text-align: center;
        }
        .box {
            float: left;
        }
        .b {
            width: 500px;
            height: 100px;
            background-color: red;
        }
        /*浮动布局:
        1.子集浮动参照父级宽度
        2.子集浮动不再撑开父级高度
        3.父级高度需要自己处理,否则会影响兄弟布局,采用清浮动处理
        */
    </style>
    <style>

        h1:before {
            content: '123';
        }
        /*当控制的控制自身完成所有布局(包含所有子集布局),再执行该时间点*/
        h1:after {
            content: '000';
        }
    </style>
</head>
<body>
    <h1>内容</h1>

    <!--.wrap>.box{$}*9-->
    <div class="wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
    <div class="b"></div>
</body>
</html>

两种布局案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>两种布局总结</title>

    <style>
        body, h1 {
            margin: 0;
        }
    </style>
    <style>
        .header {
            width: 1210px;
            height: 100px;
            background-color: orange;
            /*自动获取留白区域*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
        .header:after {
            content: '';
            display: block;
            clear: both;
        }
        .header a {
            display: block;
            width: 500px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .header form {
            /*background-color: pink;*/
            float: right;
            /*父子级顶端产生距离,建议使用padding*/
            padding-top: 30px;
        }
        .header input {
            /*margin-right: 20px;*/
            width: 220px;
            height: 30px;
            border: none;
            font-size: 17px;
            vertical-align: top;
        }
        .header button {
            width: 32px;
            height: 32px;
            border: none;
            background-color: red;
            outline: none;
            color: white;
            margin-right: 30px;
            vertical-align: top;
        }

    </style>
</head>
<body>
    <!--盒模型:margin、padding协调操作,能用padding尽量用padding,再考虑用margin-->
    <!--浮动:需要左右排列的block采用浮动布局,且父级一定要清浮动-->
    <div class="header">
        <h1>
            <a href=""></a>
        </h1>
        <form method="get" action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <button type="submit">Go</button>
        </form>
    </div>

</body>
</html>

原文地址:https://www.cnblogs.com/bladecheng/p/11284525.html

时间: 2024-10-07 23:39:19

前端 盒模型布局 浮动布局的相关文章

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

弹性盒模型(伸缩布局)

一.弹性盒模型(伸缩布局) flxible box 前言: 弹性布局,用来为盒子提供灵活性.就像是当把浏览器缩小的的时候,不会像float属性会依然往下掉,灵活性不好.而且当布局盒装模型的时候依赖于float+position+display,例如实现垂直居中就很不方便了. 一)语法 {display: flex;} /*作为块级伸缩盒子显示*/ {display: inline-flex;} /*作为内联块级伸缩盒子显示:行内的元素也能使用*/ 是不是感觉很熟悉呢?这就类似于 block 和 

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS弹性盒模型flex在布局中的应用

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中 [1]伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items <style> .parent{ display: flex; justify-content: center; align-items: center; } &

CSS基础 - 盒模型、浮动、定位

1 CSS盒模型 在以前,程序员们是通过表格来对一个网页进行排版,也就是通过大小不一的表格和表格嵌套来定位排版网页的内容.后来,CSS出现之后,在网页布局中,为了能够使页面中的各个部分合理的进行组织,开发人员们总结出了一套完整的.行之有效的原则和规范,也就是"盒模型".它是通过使用CSS来定义大小不一的盒子和盒子嵌套来编排网页. 因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器. 页面中的所有元素都可以看成是一个盒子,一个页面由很多的盒子组成,这些盒子之间会相互影响,所以

css盒子布局,浮动布局以及显影与简单的动画

08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left.top控制自身,right.bottom影响兄弟 3.border 宽度:border-width 颜色:border-color 透明度:transparent 样式:border-style: 常用的样式 none:没有边框 solid:实线 dashed虚线 dotted点或者方框根据浏览器不

209.4.4 盒模型&amp;定位&amp;浮动

盒模型 盒模型 除了图片表单元素之外,基本所有标签都可以看做一个盒子 盒模型的要素 width和height 标签内容的宽高,不是盒子的宽高 padding 内边距 内边距是标签内容和边框的距离 padding的颜色和标签内容一致 margin 外边距 外边距是标签相对于父标签和兄弟标签的距离 兄弟标签之间margin会相互重叠,以大的margin为准 border 边框 浮动 如果某个标签A是浮动的 假如A标签的上一个标签也是浮动的 那么A就会跟在上一个标签后面 如果一行放不下两个标签 A就会

IT兄弟连 HTML5教程 使用盒子模型的浮动布局

虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止.并且由于浮动的盒子模型不在文档的普通流中,所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样. 1  设置浮动 在CSS中,我们通过float属性实现盒子区块框向左或向右浮动.其实任何元素都可以浮动,而浮动元素会生成一个块级框,而不论它本身是何种元素.但浮动的

css3盒模型和弹性布局的相关属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素.假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box".这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中.看了有些晕啊,看一下以下几个属性应该就懂了:1.content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框.例如: div{box-sizing:border-box; -moz-box-sizing:borde