精华内容
下载资源
问答
  • CSS初步理解

    千次阅读 热门讨论 2014-07-19 21:30:48
    最近在学习牛腩的时候遇到了网页的制作,挺新鲜的。... CSS基础知识 以下是对CSS理解的导图 通过上图我们也发现,CSS也很难,也容易。容易是说,学起来很快就可以上手,这中语言简单易懂,只要你具备小学英语的知识量就

       最近在学习牛腩的时候遇到了网页的制作,挺新鲜的。当中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间,找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容。有关CSS的基础知识详见下链接。

    CSS基础知识

    以下是对CSS理解的导图

     

     

      通过上图我们也发现,CSS也很难,也容易。容易是说,学起来很快就可以上手,这中语言简单易懂,只要你具备小学英语的知识量就可以了。困难是在指学好它并不容易,因为它需要你耐心。就好比我们对word文档的排版,哪里需要主体鲜明一点,哪里需要着重突出一下,哪里需要加一下背景图片,这都需要考虑的,其实就是美工的工作。学习CSS也很杂,为何会这么说呢,因为需要与PS、photoshop联系起来。

      以下是一些常见的属性设置

    文字样式
        line-height:行间距
        letter-spacing:字间距
        text-decoration:标题处关键字的下划线
        font-style:设置字体风格
        font-weight:字体粗细
        border-style:边框样式
        border-width:边框粗细
        vertical-align:图片相对于文字对齐方式


    背景图片
        background-image:添加背景图片
        background-repeat:背景图片的重复方式
        background-position:背景图片的位置
        background-attachment:固定背景图片


    CSS设置表格与表单的样式
        border-collapse:边框重叠
        list-style-type:用来清除列表前面的标记


    设置页面和浏览器的元素
        <a href=""></a>:添加超链接
        a:link:超链接的普通样式
        a:visited:被点击过的超链接的样式
        a:hover:鼠标经过超链接上的样式
        a:active:在超链接上单击时
        cursor:设置鼠标的显示样式

     

    用CSS制作实用的菜单
        <ul></ul>:实用列表
        list-style-type:项目列表的标头
        list-type-image:项目列表可以设置为图片
        display:block :块级显示

    看看这些属性是不是so easy呢? 只要略微的熟悉一下,你就可以称的上是半个CSS专家了。

    从导图中我们也可以看到,如果能够把CSS布局学懂的话,就算成功一半多了,所以下篇博客将会讲CSS中的盒子模型


       
       

    展开全文
  • CSS 理解盒子模型

    2020-09-25 13:11:27
    盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型!
  • js中的css理解

    2017-10-20 17:05:02
    本文档js中的css进行了详细描述,对于想了解css的小伙伴应该会有帮助
  • [css] 说说你对css盒子模型的理解

    千次阅读 多人点赞 2021-02-15 10:27:54
    [css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子。比如:display: inline-block, 则它的外在的盒子就是inline也就是不占据一行,而block则...

    [css] 说说你对css盒子模型的理解

    
        css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子。比如:display: inline-block, 则它的外在的盒子就是inline也就是不占据一行,而block则表示内部的元素具有块状特性。所以,display: inline其实就是display: inline-inline的缩写,display: block就是display: block-block的缩写。
        每一个内在的盒子有: width/height, padding, border, margin这几个控制盒子大小的属性。其中 width/height控制元素内容大小,padding则控制元素内容到border线内侧距离,border则是元素外围边框大小,而margin则是控制与其他元素的间距,它的背景透明。
        对于早期,计算一个元素的占据大小,需要通过width +2* padding + 2*border来计算,css3中提出了box-sizing:border-box,通过这样设置,就可以使元素最终的宽高就是设定的width/height, 浏览器会根据width/height, padding, border的大小来自动调整内部元素的大小。
    
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • WEB标准是一系列标准的集合,并不是仅“DIV CSS”布局就可以实现。以CSS网页布局只是标准的基础之一。“DIV CSS”布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构,结合CSS最大程度...
  • 对css中盒子模型的理解

    千次阅读 2019-05-29 14:47:57
    对css中盒子模型(box model)的理解盒子的基本属性margin的外边距合并(margin collapsing)box-sizing属性 盒子的基本属性 html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型,如下图所示: width和...

    盒子的基本属性

    html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型,如下图所示:
    盒子模型

    width和height属性用来设置内容区域的宽和高,height属性在默认情况下和内容框的高度相同,也就是随内容多少的变化而变化。
    padding为盒子模型的内边距宽度,也就是内容到边界(border)直接的距离。
    border属性是用于设置边界的宽度(border-width),样式(border-style),颜色(border-color),但是在定义宽度的时候会忽略以百分比作为单位的情况
    border不可用

    margin属性设置了盒子外部区域的宽度,这个属性推开了页面布局中其他的盒子。margin属性的值可以为负,表示这个元素的边界会向内凹,如果margin的值为正值,那么表示这个块级元素的边界向上下左右某个方向拉伸。

    margin为正值的情况下的两个box
    负值1 负值2

    margin为负值的情况下两个box位置的变化
    负值3 负值4
    可以看出当把margin设置成负值后,box2的位置向上和向左发现5px的移动,是因为margin不再包裹在border外面,而是向内凹陷,根据外边距合并的原则,合并后的外边距为0,所以两个box的上下边距之间没有距离。
    注意: 如果使用百分比设置内外边距,例如设置margin:5%,这个5%是以当前元素的父元素为基准来计算的。
    图1

    margin的外边距合并(margin collapsing)

    margin属性有一个特别的行为,就是外边距合并,这个行为只对普通文档流中的块级元素的垂直外边距有效,行内框(inline-block),浮动元素和绝对定位的原素不会发生外边距合并。
    发生外边距合并的三种基本情况:
    1.两个或多个垂直毗邻的兄弟元素,上面元素的下边距会与下面元素的上边距发生合并,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    外边距合并1
                 (图片引用自w3cschool)

    2.父元素和子元素之间,具体可分为两种情况:

    • 父元素的上外边距和第一个子元素的上外边距
    • 父元素的下外边距和最后一个子元素的下外边距
      发生这两种情况的前提是父元素和第一个(或最后一个)子元素之间不存在边框和内边距把外边距分隔开,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
      外边距合并2
                  (图片引用自w3cschool)

    3.空元素,如果一个块级元素中不包含任何内容,并且在其 margin-top 与 margin-bottom 之间没有边框、内边距,这种情况下这个元素自身的上下边距会发生合并。
    外边距合并3
                  (图片引用自w3cschool)
    注意:

    • 即使某一外边距为0,这些规则仍然适用。因此就算父元素的外边距是0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
    • 如果参与折叠的外边距中包含负值,折叠后的外边距的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和。
    • 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

    box-sizing属性

    在默认情况下,width属性设置的是元素内容的宽度,而任何一个被绘制到屏幕上的元素的盒子宽度和高度都需要加上border和padding的值,所以当你调整一个元素宽度和高度的时候都需要考虑到border和padding的值,box-sizing可以用来调整这个问题:

    • content-box:默认值,在这种情况下设置width为100px时,元素被绘制到屏幕上的总宽度=100px+padding-left+padding-right+border-left+border-right
    • border-box:在这种情况下设置width为100px时,元素被绘制到屏幕上的总宽度=100px

    boxsizing         boxsizing

    background-clip属性

    当我们给一个元素设置background-color和background-imge时,这个背景会覆盖到元素border的外边界,background-clip属性可以用来调整背景所覆盖的区域,一共有四个值:
    border-box:背景延伸到边框外,默认值
    padding-box:背景延伸到内边距外,但是不会绘制到border。
    content-box:背景被裁剪至内容区(content box)外沿。
    text :背景被裁剪成文字的背景色。
    1 2

    3 4
    5 6

    7 8
    使用text时要注意字体颜色需要设置成透明和浏览器兼容问题。

    展开全文
  • CSS 理解样式层叠

    千次阅读 2015-09-22 13:46:27
    CSS 理解样式层叠 CSS(层叠样式表)用于规定HTML文档的呈现形式(外观和格式编排),通过学习 《HTML权威指南》、《CSS权威指南》 和 《精通jQuery》,结合自己的实践经历,说说 CSS 样式层叠的那些事儿. ...

    CSS 理解样式层叠

    CSS(层叠样式表)用于规定HTML文档的呈现形式(外观和格式编排),通过学习 《HTML权威指南》《CSS权威指南》 和 《精通jQuery》,结合自己的实践经历,说说 CSS 样式层叠的那些事儿.

    1 样式的来源

    样式的来源有以下几种:

    • 元素内嵌样式(将样式直接应用于元素,style属性)
    • 文档内嵌样式(创建可用于多个元素的样式,style元素)
    • 外部样式表样式(创建可用于多个HTML文档的样式,link元素)
    • 浏览器样式
    • 用户样式

      1.1 元素内嵌样式

      把样式应用到元素上,最直接的是使用 全局属性style
      <body>
      <p style="font-size: 16px;background-color: #ccc;">use Global Attribute 'style' to set style</p>  
      </body>

      1.2 文档内嵌样式

      使用 style元素 定义文档内嵌样式
      <head>
      <style>
        p {
          font-size: 16px;
          background-color: #ccc;
        }
      </style>
      </head>
      <body>
      <p>use 'style' to set style</p>  
      </body>

      1.3 外部样式表样式

      使用 link元素 将一个样式表应用于一个 HTML 文档
      /* style.css 文件 */
      p {
      font-size: 16px;
      background-color: #ccc;
      }
      <!-- HTML 文档 -->
      <head>
      <link href='style.css' >http://www.0771ybyy.com/news/1799.html<rel='stylesheet'></link>
      </head>
      <body>
      <p>use 'link' to set style</p>  
      </body>
      文档想要链接多少样式表都行,为每个样式表使用一个link元素即可。如果不同样式表中的样式使用了相同的选择器,那么这些 样式表的导入顺序很重要! 这种情况下使用的是后导入的样式 NOTE: 后来居上原则

      1.3.1 @import

      可以用@import 语句将样式从一个样式表导入到另一个样式表中
      /* combined.css 文件 */
      @import 'style.css'
      p {
      color: #fff;
      }
      一个样式表想导入多少别的样式表都行,>http://www.0771ybyy.com/news/1802.html<只要为每个样式表使用一条 @import 语句即可。@import 语句必须位于样式表顶端,样式表自己定义的样式不能出现在它之前。 NOTE: 最好不要使用 @import EXPLAIN: 为什么?
    • 浏览器处理 @import 语句的效率往往不如处理多个link元素并靠样式层叠解决问题

      1.3.2 @charset

      在 CSS 样式表中可以出现在 @import 语句之前的只有 @charset 语句。@charset 语句用于声明样式表使用的字符编码。
      @charset 'UTF-8'>http://www.0771ybyy.com/news/1801.html<
      @import 'style.css'
      p {
      color: #fff;
      }
      如果样式表未声明使用的字符编码,那么>http://www.0771ybyy.com/news/1803.html<浏览器将使用载入该样式表的 HTML 文档声明的编码。要是 HTML 文档也没有声明编码,那么默认情况下使用的是UTF-8

      1.4 浏览器样式

      浏览器样式(用户代理样式:user agent)是元素尚未设置样式时浏览器给它设置的默认样式。这些样式因浏览器而略有差异。 i.e. 浏览器对 a 标签的样式一般设置为:
      a {
      color: #00f;
      text-decoration underline;
      }

      1.5 用户样式

      大多数浏览器都允许用户定义自己的样式表(custom.css),这类样式表中包含的样式称为用户样式。
      /* custom.css 文件 */
      a {
      color: #f0f;
      background: >http://www.0771ybyy.com/news/1800.html<#ccc;
      }

      2 样式的层叠

    2.1 层叠的次序 cascading order

    浏览器要显示元素时求索一个 CSS 属性值的次序:

    1. 元素内嵌样式
    2. 文档内嵌样式
    3. 外部样式表
    4. 用户样式
    5. 浏览器样式

    2.2 调整层叠次序 !imporatnt

    使用 !imporatnt 语句可以把样式属性值标记为重要,改变正常的样式层叠次序。不管这种样式属性定义在什么地方,浏览器都会予以优先考虑。

    p {
      color: #f0f !important;
      background: #ccc;
    }

    2.3 同级样式冲突 specificity

    如果有两条定义于同一层次的样式都能应用于同一元素,而且它们都包含浏览器要求索的 CSS 属性值,这时候就需要依靠 专一程度和定义次序 来解决同级样式冲突

    2.3.1 专一程度

    选择器的特殊性:

    1. 选择器中 id 的数目(0-1-0-0)
    2. 选择器中 classproperty 和 pseudo class 的数目(0-0-1-0)
    3. 选择器中 element 和 pseudo element 的数目(0-0-0-1)
    4. NOTE: 结合符和通配选择符对特殊性没有任何贡献

    浏览器将这三类评估所得值结合起来,由此辨识最特殊的样式并采用其属性值。在评定“专一程度”时要按照 a-b-c-d 的形式生成一个数字。(a代表在5类样式表中的次序,因为这里讨论的是同级样式,因此都可默认为 0;bcd 分别代表上述三类特征的统计结果) WARN: 它不是一个四位数,而是 逐位比较,即:0-1-0-0 这个得分比 0-0-5-5 这个得分代表的专一程度更高。

    2.3.2 定义次序

    如果同一个样式属性出现在具体程度相同的几条样式中,那么浏览器会根据其位置的先后顺序选择所用的值 NOTE: 后来居上原则

    3 样式的继承 inheritance

    如果浏览器在直接相关的样式中找不到某个属性的值,就会求助于继承机制,使用父元素的这个样式属性值 WARN: 并非所有 CSS 属性都是可以继承的 NOTE: 与元素外观(文字颜色、字体等)相关的样式会被继承;与元素在页面上的布局相关的样式不会被继承。 NOTE: 在样式中使用 inherit 可以实现 强行实施继承,明确指示浏览器在该属性上使用父元素的样式值。

    p {
      color: #fff;
      border: medium solid #000;
    }
    span {
      border: inherit; /* border: medium solid #000; */
    }
    展开全文
  • css实例教程 理解Float的含义.
  • 网页制作Webjx文章简介:这是一篇针对CSS新手的文章,可能很多的网友来说,已经非常熟悉,但对于很多新人来说,学习CSS的一个很大的困难,不是因为CSS难以理解,而是因为CSS中的英文单词太多。其实CSS的原理非常简单...
  • 简述对CSS的盒子模型理解

    万次阅读 2016-12-29 13:42:06
    CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘...
  • CSS模块化的理解

    2020-12-10 23:36:52
    我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。 在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么...
  • 下面小编就为大家带来一篇深入理解css属性的选择动画性能的影响。小编觉得挺不错的,现在分享给大家,也给大家做个参考
  • CSS 模块化的理解

    2020-12-08 20:19:15
    我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。 1、将常见的样式剥离出来,形成单独的样式,我叫他基础样式表或...
  • CSS盒模型是CSS的基石,面试一定会问道; 基本概念:标准模型+IE模型;(content,padding,border,margin) 标准模型和IE模型的区别: CSS如何设置这两种模型:  box-sizing: content-box;(标准模型,...
  • CSS简单理解与应用

    千次阅读 2012-01-28 15:38:20
    CSS能够 HMTL 中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有网页对象盒模型的能力;能够统一地控制HMTL中各标志的显示属性; 能够使人更能有效地控制网页外观以及
  • 主要帮助大家深入理解CSS选择器优先级的相关内容,通过八个小例子分析比较CSS选择器优先级,感兴趣的小伙伴们可以参考一下
  • 对css3属性 z-index的理解

    千次阅读 2016-04-14 22:37:58
    就是标签元素设置了position的属性,并且属性为:absolute/fixed/relative/(inherit)等 其实也很好理解,它的的大小可以作为标签元素的堆叠顺序,就是三维空间坐标系中的z轴,z的大小可以定位元素的堆叠层次。 ...
  • 下面小编就为大家带来一篇深入理解CSS定位与层叠。小编觉得挺不错的,现在分享给大家,也给大家做个参考
  • 理解css属性选择器
  • CSS clip 的个人理解

    千次阅读 2018-06-01 17:55:43
    CSS clip 的个人理解
  • CSS深入理解之absolute视频教程.txt 前端必备技能,助你快速掌握
  • 关于 CSS 中的定位(position),你... 本次课程将通过20分钟的时间来介绍有关 CSS 定位的所有知识,当视频结束的时候,你将会完全理解和掌握 CSS 中定位,成为 CSS 定位方面的熟手,可以开始在项目中有效地运用它们。
  • 主要介绍了深入理解CSS中的属性模块,里面讲到了CSS中的类等重要进阶知识,需要的朋友可以参考下
  • css hack基础理解

    千次阅读 2017-04-17 22:48:05
    因为不同厂商的浏览器以及不同的版本对于css的支持和解析结果有不同的差异,并且css的优先级问题都会导致生成的页面效果产生变化,得不到我们想要的效果,css hack的作用就是为了使css代码能够兼容不同的浏览器以及...
  • 理解 CSS 坐标

    千次阅读 2009-02-11 14:04:00
    CSS 用于 Web 页面的布局,布局涉及元素的位置,元素位置必须参照坐标系来确定。CSS 坐标系与数学坐标系不同,它的坐标原点在浏览器可视窗口或元素的左上角,x 轴正方向向右,而 y 轴正方向则向下,如下图所示。CSS ...
  • 本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下
  • 加深HTML和CSS标签语义化的理解

    千次阅读 2020-02-27 21:26:39
    首先说明的一点是,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。...以前以我web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,font等标...
  • “行高“顾名思义指一行文子的高度,大家对CSS行高line-height都有自己的理解,下面为大家介绍下本人自己的理解
  • 主要介绍了CSS transform-origin属性的理解,详细的介绍了CSS transform-origin属性的作用及其实践,非常具有实用价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 263,775
精华内容 105,510
关键字:

对css的理解