• 技术文章 >web前端 >html教程

    CSS盒子模型

    2016-10-23 00:00:09原创777
    2016-10-22

    《css入门经典》第6章

    1.每个HTML元素对应于一个显示盒子,但不是所有的元素都显示在屏幕上。

    2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式”。可视格式化方式告诉浏览器应该如何在屏幕上显示HTML内容。

    3.元素类型:

    (1)块元素(block):以新行开始和结束。

    ,
    等。

    (2)内联元素(inline):没有独占一行,而是包含于文本流之中。,等。

    4.display属性

    通过设置display属性值可以改变元素的类型

    display:none;不显示

    display:block;设置为块元素

    display:inline;设置为内联元素

    5.匿名盒

    当标签包含混合内容,比如文本和一些HTML标签时,会产生没有HTML标签的盒子,称为匿名盒。匿名盒的样式设置与其包含盒相同。

    eg.

    Hello World!

    由图可知:文本Hello为匿名盒。

    6.在HTML中,标签的定义为display:none;。所以我们在页面中看不到标签的内容。

    7.盒子的显示属性

    边距:margin

    边框:border

    填充:padding

    (1)边距margin:即两个盒子之间的间距。边距总是透明的。

    注意:重叠边距,即两个垂直方向的盒子,它们在垂直方向的间距使用两个元素间的最大值。边距只在块元素上重叠,并且是在垂直方向重叠,不是水平方向。

    (2)边框border:

    border属性设置:选择符{ border:大小 样式 颜色; }

    border-width

    规定边框的宽度。

    border-style

    规定边框的样式。

    border-color

    规定边框的颜色。

    inherit

    规定应该从父元素继承 border 属性的设置。

    Width:

    thin

    定义细的边框。

    medium

    默认。定义中等的边框。

    thick

    定义粗的边框。

    length

    允许您自定义边框的宽度。

    inherit

    规定应该从父元素继承边框宽度。

    Style:

    none

    定义无边框。

    hidden

    与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。

    dotted

    定义点状边框。在大多数浏览器中呈现为实线。

    dashed

    定义虚线。在大多数浏览器中呈现为实线。

    solid

    定义实线。

    double

    定义双线。双线的宽度等于 border-width 的值。

    groove

    定义 3D 凹槽边框。其效果取决于 border-color 的值。

    ridge

    定义 3D 垄状边框。其效果取决于 border-color 的值。

    inset

    定义 3D inset 边框。其效果取决于 border-color 的值。

    outset

    定义 3D outset 边框。其效果取决于 border-color 的值。

    inherit

    规定应该从父元素继承边框样式。

    描述

    最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过,CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。(W3School)

    (3)填充padding:内容周围的空间。填充总是和内容本身的背景颜色相同。

    注意:

    (1)表格单元即不是内联元素也不是块元素,表格单元的显示值为display:table-cell。table-cell元素不能有边距。

    (2)行长em:在CSS中,一行长定义为等于位置大小的量度,是一个正方形,高度和宽度等于字体的高度。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:CSS Hack的一些知识 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • html +CSS+div学习――第二课_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose• 规范化css 命名(常用整理)_html/css_WEB-ITnose• 糟糕的css用法 1_html/css_WEB-ITnose
    1/1

    PHP中文网