• html(7)盒子模型


    1. 理解什么盒子模型

      网页中,所有的html标签,都可以做为一个盒子

      网页元素(内容):文字、图片<img/>

    2. 盒子的边框(顺时针:上右下左 )

    a)        border-width:宽度( border-top-width border-right-width

    border-bottom-width   border-left-width)

    b)        border-style:样式( solid细边框、dashed虚线边框)

    c)        border-color:颜色

    d)       简写:border:1px solid red;

    属性

    说明(顺时针:上右下左)

    border-top-color

    设置上边框颜色

    border-right-color

    设置右边框颜色

    border-bottom-color

    设置下边框颜色

    border-left-color

    设置左边框颜色

     

     

     

    border-color

    设置4个边框为同一颜色

    border-color:red;

    上下边框颜色为blue

    左右边框颜色为red

    border-color:

     blue red;

    上边框颜色为blue

    左右边框颜色为red

    下边框颜色为green

    border-color:

     blue red green;

    上、下、左、右边框颜色

    分别为blue、red、green、black

    border-color:

     blue red green black;

     

    e)  外边距(盒子之间的距离)——margin

    1、            居中——margin : 0px auto;

    2、            margin-left ight opottom:数字px;

    f)  内边距(文字或图片和盒子中间的间隙)——padding

    padding-top ightottomleft   (数字px)

    说明:边框、外边距、内边距,

    简写方式方向(顺时针),按上、右、下、左设置

    一、    标准文档流

    1、            块级元素

    a)        特征:单独占据一块区域,单独占一行,里面包含内联元素

    b)        常用的块级元素:

                           i.              标题标签——<h1…h6>

                           ii.             段落标签——<p>

                           iii.             层——<div>

                          iv.              表格——<table>

                           v.              表单——<form>

                          vi.              列表:有序列表、无序列表、定义列表

    2、  内联元素

    常用的内联元素:<img/>、<span>、<strong> 、<em>、<a>、

    表单元素

    3、            标准文档流规则:块级元素,包含内联元素,反之则不行

    三、    控制元素显示和隐藏——display属性

    none——隐藏                    block——显示

  • 相关阅读:
    存储过程生成POCO
    Asp.net MVC4与Razor呈现图片的扩展
    Html5中新input标签与Asp.net MVC应用程序
    HTML5上传文件显示进度
    JQuery图表插件之Flot
    用Html5与Asp.net MVC上传多个文件
    TSQL列出最后访问的存储过程
    Asp.net MVC 限制一个方法到指定的Submit按钮
    VisualStudio2012轻松把JSON数据转换到POCO的代码
    Apache Tika源码研究(三)
  • 原文地址:https://www.cnblogs.com/-yuqin/p/6953452.html
Copyright © 2020-2023  润新知