zoukankan      html  css  js  c++  java
  • 盒子模型

    1、内容--宽度:width;单位px、百分比(继承)、em、rem;
    高度:height;单位px、百分比(继承)、em、rem;
    背景--背景色:background-color;颜色单词、十六进制表示法、rgb、rgba;
    背景图片:background-image:url(路径);
    背景图片重复:background-repeat;no-repeat(不重复)、repeat-x(水平重复)、repeat-y(垂直重复)、repeat(水平垂直重复、默认);
    背景定位:background-position:left、center、right、top、center、bottom、具体的数值(单位px)
    背景连写:background:背景颜色 背景图片 背景图片重复 背景定位;可以只单写某一个属性;

    2、填充:上填充--padding-top
    下填充--padding-bottom
    左填充--padding-left
    右填充--padding-right
    填充连写--padding:1个值--》上、右、下、左全部是这个值;
    2个值--》第一个值表示上下,第二个值表示左右;
    3个值--》第一个值表示上,第二个值表示左右,第三个值表示下;
    4个值--》依次为上、右、下、左;(顺时针方向)
    注意:padding会改变盒子的大小,要想在添加padding的同时保持盒子的大小不变,应将padding的值从盒子的大小中减去;

    3、边框:边框粗细--border-width
    边框颜色--border-color
    边框样式--border-style:solid(实线)、dashed(虚线)、dotted(点线)
    边框连写--border:width style color;
    可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right
    注意:边框的对齐方式为向外对齐,所以边框会改变盒子大小;

    4、外边距:上边距--margin-top
    下边距--margin-bottom
    左边距--margin-left
    右边距--margin-right
    外边距连写--margin:1个值 2个值 3个值 4个值(参照padding);

    默认文档流布局下,父子上边界共用问题?
    解决:1、使用padding;
    2、给父级使用border;
    3、给父级添加属性--overflow:hidden;
    4、浮动;
    5、定位;

    外边距塌陷:在垂直方向上上下边距会合并,取最大值;

    盒子水平居中:margin:0 auto;

    样式的继承:width、color、font-、text-、line-height都可以被继承;

    <ins></ins>下划线标记

    <del></del>删除线标记

    文本修饰:text-decoration--underline;下划线
    line-through;删除线
    none;无/没有修饰;

    文本对齐:text-align--left;左对齐
    center;居中对齐
    right;右对齐

    文本缩进:text-indent;指的是文本的首行缩进;
    单位px、em;

    行高:line-height--用于设置一行文本的高度,常用于设置一行文本在容器当中垂直居中;
    单位:1、px;
    2、百分比;基于文字大小的百分比,“%”前必须是整十,如:150%、200%
    3、em;相对单位,同样是基于文字大小;如:1.5em、2em;
    4、没有单位;a--没有继承的情况下,相当于em;
    b--在有继承的情况下:
    i、父级的行高有单位em,则会先计算好行高,然后将行高的数值直接继承给子级,子级本身不会再计算行高;
    ii、行高没有单位,则父级会直接将行高继承给子级,然后子级根据行高值自行计算行高;


    font连写--font:样式/粗细 大小 格式;大小和格式必须都有,缺少任何一个都不行;

    元素的显示方式:
    1、块级--block;独占一行,支持宽高;
    2、行内--inline;和其他行内元素在一行显示,不支持宽高;
    3、行内块级--inline-block,既有行内元素特性,又有块级元素的特性;同样在一行中显示,并且支持宽高;
    display:block/inline/inline-block;
    以上为默认文档流(标准文档流)下的情况;

    在有链接的情况下,a标记无法继承父级的color样式;

  • 相关阅读:
    R set.seed()
    R tapply()
    R table
    清除R console中出现加号+
    r向量映射
    Java常识1
    IDEA配置
    SQL.字符串重叠项数量统计
    SQL.数据库内拆分字符串并返回数据表
    IDEA--TomCat配置
  • 原文地址:https://www.cnblogs.com/tangdiying/p/10098546.html
Copyright © 2011-2022 走看看