盒模型的属性丶display显示丶浮动

一丶盒模型的属性(重要)

　　1.padding

　　　　padding是标准文档流,父子之间调整位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>padding</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*上下左右*/
                padding: 10px;
                /*上下  左右*/
                padding: 20px 30px;
                /*上  左右  下*/
                padding: 20px 30px 40px;
                /*顺时针   上右下左*/
                padding: 20px 30px 40px 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
    </body>
</html>

padding

　　2.border

　　　　三要素: 线性的宽度线性的样式颜色

　　　　solid 实线　　dotted小圆点　　double双实线　　bottom虚线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*根据方向来设置*/
                border-left: 5px solid green;
                border-right: 1px dotted yellow;
                border-top: 5px double purple;
                border-bottom: 1px dashed;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
    </body>
</html>

border

　　实例:制作三角形

　　transparent 透明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>制作三角形</title>
        <style type="text/css">
            div{
                width: 0;
                height: 0;
                border-bottom: 20px solid red;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;

            }
        </style>

    </head>
    <body>
        <div>

        </div>
    </body>
</html>

制作三角形

　　3.margin

　　　　前提:必须是在标准文档流下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <style>
            .s1{
                background-color: red;
                margin-right: 30px;
            }
            .s2{
                background-color: rgb(0,128,0);
                margin-left: 30px;
            }
        </style>
    </head>
    <body>
        <span class="s1">alex</span><span class="s2">wusir</span>
    </body>
</html>

margin

　　margin垂直方向上的坑:

　　　　margin的水平不会出现任何问题

　　　　垂直方向上 margin会出现‘塌陷问题‘

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin坑</title>
        <style>
            .s1{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-bottom: 40px;
            }
            .s2{
                width: 200px;
                height: 200px;
                background-color: green;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="s1"></div>
        <div class="s2"></div>
    </body>
</html>

margin(坑)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin父子盒子的坑</title>
        <style type="text/css">
            .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
            .child{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-left: 50px;
                margin-top: 50px;
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child">
            </div>
        </div>
    </body>
</html>

margin父子盒子的坑

二丶display显示

　　前提;必须是在标准文档流下

　　块级元素和行内元素的相互转换:

　　　　块级元素可以转换为行内元素:

　　　　　　display:inline

　　　　　　此时这个div不能设置宽度丶高度;

　　　　　　此时这个div可以和别人并排了

　　　　行内元素转换为块级元素:

　　　　　　display:block

　　　　　　此时这个span能够设置宽高

　　　　　　此时这个span必须霸占一行了,别人无法和他并排

　　　　　　如果不设置宽度,将撑满父亲

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display</title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border: 1px solid yellow;
            }
            div a{
                display: block;
                width: 100px;
                height: 100px;
            }
            span{
                display: inline-block;
                width: 300px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
        <div class="box">wusir</div>

        <div>
            <a href="#">
                <img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/>
            </a>
        </div>

        <input type="text" /><br />
        <span>哈哈哈哈</span>
        <span>嘻嘻嘻嘻</span>
    </body>
</html>

display

三丶浮动

　　float : none 表示不浮动,默认

　　　　　 left:表示左浮动

　　　　　 right:表示右浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>
        <div class="father2">

        </div>
    </body>
</html>

浮动

　　我们该如何清除浮动呢?有以下几种方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
                height: 300px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>
        <div class="father2">

        </div>
    </body>
</html>

固定高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
            .clearfix{
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <!-- 内墙法 -->
            <div class="clearfix"></div>
        </div>
        <div class="father2">

        </div>
    </body>
</html>

clearfix内墙法

　　　　 visibility:hidden; 设为隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素清除法</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }

            .clearfix:after{
                content: ‘.‘;
                clear: both;
                display: block;
                visibility: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="father clearfix">
                <div class="box1">1</div>
                <div class="box2">2</div>
                <div class="box3">3</div>

            </div>
        </div>
        <div class="father2"></div>
    </body>
</html>

伪元素清除法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素清除法</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
                overflow: hidden;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="father">
                <div class="box1">1</div>
                <div class="box2">2</div>
                <div class="box3">3</div>

            </div>
        </div>
        <div class="father2"></div>
    </body>
</html>

overflow清除法

原文地址：https://www.cnblogs.com/qicun/p/9675615.html

时间： 2024-08-28 16:53:02

盒模型的属性丶display显示丶浮动的相关文章

盒模型的属性/display显示(重要)/浮动(重要)

一.关于上篇博客的总结 1.高级选择器: (1).后代选择器***** 选择的是儿子,孙子,重孙子 div p{} (2).子代选择器选择的是亲儿子 div>p (3).组合选择器 div,p,a,span{} (4).交集选择器 div.active{} (5).属性选择器 input[type="text"]{} (6),伪类选择器爱恨准则 a:link{} a:visited{} a:hover{} a:active{} 对a来设置字体颜色,一定要选中a (7).伪元素

盒模型 box-sizing 属性

css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)(所占空间)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height. border-box:让元素维持I

使用flex盒模型实现内容完全居中显示

display: flex; justify-content: center; align-items: center; height: 300px;border:1px solid;

CSS3盒模型阴影属性

CSS3盒子阴影属性box-shadow也是CSS3新增的一个重要属性,用来定义元素的盒子阴影. inset: 阴影类型, 可选值. 如果不设置, 其默认的投影方式是外阴影: 如果取其唯一值" inset", 就是给元素设置内阴影. x-offset: 阴影水平偏移量, 其值可以是正负值. 如果取正值, 则阴影在元素的右边, 反之取负值, 阴影在元素的左边. y-offset: 阴影垂直偏移量, 其值可以是正负值. 如果取正值, 则阴影在元素的底部, 反之取负值, 阴影在元素的顶部.

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始,会利用几个篇幅,我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术). 由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点. 下一篇文章,我会带领大家开发一个兼容 pc端浏览器和移动端浏览器的弹性布局web界面的实例.希望大家能从中领受到CSS3在布局方面的强大功能. 好了,长话短说,现在开始我们的<CSS3中的弹性流体盒模型技术详解>之旅吧! 在讲解CSS3中新增的弹性布局属性之前,我们先回顾一下CSS1 和 CSS2中都已经定

html5浮动、等高、弹性盒模型

1px dashed虚线 box-sizing拯救了布局 1.inherit 继承父级 2.content-box(默认)-----这个盒子的边框.内边距这2个值是不包括在width和height中,所以外扩 3.border-box---- 这个盒子的边框.内边距这2个值是包括在width和height中了浮动就是让元素脱离了文档.文档为空后,所以边框就包不住了.所以我们要清除浮动方法一:(有问题,不建议) 之前html是用clear来清除的,现在不能用这个了 <!-- 在父级里添加

CSS3弹性盒模型与布局

一.弹性盒模型 1.注意:在使用弹性盒模型的时候,父元素必须要加display:box 或 display:inline-box,同时要加浏览器内核前缀 Box-orient 定义盒模型的布局方向 Horizontal 水平显示 vertical 垂直方向 box-direction 元素排列顺序 Normal 正序 Reverse 反序 box-ordinal-group 设置元素的具体位置 Box-flex 定义盒子的弹性空间子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所

CSS布局（弹性盒模型）

一.弹性盒模型介绍 1.弹性盒模型介绍 — 基础知识弹性盒模型( Flexible Box 或 Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐.方向.排序(即使在项目大小位置.动态生成的情况).弹性盒模型最大的特性在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局. *弹性容器(flex container) *弹性子元素(flex item) *轴分为主轴(main axis) 侧

CSS3中的弹性流体盒模型技术详解

先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去消化与理解.可能平时你们还一直在使用table,然后通过不断了合并单元格来实现网页布局.希望我今天的这篇文章能彻底改变大家的观念. Q:如何理解盒子模型? A:大家可以想一想,在现实生活中,如果我们拿一个盒子来装东西,那么盒子里面的东西是不是跟这个盒子之间会有空隙呢?站在里面物品的角度,则它们之间的间隙

盒模型的属性丶display显示丶浮动

一丶盒模型的属性(重要)

1.padding

padding是标准文档流,父子之间调整位置

2.border

三要素: 线性的宽度 线性的样式 颜色

solid 实线 dotted小圆点 double双实线 bottom虚线

实例:制作三角形

transparent 透明

3.margin

前提:必须是在标准文档流下

margin垂直方向上的坑:

margin的水平不会出现任何问题

垂直方向上 margin会出现‘塌陷问题‘

二丶display显示

前提;必须是在标准文档流下

块级元素和行内元素的相互转换:

块级元素可以转换为行内元素:

display:inline

此时这个div不能设置宽度丶高度;

此时这个div可以和别人并排了

行内元素转换为块级元素:

display:block

此时这个span能够设置宽高

此时这个span必须霸占一行了,别人无法和他并排

如果不设置宽度,将撑满父亲

三丶浮动

float : none 表示不浮动,默认

left:表示左浮动

right:表示右浮动

我们该如何清除浮动呢?有以下几种方法

visibility:hidden; 设为隐藏

盒模型的属性丶display显示丶浮动的相关文章

　　1.padding

　　　　padding是标准文档流,父子之间调整位置

　　2.border

　　　　三要素: 线性的宽度线性的样式颜色

　　　　solid 实线　　dotted小圆点　　double双实线　　bottom虚线

　　实例:制作三角形

　　transparent 透明

　　3.margin

　　　　前提:必须是在标准文档流下

　　margin垂直方向上的坑:

　　　　margin的水平不会出现任何问题

　　　　垂直方向上 margin会出现‘塌陷问题‘

　　前提;必须是在标准文档流下

　　块级元素和行内元素的相互转换:

　　　　块级元素可以转换为行内元素:

　　　　　　display:inline

　　　　　　此时这个div不能设置宽度丶高度;

　　　　　　此时这个div可以和别人并排了

　　　　行内元素转换为块级元素:

　　　　　　display:block

　　　　　　此时这个span能够设置宽高

　　　　　　此时这个span必须霸占一行了,别人无法和他并排

　　　　　　如果不设置宽度,将撑满父亲

　　float : none 表示不浮动,默认

　　　　　 left:表示左浮动

　　　　　 right:表示右浮动

　　我们该如何清除浮动呢?有以下几种方法

　　　　 visibility:hidden; 设为隐藏