精华内容
下载资源
问答
  • css盒子模型

    2016-08-22 15:40:08
    通过这个css盒子模型的实战,更好的理解css盒子模型
  • 简单css盒子模型代码

    千次阅读 2018-11-29 18:15:17
    Document header(.logo+nav)> mian article section section section aside ul>li ul>li ul>li ...代码有点冗杂,多多指。
    header(.logo+nav)>
    mian
    article
    section
    section
    section
    aside
    • ul>li
    • ul>li
    • ul>li
    footer
    header,.mian,.aside,footer{background-color: #00FFFF;} header{line-height: 3.5rem; border: 0.016rem solid black; height: 3.5rem; text-align: center; margin-bottom: 0.5rem; background-size: 2rem 2rem; background-image: url("./Vendy.jpg"); background-repeat: no-repeat; background-position:right center; background-origin: content-box; padding: 0rem 0.5rem;} .div1{width: 95%; font-size: 0rem; height: 58%; margin: auto;} .mian{width: 75%; font-size: 1rem; display: inline-block; margin-right: 1%; border: 1px solid black; height: 20rem; text-align: center; vertical-align: top;} .aside{width: 23%; display: inline-block; font-size: 1rem; text-align: center; border: 1px solid black;} ul{ list-style: none; padding-left: 0;} .article{border: 1px solid black; margin: 1.5rem 1rem 0.5rem; background-color:#00CCFF;} section{border: 1px solid black; margin: 1rem; background-color: #0099FF; line-height: 3.5rem} li{text-align: center; background-color: #00CCFF; margin: 1rem; l ine-height: 3.5rem; border: 1px solid black;} footer{margin-top: 1rem; text-align: center; border: 1px solid black; line-height: 3rem} 代码有点冗杂,多多指。
    展开全文
  • ? 设置2个属性值时前者为上下padding的值后者为左右padding的值 ? 设置3个属性值时第1个为上padding的值第2个为左右padding的值第3个为下padding的值 ? 设置4个属性值时按照顺时针方向依次为上右下左padding的值 ...
  • 盒子模型概念2.高和宽设置3.边框设置4.内边框设置5.外边框设置6.盒子的计算7.元素显示方式3-1 width属性宽度width:长度值、百分比、auto最大宽度max-width:长度值、百分比、auto最小宽度min-width:长度值、百分比...

    1-1 课程介绍

    1.盒子模型概念

    2.高和宽设置

    3.边框设置

    4.内边框设置

    5.外边框设置

    6.盒子的计算

    7.元素显示方式

    3-1 width属性

    宽度width:长度值、百分比、auto

    最大宽度max-width:长度值、百分比、auto

    最小宽度min-width:长度值、百分比、auto

    3-4 height属性

    高度height:长度值|百分比|auto

    最大高度max-height:长度值|百分比|auto

    最小高度min-height:长度值|百分比|auto

    说明:设置块级元素和替换元素的内容高度

    3-7 哪些元素可设置width和height属性

    1.块级元素 p div h1~h6 ul li ol dl dt dd 等

    2.替换元素 浏览器根据其标签的元素与属性来判断显示的具体内容

    img input textarea等

    1.width和height属性设置是内容的高和宽

    2.width和height属性设置对块级元素和替换元素有效

    3.max-height(width)/min-height(width)有兼容性问题,IE不支持。

    3-10 border 边框属性

    边框宽度border-width  · thin ·medium ·thick ·长度值

    边框颜色border-color

    边框样式border-style

    展开全文
  • 1)盒子模型盒子构成·盒子中装载的内容--content·盒子内边距--padding·盒子边框--border·盒子外边距--margin2)盒子属性一般情况下,在使用盒子的时候,属性分为复合属性(顺序为上右下左)和单一属性在使用盒子的...

    1)盒子模型盒子构成

    ·盒子中装载的内容--content

    ·盒子内边距--padding

    ·盒子边框--border

    ·盒子外边距--margin

    e2b25a3dcb0bd9517c6c63d3792ac30b.png

    2)盒子属性

    一般情况下,在使用盒子的时候,属性分为复合属性(顺序为上右下左)和单一属性

    在使用盒子的时候:width、style、color缺一不可2.1)尺寸

    属性:

    ·width min-width max-width

    ·height min-height max-height

    参数:

    :用长度值来定义高度。不允许负值

    :用百分比来定义高度。不允许负值

    2.2)内边距

    属性:

    ·padding padding-top padding-right padding-bottom padding-left

    参数:

    :用长度值来定义高度。不允许负值

    :用百分比来定义高度。不允许负值

    2.3)外边距

    属性:

    margin margin-top margin-right margin-bottom margin-left

    参数:

    :用长度值来定义高度。可以为负值

    :用百分比来定义高度。可以为负值

    2.4)边框

    属性:

    border border-width border-style border-color

    border-top border-top-width border-top-style border-top-color

    border-right border-right-width border-right-style border-right-color

    border-left border-left-width border-left-style border-left-color

    边框的style一般使用2种:

    dotted:点状轮廓

    dashed:虚线轮廓

    solid:实线轮廓

    double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

    本文出自 “孔小发爱吃鱼” 博客,谢绝转载!

    展开全文
  • 1.盒子模型(Box Model) 理解盒子模型: 可以把html页面中的布局元素看作一个矩形的盒子,她就是一个盛装内容的容器 如图,把content(内容)想象成一个网购的新手机,有宽(width)和高(height) 手机距...

    1.盒子模型(Box Model)

    理解盒子模型:

                           可以把html页面中的布局元素看作一个矩形的盒子,她就是一个盛装内容的容器

                           如图,把content(内容)想象成一个网购的新手机,有宽(width)和高(height)

                           手机距包装盒的距离为内边距(padding)

                           包装盒本身的宽度为边框(border)

                           如果有两个新手机(两个盒子),两个盒子之间的距离为外边距(margin)

                                      

                                 (图片摘自网络,侵删)

    2.盒子边框(border)

    属性:

             border-width   定义边框粗细、单位是px

             border-style    定义边框的样式

             border-color    定义边框的颜色

    其中边框的样式包括:

             none:默认没有边框 

             solid:实线边框

             举例:20px的实线边框(width和height200px)

            

             dashed:虚线边框

             举例:20px的虚线边框(width和height200px)

            

             dotted:点线边框

             举例:20px的点线边框(width和height200px)

            

    其中边框的颜色代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>border</title>
      <style>
        div {
          width: 200px;
          height: 200px;
          border-width: 20px;
          border-style: dotted;
          border-color: red;
        }
      </style>
    </head>
    <body>
      <div>盒子</div>
    </body>
    </html>

    样例:

           

    • 边框综合写法(简写)

    举例:(没有顺序,常见写法如下)

             boder:1px solid red;

    • 表格的细线边框

    通过表格的cellspacing=“0”,将单元格和单元格之间的距离设置为0

    举例:

           通过下方代码和样例,单元格和单元格直接有距离,这个距离就是因为边框1px和1px之间造成的距离

          现在我们想让这个距离变为0,也就是使cellspacing=“0”

          使用属性border-collapse: collapse;

    举例:(未使用border-collapse: collapse;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>边框粗细</title>
      <style>
      table,th,td {
        border: 1px solid blueviolet;
      }
      </style>
    </head>
    <body>
      <table>
        <caption>个人情况介绍</caption>
        <tr>
          <th>a</th>
          <th>19岁</th>
          <th>男</th>
          <th>大一</th>
        </tr>
        <tr>
            <td>b</td>
            <td>16岁</td>
            <td>男</td>
            <td>高中生</td>
          </tr>
          <tr>
              <td>b</td>
              <td>24岁</td>
              <td>女</td>
              <td>白领</td>
            </tr>
      </table>
    </body>
    </html>

    样例:

    举例:(使用border-collapse: collapse;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>边框粗细</title>
      <style>
      table,th,td {
        border: 1px solid blueviolet;
        border-collapse: collapse;
      }
      </style>
    </head>
    <body>
      <table>
        <caption>个人情况介绍</caption>
        <tr>
          <th>a</th>
          <th>19岁</th>
          <th>男</th>
          <th>大一</th>
        </tr>
        <tr>
            <td>b</td>
            <td>16岁</td>
            <td>男</td>
            <td>高中生</td>
          </tr>
          <tr>
              <td>b</td>
              <td>24岁</td>
              <td>女</td>
              <td>白领</td>
            </tr>
      </table>
    </body>
    </html>

    样例:

    3.内边距(padding)

    概念:

             指的是边框和内容之间的距离

    设置:

    padding-left       左内边距

    padding-right     右内边距

    padding-top       上内边距

    padding-bottom 下内边距

    注意:

             内边距会撑大盒子

    举例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>071502</title>
      <style>
        div {
          width: 200px;
          height: 200px;
          border: 1px solid red;
          padding-left: 10px;
          padding-top: 30px;
        }
      </style>
    </head>
    <body>
      <div>我爱吃烤鸡头</div>
    </body>
    </html>

    样例:(盒子被撑大了,这里用了FSCapture屏幕标尺工具

    内边距简写

    1.给1个值

       padding:30px

      即上下左右全是30px内边距

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>071502</title>
      <style>
        div {
          width: 200px;
          height: 200px;
          border: 1px solid red;
          /* padding-left: 10px;
          padding-top: 30px; */
          /* 简写 */
          padding: 30px;
        }
      </style>
    </head>
    <body>
      <div>我爱吃烤鸡头</div>
    </body>
    </html>

    样例:F12模式下

    2.给2个值

        padding: 10px 30px;

       即上下10px,左右是30px,内边距

    3.给3个值

        padding: 10px 30px 80px;

       即上10px,左右30px,下80px,内边距

    4.给4个值

       padding:10px 20px 30px 80px;

      即上右下左依次的内边距(顺时针考虑即可)

    4.内盒尺寸的计算(元素实际大小)

                                      盒子实际的大小=内部宽度和高度+内边距+边框

    举例:

    看到一个div,量出他的尺寸是200px × 200px

    那么你可能会想到,给一个width 200px 再给一个height 200px 

    但这时候需要给内边距padding,比如给一个10px

    盒子被撑开了显示为220px,显然不满足我们200px的需求了

    所以这时候应该

    用width(200px)-多出的内边距(20px)=180px 

    height同理

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>盒子大小</title>
      <style>
       div {
         width: 180px;
         height: 180px;
         padding: 10px;
         background-color: aquamarine;
       }
      </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

    样例:

    特殊情况:如果盒子没有宽度,则padding不会撑开盒子(高度同理)

    举例:

    div中放入一个p标签,给p标签一个高度,不给宽度

    所以这时 p 的宽度就是父标签的宽度

    这时我们再给p一个padding值

    padding并没有被撑开盒子,只是盒子内容(文字部分)向右移动了30px

    那么再来看看给p标签一个width之后,盒子会不会被撑开呢

    样例:

    果然盒子被撑开了 

    4.外边距(Margin)

    基本同理于padding

    margin就是盒子于盒子之间的距离,或者是盒子距离四周的距离

    简写方式完全同于padding

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Margin</title>
      <style>
       div {
        width: 200px;
        height: 200px;
        margin-left: 300px;
        background-color: blue;
      }
      </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

    样例:

    左侧300px的外边距

     

    块级盒子居中水平对齐(用Margin)

    代码:

    块级盒子居中必须要有宽度

    除了上图中的写法一

    还有两种写法

    第二种:

                margin : auto;

    第三种:

                 margin : 0 auto;

    清除元素的默认内外边距(重点)

    当我们简单写一句话时,会发现距离浏览器上侧和左侧都有一定距离,但我们实际上并没有设置

    我们发现原来默认给了一个margin:8px 因此留有空白

    那么如果我们不需要这个空白,就要清除元素默认的内外边距值

    代码:

    以后写css时需要先写这句话

    样例:

    现在就没有空白了

    另:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距(其实设置了也没用,所以干脆不设置)

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>清除内外边距</title>
      <style>
      * {
        padding: 0;
        margin: 0;
      }
      span {
        background-color: aquamarine;
        margin: 20px;
      }
      </style>
    </head>
    <body>
      hello我爱吃烤鸡头<br />
      <span>hello我爱吃烤大肠</span>
    </body>
    </html>

    样例:

    虽然给span了一个上下左右的外边距值,但是只有左右显示了

    外边距的合并

    上下相邻的两个块元素相遇时,取两个值中较大者,这种现象被成为相邻块元素垂直外边距的合并

                               (图片源于网络,侵删)

    举例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>外边距合并</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .top,
        .bottom {
          width: 200px;
          height: 200px;
          background-color: aquamarine;
        }
        .top {
          margin-bottom: 20px;
        }
        .bottom {
          background-color: blueviolet;
          margin-top: 100px;
        }
      </style>
    </head>
    <body>
      <div class="top"></div>
      <div class="bottom"></div>
    </body>
    </html>

    样例:看标尺得出 最后保留100px 因为100>20,保留100

    嵌套块元素垂直外边距的合并(塌陷)

    代码:

    在div中嵌套一个div

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>塌陷</title>
      <style>
        .father {
          width: 200px;
          height: 200px;
          background-color: chartreuse;
        }
        .son {
          width: 30px;
          height: 30px;
          background-color: chocolate;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
    </body>
    </html>

    样例:

    这时我们想让里面的div向下移动50px

    这时考虑,给里面的div一个margin-top值就可以啦,让我们试一试

    代码:

    看下效果:

    效果不理想,整体下移了50px,我们想要移动的只是里面的div

    解决方案:(1)

    给父亲定义一个上边框

    代码:

    样例:

    解决方案:(2)

    给父元素一个padding-top值

    代码:

    样例:

    解决方案:(3)最优方案,上面两种会影响盒子大小

    给父元素添加overflow:hidden

    代码:

    样例:

     

    展开全文
  • css盒子模型图解

    2020-09-25 03:37:55
    主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
  • 代码笔记】Web-CSS-CSS盒子模型

    千次阅读 2019-01-25 09:04:29
    一,效果图。   二,代码。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...CSS 盒子模型&lt;/title&gt; &lt;style&gt; div.ex { width:
  • CSS--盒子模型小练习示例代码

    千次阅读 2020-03-06 17:59:01
    完成下面的盒子 示例代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
  • css3-盒模型实例.html

    2016-08-27 19:12:12
    同上
  • 需求分析制作网页时,经常需要给盒子设置边框,以修饰和美化元素的显示样式,常用方法如下:对盒子的四条边定义不同宽度、颜色、样式的边框盒子背景颜色和边框的合理搭配案例分析效果如图4-1所示。顶部导...
  • CSS 理解盒子模型

    2020-09-25 13:11:27
    盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型
  • 博学谷——让IT教学更简单,让IT学习更有效PAGE 12PAGE 1《HTML+CSS+JavaScript网页制作案例教程》... 某某老师201 年 月 日课题名称第4章 CSS盒子模型计划课时8课时内容分析盒子模型是CSS网页布局的基础,只有掌握...
  • CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...
  • CSS盒子模型

    千次阅读 2018-09-22 18:20:44
    CSS盒子模型分为标准盒子和IE盒子,那么两者有什么区别呢。我们运行下面代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
  • CSS盒子模型;10.1 盒子BOX的基本概念;CSS盒子模型;在HTML文档中每个元素都有盒子模型所以说在Web世界里特别是页面布局盒子模型无处不在这个盒子就是一个矩形的块可以对其进行幅面边框和边距的设置;10.1.1 盒子的基本...
  • css盒子模型及实例

    千次阅读 2014-10-24 09:15:25
    1.概述css盒子模型 1>先看看w3c的概述 2>其实css每个元素都是一个盒子(盒模型) 2.css盒子模型种类 1>w3c标准模型—————————>element空间宽度 = content内容 + border + padding + margin 2>IE传统模型...
  • CSS盒子模型理解以及使用

    千次阅读 2019-10-17 21:56:50
    盒子模型对于css的作用可以用下面两个图来比喻 二、理解以及使用 盒子模型的类型分为两类①:W3C标准的盒子模型(标准盒子模型),表示方法box-sizing:content-box,②另一种是IE盒子模型(怪异盒子模型),...
  • CSS盒子模型知识总结

    2020-12-29 00:15:32
    本章内容:知识点一:盒子模型:Box Model,由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分,这四个部分都包含有top/right/bottom/left四个组成部分。从w3school上下载的图片...
  • css盒子模型-京东快报

    2017-08-28 21:40:27
    北大青鸟作业京东快报的代码
  • 1.CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。注:最常见的盒子是divspan CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,...
  • 练习 | CSS盒子模型

    千次阅读 2020-01-31 17:33:49
    请用盒子模型的边框实现下面版面(如何不让外边距合并) 解 这里采用的是 padding 和 margin 一起使用的方法 找到了一篇写了很多解法的文章 (码) index.html <!DOCTYPE html> <html lang...
  • 复制代码1.绝对定位 margin负值.parent{width:600px;height:600px;margin:auto;position: relative;background-color: #000;}.child{width:200px;height:200px;background-color: red;position: absolute;top:50%;...
  • CSS盒子模型之定位属性(position) #CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,...
  • CSS——CSS盒子模型(重点※)

    千次阅读 多人点赞 2020-06-29 22:18:26
    是你的温柔导论看透网页布局的本质盒子模型(Box Model)盒子边框(border)盒子边框写法总结表表格的细线边框圆角边框(CSS3)内边距(padding)外边距(margin)外边距实现盒子居中文字盒子居中图片和背景区别清除...
  • 盒子模型众所周知,这里先简单介绍一下。 可以看到,在标准盒模型下,width和height是内容区域即content的width和height。而盒子总宽度为 在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) ...
  • CSS盒子模型类型和解析

    千次阅读 2019-10-17 09:44:44
    css盒子模型分为两种:W3c标准盒子模型和IE盒子模型,下面来回顾一下盒子模型的区别。 其实盒子模型主要包括一下几个部分: margin(外边距) - 清除边框外的区域,外边距是透明的。 border(边框) - 围绕在内边距和...
  • CSS Cascading Style Sheet层叠样式表一个HTML网页结构 样式 行为CSS引入方式:1、行内样式 标签2、内嵌样式选择器{样式规则}3、引入样式@import url(样式文件名)4、外部样式选择器分类1、 标签选择器2、 类选择器3...
  • 刚学前端不久,在使用html和css的过程中总是会出现一些意料之外的...我不会把测试代码边写出来,而是以截图的形式发出,因为只有自己亲自打代码才能有所收获。首先声明一下都是本人的个人见解,并不保证普遍性。 先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,874
精华内容 11,949
关键字:

css盒子模型代码

友情链接: miaobiao2.rar