盒子模型 补白

最新推荐文章于 2022-11-14 20:37:24 发布
最新推荐文章于 2022-11-14 20:37:24 发布
阅读量302 收藏
点赞数
分类专栏： Web前端 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyuanliulian/article/details/81057580
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        ul{
            padding: 0;
            margin: 0;
           list-style: none;
        }

        #nav{
        width: 100%;
        height: 100%;
        border: 1px solid pink;

        }
        #nav li{
            float: left;
            background-color: #def;
            font-size: 16px;
            line-height: 32px;
            text-align: center;
            margin: 0 2px;
          /*  width: 1em; !*这种写法表示宽度是元素字体的1倍*!*/
            width: 9%; /*这种事表示宽度是父级元素宽度的百分之九*/
            padding: 0 5%; /*补白区域 */
            /*li在开始的时候定义了宽度是9%  可以利用<a>来查看该宽度
            然后又定义了li的补白区域padding 左右是5%

            所以li的实际宽度是  content+ 2*(border+padding+margin)
            这个需要理解下
            */
        }
        #nav li a{
            display: block;
            border: 1px solid pink;
        }

    </style>
</head>
<body>
<!--定义边界-->
<ul id="nav">
    <li><a href="">美丽说</a></li>
    <li><a href="">唯品会</a></li>
    <li><a href="">商城</a></li>
    <li><a href="">蘑菇街</a></li>
    <li><a href="">1号店</a></li>

</ul>
</body>
</html>

实例二：当边界重叠或者宽度溢出的时候，建议选用补白作为调整元素间距的首选属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <style>

        ul{
            padding: 0;
            margin: 0;
           list-style: none;
        }

        #nav{
        width: 100%;
        height: 100%;
        border: 1px solid pink;

        }
        #nav li{
            float: left;
            background-color: #def;
            font-size: 16px;
            line-height: 32px;
            text-align: center;
            margin: 0 2px;
          /*  width: 1em; !*这种写法表示宽度是元素字体的1倍*!*/
            width: 9%; /*这种事表示宽度是父级元素宽度的百分之九*/
            padding: 0 5%; /*补白区域 */
            /*li在开始的时候定义了宽度是9%  可以利用<a>来查看该宽度
            然后又定义了li的补白区域padding 左右是5%

            所以li的实际宽度是  content+ 2*(border+padding+margin)
            这个需要理解下
            */
        }
        #nav li a{
            display: block;
            border: 1px solid pink;
        }

    </style>-->
    <style>
        #box1{
            margin-bottom: 6px;
/*
            padding-bottom: 3px;
*/
            border: 1px solid pink;

        }
        #box2{
            /*
            如果要调整box1和box2的间距为9像素 四种方法
            增加box1的margin-bottom属性为9px  d到时可能会影响其他同行模块的布局
            增加box1的padding-bottom为3px  但会使上边元素过于上移而呈现突兀
            增加box2的margin-top的属性为3px，由于上下边界的重叠而无法实现，
            增加box2的padding-top属性为3px 这样就可以实现上述的效果
            */
            padding-top: 3px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
<!--定义边界-->
<!--<ul id="nav">
    <li><a href="">美丽说</a></li>
    <li><a href="">唯品会</a></li>
    <li><a href="">商城</a></li>
    <li><a href="">蘑菇街</a></li>
    <li><a href="">1号店</a></li>

</ul>-->
<div id="box1">上边元素</div>
<div id="box2">下边元素</div>
</body>
</html>

resize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <style>

        ul{
            padding: 0;
            margin: 0;
           list-style: none;
        }

        #nav{
        width: 100%;
        height: 100%;
        border: 1px solid pink;

        }
        #nav li{
            float: left;
            background-color: #def;
            font-size: 16px;
            line-height: 32px;
            text-align: center;
            margin: 0 2px;
          /*  width: 1em; !*这种写法表示宽度是元素字体的1倍*!*/
            width: 9%; /*这种事表示宽度是父级元素宽度的百分之九*/
            padding: 0 5%; /*补白区域 */
            /*li在开始的时候定义了宽度是9%  可以利用<a>来查看该宽度
            然后又定义了li的补白区域padding 左右是5%

            所以li的实际宽度是  content+ 2*(border+padding+margin)
            这个需要理解下
            */
        }
        #nav li a{
            display: block;
            border: 1px solid pink;
        }

    </style>-->
    <!--<style>
        #box1{
            margin-bottom: 6px;
/*
            padding-bottom: 3px;
*/
            border: 1px solid pink;

        }
        #box2{
            /*
            如果要调整box1和box2的间距为9像素 四种方法
            增加box1的margin-bottom属性为9px  d到时可能会影响其他同行模块的布局
            增加box1的padding-bottom为3px  但会使上边元素过于上移而呈现突兀
            增加box2的margin-top的属性为3px，由于上下边界的重叠而无法实现，
            增加box2的padding-top属性为3px 这样就可以实现上述的效果
            */
            padding-top: 3px;
            border: 1px solid pink;
        }
    </style>&lt;!&ndash;&ndash;&gt;-->
    <style>
        #resize{
/*
            background: url("image/02.jpg") no-repeat center;
*/
            width: 200px;
            height: 120px;
            max-height: 800px;
            max-width: 600px;
            border: 1px solid pink;
            /*必须同时定义resize和overflow*/
            resize: both;
            overflow: auto;
        }


    </style>
</head>
<body>
定义边界
<!--<ul id="nav">
    <li><a href="">美丽说</a></li>
    <li><a href="">唯品会</a></li>
    <li><a href="">商城</a></li>
    <li><a href="">蘑菇街</a></li>
    <li><a href="">1号店</a></li>

</ul>-->
<!--<div id="box1">上边元素</div>
<div id="box2">下边元素</div>-->

<!--定义元素尺寸大小
resize  允许用户通过拖动方式改变元素大小
默认 none  双向尺寸调整both  单项水平尺寸调整horizontal  vertical提供垂直尺寸调整   inherit 继承
-->


<div id="resize"></div>






</body>
</html>

 

woyuanliulian
关注
专栏目录
CSS的边框与补白
人生如梦，一樽还酹江月
10-04 3439
function runCode(obj){ var winTemp = window.open(,_blank); winTemp.document.open(text/html,replace); winTemp.document.writeln(obj.innerText); winTemp.document.close();}
前端面试之盒子模型（标准盒模型、怪异盒模型）
井旭的博客
08-25 1651
1.CSS盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(c
盒子模型
08-01 122
盒子模型 盒子 决定盒子的大小由width height padding border,margin对盒子大小的不起作用 盒子关系（标准文档流） 块状元素 默认宽度由父元素决定 高度由内容撑开 行内元素 宽度由内容决定 块状元素 可以设置宽高，行内元素不可以 行内元素 只可以设置左右外边距 上下内边距会影响相邻的元素 块状元素 垂直margin会合并(margin坍陷) 块状元素 可以...
css中边界和补白
张晓丛的专栏
12-01 1616
边界和补白 HTMLDog指南 > CSS初级指南 > 边界和补白 边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注）是隔开元素最常用的两个属性。边界是元素外
什么是盒模型
Pursuit53的博客
02-23 325
什么是盒模型呢？以下是我的理解。
【Web 前端】盒子模型
火山君的博客
11-09 645
边框 （围绕内容以及补bai）
CSS3盒子模型详解
12-13
掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度； 盒的类型 inline-block css中我们使用display来...
用盒子模型的html代码,HTML/CSS基础课程笔记————盒子模型篇
weixin_39530838的博客
06-07 1489
——————————————————————————盒子模型———————————————————————————————盒子模型=网页布局的基石( 文本，图像，音频，视频等)，还能控制盒子与内容还要盒子与盒子之间的距离盒子模型由4个部分组成：边框(border)外边距(margin)内边距(padding)边框，外边距，内边距是盒子模型的特性也就是盒子模型的属性盒子中的内容(content)盒子...
HTML中盒子模型六大属性
qq_39162309的博客
02-23 5710
  一个网站就是靠盒子一个一个堆起来，HTML中所有的盒子都是矩形 （一）盒子组成结构简单了解 一个盒子是由如下几个区域组成： 1）盒子的内容区域：可以通过width和height来设置内容区域的宽高 2）盒子的内填充区域（补白） padding ：通过padding来设置，这个padding是分上下左右四个方向。 3）盒子的边框区域 border：通过border来设置，分上下左右四个方向。 ...
（三）盒子模型之内边距padding
weixin_47481102的博客
05-05 710
padding属性用于设置内边距，级边框与内容之间的距离。单位是px。 属性 作用 padding-left 左内边距 padding-right 有内边距 padding-top 上内边距 padding-bottom 下内边距 练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta h
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
CSS 外补白(Margin) 内补白(Padding) 边框属性 定位（positioning）属性 布局(layout)属性
xyjikl
11-17 1135
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2/CSS3 无 css 布局 display，设置或检索对象是否及如何显示。 float C
HTML之设置背景、边框、边距和补白
DoubleC的博客
04-22 1万+
背景颜色、背景图片、边框和边距,这些在网页设计中都是使用得比较多的修饰方法。合理地配置网页的前景色与背景色,再加以边款和边距的辅助,可以让网页看起来更漂亮。 背景颜色 背景通常指的是除了文本与边框之外的所有颜色。在CSS里可以使用background-color来设置背景颜色。background-color属性的语法如下: background-color : transparent |...
CSS边界和补白
stoneoil的专栏
07-24 516
 边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注）是隔开元素最常用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。为h2改进代码如下： Example So
什么是盒子模型
兵临城下的专栏
08-01 5925
定义： 把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型 盒子模型有两种形式：标准盒子模型，怪异盒子模型...
【JavaWeb】CSS_css中的边框属性（盒子模型的边框设置）
午后红茶
01-16 5520
CSS边框属性 1.在页面布局中通常使用 div 标签（盒子模型），进行页面块的划分 2.边框的属性： （1）边框颜色 border-color （2）边框宽度 border-width （3）边框的格式 border-style 边框格式属性：solid——单实线  dashed——虚线  dotted——点  double——双实线 3.边框的四条边可分别使用：top ri
盒子边框设置的简写样式
weixin_44932552的博客
10-09 711
1.盒子边框的属性三个不是缺一不可，浏览器会默认其他未写的值。大部分浏览器边框的宽度和颜色有默认值，而边框的样式默认值是none。 2.边框的简写样式，通过它可以同时设置4个边框的样式，宽度，颜色，而且没有顺序要求。 注意：border：是同时指定4个边框，不能同时指定。 但是提供了border-xxx(top/right/bottom/left)可以同时设置4个边框中的一个边。 如下例所示，两...
设计渐变的背景之-webkit-gradient
落叶
07-10 9602
-webkit-gradient 做一个渐变的背景&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; /
outline
落叶
07-16 9034
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; input:focus ,button:focus
Java实现图片补白
最新发布
05-27
Java实现图片补白，可以使用Java的图像处理类库Java Advanced Imaging (JAI)来实现。具体步骤如下： 1. 读取原始图片 ```java File file = new File("original_image.jpg"); BufferedImage image = ImageIO.read...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值