ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端培训分享CSS基础知识学习

好程序员web前端培训分享CSS基础知识学习

原创 Html/css 作者:好程序员 时间:2020-07-22 15:29:39 0 删除 编辑

  好程序员web 前端培训分享CSS 基础点学习,今天要讲的是是关于web 前端入门基础-CSS 的基础知识学习。希望本篇文章能够对你有所帮助。

  一、流

  “流”又叫文档流,是 css 的一种基本定位和布局机制。流是 html 的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是 html 默认的布局机制,如你写的 html 不用 css ,默认自上而下(块级元素如 div )从左到右(内联元素如 span )堆砌的布局方式。

  二、块级元素和内联元素

  这个大家肯定都知道。

   块级元素是指单独撑满一行的元素,如div ul li table p h1 等元素。这些元素的 display 值默认是 block table list-item 等。

   内联元素又叫行内元素,指只占据它对应标签的边框所包含的空间的元素,这些元素如果父元素宽度足够则并排在一行显示的,如span a em i img td 等。这些元素的 display 值默认是 inline inline-block inline-table table-cell 等。

   实际开发中,我们经常把display 计算值为 inline inline-block inline-table table-cell 的元素叫做内联元素,而把 display 计算值为 block 的元素叫做块级元素。

   三、width: auto height: auto

  width height 的默认值都是 auto

   对于块级元素,width: auto 的自动撑满一行。

   对于内联元素,width: auto 则呈现出包裹性,即由子元素的宽度决定。

   无论内联元素还是块级元素,height: auto 都是呈现包裹性,即高度由子级元素撑开。但是父元素设置 height: auto 会导致子元素 height: 100% 百分比失效。

   流体布局之下,块级元素的宽度width: auto 是默认撑满父级元素的。这里的撑满并不同于 width: 100% 的固定宽度,而是像水一样能够根据 margin 不同而自适应的宽度。

  css 的属性非常有意思,正常流下,如果块级元素的 width 是个固定值, margin auto ,则 margin 会撑满剩下的空间;如果 margin 是固定值, width auto ,则 width 会撑满剩下的空间。这就是流体布局的根本所在。

  四、外在盒子和内在盒子

  外在盒子是决定元素排列方式的盒子,即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。

  内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。

    display: inline-table;  外在盒子就是 inline ,内在盒子就是 table 。外在盒子决定了元素要像内联元素一样并排在一排显示,内在盒子则决定了元素可以设置宽高、垂直方向的 margin 等属性。

   右侧的table 和左侧的文字在一行排列(外在盒子 inline 的表现特征),同时有拥有自定义宽度 111px (内在盒子 table 可以设置宽高)。

   五、css 权重和超越 !important

  曾经有道面试题把我难住了:

  //  假设下面样式都作用于同一个节点元素 `span` ,判断下面哪个样式会生效

  body#god div.dad span.son {width: 200px;}

  body#god span#test {width: 250px;}

   可怜当时做了三年前端的我竟然还不知道css 有权重

  css 选择器权重列表如下:

图片1

   css 中, !important 的权重相当的高,但是由于宽高会被 max-width/min-width 覆盖,所以 !important 会失效。

  width: 100px!important;

  min-width: 200px;

  上面代码计算之后会被引擎解析成:

  width: 200px;

 


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913864/viewspace-2706185/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    342
  • 访问量
    154350