美文网首页
盒子的简单应用

盒子的简单应用

作者: 糖炒栗子_01c5 | 来源:发表于2018-07-09 17:21 被阅读0次

    内边距就是内边距到边框的距离。

    padding :上 右 下 左    四边分别设置  

    padding:上 右 下   上下两边不同 左右 相同

    padding : 上 右 上下相同 左右相同

    外边距 就是盒子的最外层到边框之间的距离  

    外边距可以单独设置 也可以自动设置 

    margin:**px 

    mrgin: 0  auto 

    外边距的重叠 每一个box的位置都是可以重叠的但是这并不意味着它不存在而是被覆盖了

    浏览器默认向右对齐,每一个块都一次向下排列

    内联元素不能设置宽和高 

    在浏览器中屏幕放不下所有内容时,会自动放到下一行

    •我们可以通过修改display来修改元素的性 质。

    •可选值:

    –block:设置元素为块元素

    –inline:设置元素为行内元素

    –inline-block:设置元素为行内块元素

    –none:隐藏元素(元素将在页面中完全消失)

    •可以通过overflow来控制内容溢出的情况。

    •可选值:

    –visible:默认值

    –scroll:添加滚动条

    –auto:根据需要添加滚动条

    –hidden:隐藏超出盒子的内容

    •文档流指的是文档中可现实的对象在排列时所占用的位置。

    •将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流。

    •所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来。

    •浮动使用float属性。

    文字绕图就是在盒子中添加文字 

    内联元素

    •可选值:

    –none:不浮动

    –left:向左浮动

    –right:向右浮动

    然后现在我们可以做一个简单的网页布局;

    作业:

    相关文章

      网友评论

          本文标题:盒子的简单应用

          本文链接:https://www.haomeiwen.com/subject/lertpftx.html