亲宝软件园·资讯

展开

Web前端:2、盒模型的组成

夜来南风起 人气:0

在HTML中,若想要实心划分区域,则:
1、添加标签;
2、对标签设置尺寸(宽高)

但只要是添加了一个元素(标签),就会在页面中生成一个盒子,不同元素产生的盒子模型可能不同,这取决于它CSS的display属性


1、display:当前元素的显示方式

  • display:none;不生成盒子

           特点:在页面不显示且不占用尺寸

  • display:block;块盒

        特点:块盒独占一行,即使内容只有一个字后面的元素也会换行显示
                  可以设置宽高

  • display:inline;行盒

        特点:所有行盒在一行显示,且里面的内容超出一行会自动换行显示

                 设置宽高无效

  • display:inline-block;行内块盒

        特点:既有行盒的特点又有块盒的特点,在一行显示且设置宽高有效

  • display:其他取值;其他盒子

        例:后面布局会用display:flex;弹性盒模型

 

    2、IE盒模型

    在检查器中,鼠标移到某个标签。页面显示的是该标签边框盒的尺寸,默认渲染的区域也是边框盒。
    IE盒模型会导致元素在页面中的实际占用尺寸会发生变化。

    box-sizing:盒模型的计算规则。取值有:

    内容盒 content-box;;
    ————由content内容区域组成,设置的宽高就是内容盒的尺寸

    边框盒 border-box;
    ————由padding和content和border组成,设置的宽高就是边框盒的尺寸

    填充盒 padding-box;
    ————由内边距padding和content组成
    **注意!!! **:这个取值box-sizing没有,在设置背景剪切background-clip取值这三个才都可以

     

    3、盒模型的组成

    centert:内容(存放文本内容)
    对某一个标签设置宽度或高度,实际是对content区域内容设置


    ——font-weight:bold/bolder/;lighter; 字体的粗细

    ——overflow:溢出内容的显示方式(会创建一个BFC,后面会单独详细说到)

    ——overflow:visible;依然显示溢出内容

    ——overflow:hidden;隐藏溢出内容;对超出填充盒padding的内容进行隐藏
    ——overflow:auto;超出内容的方向出现滚动条

    ——overflow:scoll;xy轴两个方向出现滚动条

    文本换行规则:
    中文:标点符号、空格、汉字
    英文:标点符号、空格、单词
    数字:标点符号、空格

     

    设置标签的断词规则:word-break:break-all; 英文会按照字母进行换行

    最大/最小宽高:min/max-height;最小/最大高度;min/max-width;最小/最大宽度

    font-size:取值必须是偶数(整数)且不许小于12px
    字体:黑体,微软雅黑,衬线字体,非衬线字体
    1个汉字=2个字符;1个字符=2个字节 双倍计算

     


     

    border:边框(取值:粗细;样式;颜色;)

    取值:solid实线,dashed虚线,dotted点线,double双实线
    简写—border:1px solid red;
    不简写——border-top:1px solid red; 只设置上边框
    border-top-style:solid;
    border-top-color:red;
    以此类推


    border:solid; 样式不可以省略
    border可以省略:
    1、厚度,默认3px(为了能展示双实线)
    2、颜色,默认文本色(黑色)

    outline轮廓,取值:厚度 样式 颜色

     

    问题:outline和border的区别?
    外边框,用处和border一样,但是不占像素,无法单独设置每条边
    其他适用场景:去除input、a标签的焦点框

    transparent,设置颜色透明(可用来做带方向的三角形)

     

    圆角边框border-radius:20px;
    目标:在页面中生成一个圆
    1、设置宽高数值一致
    2、设置边框
    3、border-radius设置为宽高的一半

    取1个值:4个角的弧度
    取2个值:左上右下、左下右上
    取3个值:左上、左下右上、右下
    取4个值:左上、右上、右下、左下(顺时针)
    border-radius:Apx/Bpx; A是x轴的半径,B是y轴的半径

    盒子阴影box-shadow:2px 4px 6px red;
    控制当前标签的阴影
    取值:第1个值:x轴偏移量(宽) 正:向右;负:向左; 第2个值:y轴偏移量(高) 正:向下;负:向上; 第3个值:模糊值; 第4个值:阴影扩散的范围(可不写); 第5个值:颜色
    box-shadow:2px 4px 6px 1px red;

    文本阴影:text-shadow:2px 4px 6px red;
    注:每个值之间的分隔符是空格

     

    padding:内边距(边框与内容之间的距离)
    简写:padding:20px;
    不简写:padding-top:20px;以此类推
    ————
    取1个值:上下左右
    取2个值:上下、左右
    取3个值:上、左右、下
    取4个值:上、右、下、左 (顺时针方向)

     

    margin:外边距(表示与其他盒子的距离)

    缩写方式与padding一样

    注:每个值之间的分隔符是空格。 缩写只是提升开发者效率,检查器上找不到

     

    4、盒模型取值单位


    px 固定尺寸
    em 相对尺寸,父级/当前标签字体大小的倍数
    rem 相对尺寸,基于html元素的倍数
    % 尺寸是包含块宽度的百分比
    auto 自动,按照不同定位体系的规则计算
    margin:px、em、rem、%、auto
    border:px、em
    padding:px、em、rem、%
    width:px、em、rem、%、auto
    height:px、em、rem、%、auto
     

    注意!!!:
    1、margin、padding、width的百分比,是包含块宽度的百分比

    2、height百分比很少使用

    3、width、height默认值是auto,内容的宽高尺寸

    4、margin取auto,有宽度就是居中,没有宽度就是0

    5、只有margin可以取负值

     


     
    完。
    更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。

     

    加载全部内容

    相关教程
    猜你喜欢
    用户评论