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

番茄西红柿发布于2019-04-23 13:22 / 1400人阅读

摘要：一丶盒模型的属性重要是标准文档流父子之间调整位置上下左右上下左右上左右下顺时针上右下左三要素线性的宽度线性的样式颜色实线小圆点

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

　　1.padding

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

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>paddingtitle>
        <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">alexdiv>
    body>
html>

padding

　　2.border

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

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

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bordertitle>
        <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">alexdiv>
    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>margintitle>
        <style>
            .s1{
                background-color: red;
                margin-right: 30px;
            }
            .s2{
                background-color: rgb(0,128,0);
                margin-left: 30px;
            }
        style>
    head>
    <body>
        <span class="s1">alexspan><span class="s2">wusirspan>
    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>displaytitle>
        <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">alexdiv>
        <div class="box">wusirdiv>
        
        <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">1div>
            <div class="box2">2div>
            <div class="box3">3div>
        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">1div>
            <div class="box2">2div>
            <div class="box3">3div>
        div>
        <div class="father2">
            
        div>
    body>
html>

固定高度

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"
                 
                                                                                                                    
                         GPU服务器
                                             
                         云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               display属性
                                                                                                           盒模型
                                                                                                           盒模型html吗
                                                                                                           简述html盒模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1784.html

浮动的补充丶文本和字体属性丶background丶定位

摘要：英语为了防止用户电脑里面，没有微软雅黑这个字体。因为绝对定位脱离标准流，影响页面的布局。一丶浮动的补充　　浮动的特性: 　　　　1.浮动的元素脱标　　　　2.浮动的元素互相贴靠　　　　3.浮动的元素有字围效果　　　　4.浮动的元素有收缩的效果　　　　前提是标准文档流,margin的垂直方向会出现塌陷问题　　　　如果盒子居中:margin: 0auto;如果盒子浮动了,margin...

番茄西红柿 2019-04-23 13:22 评论0 收藏0
AngularJs 功能（三）--数据绑定丶作用域

摘要：功能数据绑定的双向数据绑定，一方面可以做到变化驱动了中元素变化，另一方面也可以做到元素的变化也会影响到。其次告诉，对页面上的这个进行双向数据绑定。第三告诉，在这个指令模版上显示这个的数据。作用域是一个把一个元素连结到上的对象。功能数据绑定 AngularJS的双向数据绑定，一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。 ...

joywek 2019-08-22 13:54 评论0 收藏0
基于ONENET云平台数据的MQTT协议的使用及模拟数据和搭建。

登录与添加：首先，我们打开ONENET云平台然后选择登录登录以后我们选择多协议接入中的MQTT 接着我们点击添加产品按钮输入产品名称丶行业丶类别丶简介技术参数中联网方式我们可以根据实际情况来选择，设备接入协议选择MQTT协议，操作系统选择uC/OS系统，网络运营商选择移动。接着系统会弹出一个页面我们选择立即添加设备也可以从设备列表进行添加设备设备名称可...

不知名网友 2021-11-29 10:50 评论0 收藏0
JVM虚拟机笔记之运行时数据区域(一)

摘要：本文参照深入了解虚拟机周志明，纯粹做做笔记，写写自己觉得较为重要的内容方便理解虚拟机运行时数据区如下程序计数器程序计数器寄存器是一块较小的内存空间，看做是当前线程所执行的字节码的行指示器。异常情况也与虚拟机栈一致。本文参照深入了解Java虚拟机-周志明，纯粹做做笔记，写写自己觉得较为重要的内容方便理解 Java虚拟机运行时数据区如下： showImg(https://segmentf...

mgckid 2019-08-16 15:55 评论0 收藏0
利用 Css 制作精美的卡片UI

摘要：固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。字体及其他博文链接利用制作精美的卡片源码链接利用制作精美的卡片原文链接翻译墨丶水瓶本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。第一步：确定 HTML 代码结构在创建 HTML 代码前，你...

Ilikewhite 2019-08-29 12:35 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师

我要关注我要私信

TA的文章

tensor

阅读 435·2023-04-25 19:43
Windows 下安装 XGBoost

阅读 3627·2021-11-30 14:52
Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

阅读 3420·2021-11-30 14:52
VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

阅读 3529·2021-11-29 11:00
百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

阅读 3497·2021-11-29 11:00
Linux系统和宝塔面板如何启用禁ping功能?

阅读 3525·2021-11-29 11:00
301重定向怎么做?301重定向设置方法有几种

阅读 3266·2021-11-29 11:00
wordpress网站重定向次数过多的解决方法

阅读 5430·2021-11-29 11:00

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

盒模型的属性丶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:表示右浮动

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

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动

　　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:表示右浮动

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