• 盒子模型


    一个盒子主要属性就5个:width,height,Padding,margin,border。

    width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。

    height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度

    padding是“内边距”的意思

    border是“边框”

    margin是“外边距

    真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding

    认识padding

    padding内边距,padding背景颜色一定和内容区域一样的,background-color将填充border以内所有的区域

    认识margin

    margin-top,margin-right,margin-bottom,margin-left,(这四个属性使用的时候与float会相互影响,可以使用clear:both,清除浮动)

    margin:0 auto(这个盒子居中,不是居中文本,必须是有明确width)

    小结:padding本质上指父子关系,margin是兄弟的关系

    认识border

    边框的三要素:粗细、线性、颜色

    dashed、dotted、solid、double、groove、ridge、inset、outset

    延伸:

    HTML将标签分为容器级和文本级

    容器级有:div,h,li,dt,dd......

    文本级:a,p,em,b,u,i,span......

    CSS将标签分为块级元素和行内元素

    块级元素:

    1.霸占一行,不能与其他任何元素并列

    2.能接受宽、高

    3.如果不设置宽度,那么宽度将默认变为父亲的100%。

    行内元素:

    1.与其他行内元素并排

    2.不能设置宽、高。默认的宽度,就是文字的宽度。

    Display:”显示模式”,用来修改元素的行内、块级的性质

    Inline就是“行内”

    一旦给当前一个便签设置 display:inline 这个标签立刻改变为行内元素与span类似没有区别

    一旦给当前一个便签设置 display:block 这个标签立刻改变为块级元素与div类似没有区别

  • 相关阅读:
    jQuery源码学习9——DOMReady加载
    jQuery源码学习8——工具方法之init
    jQuery源码学习7——实例成员
    jQuery源码学习6——工具方法之事件系统
    SQL中EXCEPT函数在 Mysql 和 sqlServer 中的替代方法
    关系型数据库及优势
    jsp小基础归纳
    eclipse换了高版本的maven插件后报错:org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project
    开发常用网站收藏
    Struts2
  • 原文地址:https://www.cnblogs.com/future-zmy/p/6001798.html
Copyright © 2020-2023  润新知