当前位置: 首页 / 技术干货 / 正文
CSS基础知识点学习分享-好程序员

2020-07-22

web前端培训 css

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

web前端

  一、流

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

  二、块级元素和内联元素

  这个大家肯定都知道。

  块级元素是指单独撑满一行的元素,如divullitableph1等元素。这些元素的display值默认是blocktablelist-item等。

  内联元素又叫行内元素,指只占据它对应标签的边框所包含的空间的元素,这些元素如果父元素宽度足够则并排在一行显示的,如spanaemiimgtd等。这些元素的display值默认是inlineinline-blockinline-tabletable-cell等。

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

  三、width: autoheight: auto

  widthheight的默认值都是auto

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

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

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

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

  css的属性非常有意思,正常流下,如果块级元素的width是个固定值,marginauto,则margin会撑满剩下的空间;如果margin是固定值,widthauto,则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;

  免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。

好程序员公众号

  • · 剖析行业发展趋势
  • · 分享大厂面试心得
  • · 汇聚企业项目源码
  • · 下载全套高精尖教程

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-11-16(北京)

    开班盛况

    开班时间:2020-12-07(深圳)

    预约报名
  • 大数据+人工智能 <高端班>

    开班时间:2020-09-14(北京)

    开班盛况

    开班时间:2020-11-09(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-01-04(北京)

    预约报名

    开班时间:2020-07-20(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2020-07-20(上海)

    开班盛况

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况

    开班时间:2019-07-15(深圳)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号