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

    盒模型

    一、前言

    页面的制作过程:

    设计师设计出设计稿交给前端工程师,前端工程师制作业面:划分区域、填写类容。其中划分区域最重要最复杂。

    如何划分区域:

    用合适的元素来表示不同的区域(HTML)

    设置区域的位置、尺寸、背景等样式(CSS)

    划分区域中的CSS知识:

    每个元素都会在页面中生成一个矩形区域;

    CSS称该矩形区域为盒子(box)

    盒子的相关知识:

    盒模型:单个盒子的组成

    视觉格式化模型:多个盒子的排列(盒子之间的相互作用和影响)

    布局:实际应用

    二、盒模型概述:

    盒子的分类:

    不同的元素产生的盒子类型可能不同;

    一个元素,产生什么样的盒子,取决于它CSSdisplay属性;

    盒子的组成

    一个盒子由:marginborderpaddingcontent组成。

    盒子内容

    补充知识

    内容(content)

    CSS的尺寸单位涉及到的CSS属性。

    CSS的尺寸单位:

    CSS中,有很多属性的取值,需要表示为一个尺寸;

    一个尺寸,由数值和单位组成;

    示例:2000(数值)米(单位)

    CSS中常见的尺寸单位:

    px像素,绝对尺寸(计算机屏幕由很多的小点组成,每一个点,就是一个像素);

    em相对尺寸{相对于当前元素的字体大小(px)};

    %百分比(在不同的CSS属性中,有不同的含义;

    所以其他尺寸单位,在经过浏览器计算后,都会变为px);

    盒模型

    一、content内容:

    1、含义:

    用于存放文本或其他元素的区域;

    类似于一个箱子中存放东西的空间。

    2、相关属性:

    width:

    含义:宽度

    不可继承

    默认值:auto

    暂认为撑满整个可用区域

    其他取值:

    1、像素、绝对长度、固定长度:px

    所有其他单位都会被计算为像素

    2、相对长度:em

    相对于应用样式的元素的字体大小

    3、百分比:%目前不用管

    断词:

    1、当内容超过宽度时,会自动对内容进行截断换行;

    2、如何截断?

    按照断词规则截断;

    断词规则可修改;

    默认断词规则,

    在单词之间进行截断;英文:被空格隔开的即为单词;中文:每个汉字均视为单词。

    height:

    含义:高度

    不可继承

    默认值:auto

    暂认为适应内容的高度

    其他取值:px、en、%

    overflow:

    含义:内容溢出时的处理方式

    不可继承

    默认值:visible

    溢出部分仍然显示

    其他取值:

    1、hidden

    溢出部分隐藏

    2、scroll

    在水平和垂直方向上出现滚动条,若溢出,则滚动条可用,否则不可用

    3、auto

    当内容在水平或垂直方向上溢出时,才在该方向上出现滚动条,否则不出现

    min-width:

    含义:最小宽度

    保证width属性的值不小于该属性值

    不可继承

    默认值:0px

    其他取值 em、%

    max-width:

    含义:最大宽度

    保证width属性的值不大于该属性值

    不可继承

    默认值:none

    表示未设置最大宽度,可视为width属性可以无限大

    其他取值 px、 em、%

    min-height

    含义:最小高度

    保证height属性的值不小于该属性值

    不可继承

    默认值:0px

    其他取值 em、%

    min-height:

    含义:最小高度

    保证height属性的值不小于该属性值

    不可继承

    默认值:0px

    其他取值em、 %

    max-height:

    含义:最大高度

    保证height属性的值不大于该属性值

    不可继承

    默认值:none

    表示未设置最大高度,可视为height属性可以无限大

    其他取值px、em、%

    min-height:

    含义:最小高度

    保证height属性的值不小于该属性值

    不可继承

    默认值:0px

    其他取值 em

    max-height:

    含义:最大高度

    保证height属性的值不大于该属性值

    不可继承

    默认值:none

    表示未设置最大高度,可视为height属性可以无限大

    其他取值px、em、%

    min-height:

    含义:最小高度

    保证height属性的值不小于该属性值

    不可继承

    默认值:0px

    其他取值em、 %

    padding 内边距、填充区:

    1、含义:

    表示边框到内容之间的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向

    类似于箱子和内部空间之间的填充物

    2、相关CSS属性:

    padding-top:

    含义:上内边距

    不可继承

    默认值:0px

    其他取值

    em、%

    padding-right:

    含义:右内边距

    不可继承

    默认值:0px

    其他取值

    em、 %

    padding-bottom:

    含义:下内边距

    不可继承

    默认值:0px

    其他取值

    em、%

    padding-left:

    含义:左内边距

    不可继承

    默认值:0px

    其他取值

    em、 %

    padding:

    速写属性、简写属性

    速写属性不是真实的CSS属性,它只是CSS提供的一种快速的写法

    书写格式

    1. padding:上内边距 右内边距 下内边距 左内边距

    2. padding:上内边距 左右内边距 下内边距

    3. padding:上下内边距 左右内边距

    4. padding:上下左右内边距

    border 边框:

    一、含义

    分割内部和外部的界限,由上(top)、右(right)、下(bottom)、左(left)四个部分组成

    类似于箱子壁

    二、相关CSS属性:

    上边框

     1、边框样式:border-top-style

    含义:上边框的样式

    不可继承

    默认值:none

    无边框样式

    其他取值:

    solid(实线)、dashed(虚线)、dotted(点阵)、double(双实线)、其他。

     2、边框厚度:border-top-width

    含义:上边框的厚度

    不可继承

    默认值:medium

    预设值,表示中等边框

    其他取值

    预设值

    medium(中等)、thin(细)、thick(粗)

    数值pxem

    边框颜色:border-top-color

    含义:上边框的颜色

    不可继承

    默认值:currentcolor

    表示当前元素的字体颜色

    其他取值

    预设值

                 black(黑色)、white(白色)、gray(灰色)、其他

                 rgb

    用红绿蓝三种基本颜色调配而成,每种颜色的取值是十进制的数字:0-255

    书写格式:rgb(,绿,)

    HEX

    用红绿蓝三种基本颜色调配而成,每种颜色的取值是十六进制的数字00-ff

    书写格式:#红绿蓝,#号后必须是6个或3个数值

    border-top

    速写属性

    1、书写格式

    2border-top:厚度 样式 颜色

    右边框

    border-right-XXX

    下边框

    border-bottom-XXX

    左边框

    border-left-XXX

    border-width

    速写属性:同时设置所有边框的厚度

    border-style

    速写属性:同时设置所有边框的样式

    border-color

    速写属性:同时设置所有边框的颜色

    border

    1、速写属性:同时设置所有边框的厚度、样式、颜色

    2、书写格式:

    border:厚度 样式 颜色

    margin 外边距:

    一、含义;

    1、表示边框和相邻盒子的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向

    2、类似于箱子与箱子之间的距离

    3、具体规则比较复杂,视觉格式化模型详细讲解

    二、相关CSS属性

    1margin-top

    含义:上外边距

    不可继承

    默认值:0px

    其他取值

    em

    %

    2margin-right

    含义:右外边距

    不可继承

    默认值:0px

    其他取值

    em

    %

    3margin-bottom

    含义:下外边距

    不可继承

    默认值:0px

    其他取值

    em

    %

    4margin-left

    含义:左外边距

    不可继承

    默认值:0px

    其他取值

    em

    %

    5margin

    速写属性

    书写格式

    1. margin:上外边距 右外边距 下外边距 左外边距

    2. margin:上外边距 左右外边距 下外边距

    3. margin:上下外边距 左右外边距

    4. margin:上下左右外边距

    6、浏览器默认样式中的margin

    -webkit-XXX

      -webkit-是浏览器厂商前缀

               这是一个历史遗留问题

    在早远的时期,CSS还并不规范,可设置的属性很少,一些浏览器厂商,为了让页面能够实现更加丰富的效果,自己加入了一些CSS属性。

    为了让这些属性和标准CSS中的属性进行区分,它们在这些属性前面加入了一个特殊的单词。例如:-webkit-(chrome),-moz-(firefox),-ms-(IE)等。

    随着CSS的逐渐规范,这些浏览器厂商自己设定的属性变得越来越没有意义了。但为了兼容老版本浏览器,这些属性依旧保留了下来。

    现在,这种属性仅出现在浏览器默认样式表中,它们和现在规范的CSS属性有着对应关系,我们开发者仅需要了解它们的存在即可,不需要去书写它们。)

    盒模型知识补充:

    子盒子:

    一、边框盒(border-box):由borderpaddingcontent组成

    浏览器调试时,页面中显示的元素尺寸是指边框盒的尺寸【演示】

    元素的背景,默认覆盖边框盒【演示】,可通过background-clip属性修改

    background-clip属性

    含义:背景覆盖范围

    不可继承

    默认值:border-box

    取值

    border-box:背景覆盖边框盒

    padding-box:背景覆盖填充盒

    content-box:背景覆盖内容盒

    二、填充盒(padding-box):由paddingcontent组成

    严格意义上,overflow指代的溢出,是指溢出填充盒【演示】

    三、内容盒(content-box):由content组成

    默认情况下,widthheight属性,是指内容盒的宽度和高度

    widthheight的设置范围,可通过box-sizing属性修改

    box-sizing属性:

    1、含义:盒子宽高的设置范围

    2、不可继承

        3、默认值:content-box

    4、取值

    content-box:表示内容盒的宽高;

    border-box:表示边框盒的宽高【演示】。

    盒子尺寸的计算

    1box-sizing:content-box的情况下

    2box-sizing:border-box的情况下

    3outline属性:

    外边框,用法和border完全一致

  • 相关阅读:
    Ural 1741 Communication Fiend(隐式图+虚拟节点最短路)
    OpenCV学习笔记——多种Smooth平滑处理
    HDU 1025 Constructing Roads In JGShining's Kingdom(二维LIS)
    POJ 2533 Longest Ordered Subsequence(LIS模版题)
    NBUT 1186 Get the Width(DFS求树的宽度,水题)
    Codeforeces 617E XOR and Favorite Number(莫队+小技巧)
    CodeBlocks的汉化、主题美化及其调试功能的实现
    PAT天梯赛练习题 L3-010. 是否完全二叉搜索树(完全二叉树的判断)
    POJ 2892 Tunnel Warfare(线段树单点更新区间合并)
    HDU 4031 Attack(线段树/树状数组区间更新单点查询+暴力)
  • 原文地址:https://www.cnblogs.com/zai1/p/11055503.html
Copyright © 2011-2022 走看看