学习HTML与CSS的第七天————内边距、外边距

最新推荐文章于 2023-12-28 10:50:49 发布
最新推荐文章于 2023-12-28 10:50:49 发布
阅读量288 收藏
点赞数
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44055237/article/details/104931311
版权 
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title></title>
      <style type="text/css"> 
      .box1{
        width: 200px;
        height: 200px;
        background-color: green;
        border: red solid 10px;
        /* 
          内边距（padding），指的是盒子的内容区与盒子边框之间的距离

           一共有四个方向的内边距，可以通过：
             padding-top
             padding-right
             padding-bottom
             padding-left
              来设置四个方向的内边距
            

            内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
            盒子的大小由内容区、内边距和边框共同决定
            
         */
        /*  padding-top: 100px;
         padding-right: 100px;
         padding-bottom: 100px;
         padding-left: 100px; */
         /* 
            使用padding可以同时设置四个边框的样式，用法和border-width一样
          */
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
      </style>
    </head>
    <body>
      <div class="box1">
        <div class="box2"></div>
      </div>
    </body>
</html>
 
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title></title>
      <style type="text/css"> 
      .box{
        width: 200px;
        height: 200px;
        background-color:#bfa;
        border: red solid 10px;
        /* 
           外边距指的是当前盒子与其他盒子之间的距离
           不会影响可见框的大小，而是会影响到盒子的位置
           盒子有四个方向的外边距：
              margin-top
              margin-right
              margin-left
              margin-bottom
              由于页面中的元素都是靠左排放
              所以设置左外边框或上外边框时，会导致原来盒子的位置改变
              但是设置右外边距或下外边距时，会导致其他盒子的位置改变
         */
         /* 设置box的上外边距，盒子上边框和其他盒子的距离 */
         margin-top: 100px;
         /*  设置box的左外边距，盒子左边框和其他盒子的距离 */
       /*   margin-left: 100px; */
         margin-bottom: 100px;
         /* 
           外边距也可以指定为一个负值，
            如果外边距设置的是负值，则元素会向反方向移动
          */
          margin-left: -100px;
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* 
        margin还可以设置为auto，auto一般只设置给水平方向的margin
         如果只指定，左外边距或者右外边距的margin为auto则会讲外边距设置为最大值
         垂直方向外边距如果设置为auto，则外边距默认就是0


         如果left和right同时设置为auto，则会将两侧的外边距设置为相同的值
          就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
          以使子元素在父元素中水平居中

         */
         /* margin-left: auto; */
         margin-top: auto;

         /* 外边距同样可以使用简写属性margin，规则和padding一样 */
      }
      </style>
    </head>
    <body>
      <div class="box"></div>
      <div class="box2"></div>
    </body>
</html>

 

不爱学习的大头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
七天学会h5和css3之盒子模型内边距和外边距（27）
weixin_45147894的博客
06-05 1245
先来练习一个题目：做一个新浪体育文本页面。,可能你现在并不能很好的做出这个效果，但是学习了本节后，你将很快的做出这个页面，具体代码和效果如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &lt
盒子模型
December_shi的博客
09-13 427
盒子模型（CSS重点） 1.盒子边框（border） 语法： border:border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 border-color 边框颜色 边框的样式： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线（最为常用的） dashed：边框为虚线 dotted：边框为点线 2.
前端开发_HTML5_CSS部分-内外边距(padding/margin)
u013185175的博客
12-15 5882
内外边距(padding/margin) 1.引入 我们在之前的学习中学习了边框，我们发现只要是页面的标签元素，都可以实现边框的效果，那么接下来我们来讲解一个比较重要的知识点，边距，边距分为内边距和外边距，它们和边框一起是我们后面学习盒子模型的重要基础。 2.内外边距理解 为了更好的帮助广大的学习者理解所讲授的知识点，我们使用现实生活中的一个例子来帮助理解border、padding、margin之间的关系。 小明网购了一个杯子和一个手机，然后商家就要开始打包包裹，然后发送给小明...
h5绚丽的边框-border渐变和字体颜色渐变
开心大表哥
12-01 1万+
1.先看效果图： 2.代码上部分注稀：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </head> <body> <style> body{
H5边框样式大全
mazegong的博客
07-17 7016
none                                          没有边框 dashed                                      破折线边框 dotted                                       圆点线式边框 double                                    
HTML5边框的设置（border）
热门推荐
恬静的男子的博客
10-23 3万+
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：
我的css框架——base.css(重设浏览器默认样式)
09-22
在网页设计中，CSS框架是必不可少的工具，它们帮助开发者快速构建一致且响应式的界面，减少样式冲突，提高开发效率。本文重点介绍的"base.css"是一个基础的CSS框架，其核心目标是重置浏览器的默认样式，确保跨浏览器...
CSS网站布局实录 （第二版）PDF版
12-10
第7章 浏览器兼容与解析问题 7.1 CSS hack技术 7.1.1 如何使用CSS hack 7.1.2 常用CSS hack使用方法 7.1.3 CSS hack管理 7.2 IE条件注释功能 7.3 盒模型问题 7.3.1 盒模型hack 7.3.2 简单盒模型hack方法 7.4 IE捉...
PHP-HTMLhtml重要知识点笔记(必看)
12-14
——第8尾集 3.表单必须要有name和value，因为抓包的时候，可发现必须要提交它们 4.fieldset标签——>legend、lable 5.只能用margin-top、margin-left定位div距离页面边距。 6.padding-top、padding-left定位div里面...
border在HTML5,HTML5边框的设置（border）
weixin_34337134的博客
06-25 1259
边框的样式：solid 实线 dotted 点线 dashed 虚线 double 双线 inset 三维立体效果边框有3个元素，用法是 border-top:10px soild red;border-top:上边border-bottom:下边border-left:左边border-right:右边例子：CSS画出一个三角形，CSS2 引入了边框颜色值 transparent。这个值用于创建...
h5中div边距去除
weixin_30872499的博客
07-22 836
style样式里面加上 <style> *{ margin:0 ;//外边距为0 padding:0;//内边距为0 } </style> 转载于:https://www.cnblogs.com/xy88/p/11229148.html...
html5内边框大小,web前端基础-css-尺寸边框
weixin_39546520的博客
06-08 818
web前端基础-css-尺寸边框尺寸和边框:一、尺寸行内元素是不能设置宽和高的，其高度是由元素里面的内容的高度撑起来的；行内块元素可以设置宽和高，当行内块元素没有设置宽高的时候，行内块元素的宽高是其默认的宽高；块级元素：可以设置宽高，但是如果没有设置宽，则其默认宽度是该块级元素的父级元素的宽度的100%；如果没有设置高度，则该该块级元素的默认高度是由该块级元素内部的内容撑起来的高度，如若块级元素　...
h5学习笔记：使用外边框模式调试
夏天的树人的专栏
04-06 2285
初学的时候，一直看不到外框究竟发生什么事情，调试css样式的时候经常写boder去描边看看div和一些标签的框情况。这个时候发现挺麻烦的。 于是试了一下css 对标签进行全外边框，参考这个思路就可以实现了。 具体代码如下body,button,form,h1,h2,h3,h4,h5,h6,hr,html,img,input,li,ol,p,pre,td,textarea,th,ul,a{
HTML5系列代码：给图像添加边框
BLOG域名:programb.blog.csdn.net
06-26 2771
border 属性在一个声明中设置所有边框属性。 <html> <head> <title> 给图像添加边框</title> </head> <body> <h4>添加图像边框</h4> <p align=center> <img src="图片/la图标.bmp" border=5> </body> </html&gt.
H5移动端解决1px 下边框border问题
qql13177778064的博客
12-16 539
伪类 + transform .regist-form-item { position: relative; } .regist-form-item:after { content: ""; width: 100%; position: absolute; left: 0; bottom: 0; border-bottom: 1px solid #d6d6d6; -webkit-t...
h5实现按钮渐变边框
最新发布
qq_26711723的博客
12-28 445
【代码】h5实现按钮渐变边框。
疯狂H5笔记 - 背景和边框相关属性
qq_27905183的博客
11-08 1274
1.背景相关属性：background-attachment：设置背景图片是随着对象内容滚动还是固定，有两个属性值: scroll：随组件内容的滚动而滚动 fixed：背景图片固定 background-color：设置背景颜色，如果同时设置了背景颜色和背景图片，背景图片将会覆盖背景颜色 background-image：设置背景图片，属性值形如:url(url) backgrou
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript代码
05-29
很高兴回答您的问题。这里给出一个简单的HTML+CSS+JavaScript代码示例，用于设计和实现一个绿色古典旅游景区的网站。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>绿色古典旅游景区</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>绿色古典旅游景区</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">景点介绍</a></li> <li><a href="#">预定门票</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>欢迎来到绿色古典旅游景区</h2> <p>这里是一座绿色、古典的旅游景区，拥有众多自然景观和历史文化遗址。我们提供最佳的旅游体验，让您留下美好的回忆。</p> <button>了解更多</button> </section> <section> <h2>景点介绍</h2> <ul> <li> <img src="scenery1.jpg" alt="景点1"> <h3>景点1</h3> <p>景点1的介绍。</p> </li> <li> <img src="scenery2.jpg" alt="景点2"> <h3>景点2</h3> <p>景点2的介绍。</p> </li> <li> <img src="scenery3.jpg" alt="景点3"> <h3>景点3</h3> <p>景点3的介绍。</p> </li> </ul> </section> <section> <h2>预定门票</h2> <form> <label>姓名：<input type="text" name="name"></label> <label>电话：<input type="text" name="phone"></label> <label>邮箱：<input type="email" name="email"></label> <label>门票数量：<input type="number" name="quantity"></label> <button type="submit">提交</button> </form> </section> </main> <footer> <p>版权所有 © 绿色古典旅游景区</p> </footer> <script type="text/javascript" src="script.js"></script> </body> </html> ``` CSS代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #003300; color: #fff; padding: 20px; } header h1 { margin: 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { margin: 20px; } section { margin-bottom: 30px; } section h2 { margin-top: 0; } section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } section li { flex-basis: calc(33.33% - 20px); margin-right: 20px; margin-bottom: 20px; } section li:last-child { margin-right: 0; } section li img { width: 100%; height: auto; } form label { display: block; margin-bottom: 10px; } form input { padding: 5px; margin-bottom: 10px; border-radius: 5px; border: none; } form button { background-color: #003300; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } form button:hover { background-color: #009900; } footer { background-color: #ccc; color: #333; text-align: center; padding: 10px; } ``` JavaScript代码： ```javascript window.onload = function() { var button = document.querySelector('button'); button.addEventListener('click', function() { alert('感谢您的关注！'); }); }; ``` 这些代码可以帮助您创建一个简单的绿色古典旅游景区网站。当然，具体实现还需要根据您的需求和技能水平进行调整。希望这些信息对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值