专栏首页不会写文章的程序员不是好厨师全栈第一步-CSS基础前言CSS基础总结

全栈第一步-CSS基础前言CSS基础总结

前言

作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

CSS基础

CSS主要知识点集中于盒模型,布局,选择器等

盒模型

在对html标签有了整体认识之后,在了解了文档流的概念之后,就得了解元素在整个浏览器中的展现形式。CSS盒模型如下图所示:

css盒模型

从内到外分别为content、padding、border、margin,从盒子模型可知,元素的width和height与padding/border/margin的设置大小有关系,padding,margin等都可以分别设置top、bottom、left、right大小。盒子的整体width、height计算方式比较简单。

目前存在两种不同类型的盒模型,IE盒模型和W3C标准盒模型,区别在于我们在设置的width和height包含哪些部分,从而影响整个盒子的整体高度和宽度的计算。这篇文章对于两种盒模型的区别和计算方法讲得很充分。区别在于IE对于设置的width不仅包含content width,还包含了border和padding。在使用过程中为了统一认识,使用box-sizing:border-box比较好。

上文提到了可以显式设置width、height,目前也存在一些设置width/height不起作用的元素。html元素有块级元素(block-level elements)和行内元素(inline elements)等。在文档流中,块级元素通常被现实为独立的一块,独占一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

常见的分类有:

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

但是我们可以通过设置元素的display属性来改变布局级别。常见的display属性有三种,block、inline、inline-block;区别如下:摘自网络

display:block block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。 display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。 display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

布局

布局算是css非常重要的一块应用吧,常见的网页设计可能会分为顶部导航栏,左侧菜单栏,右侧内容区,底部版权声明等。布局主要靠两种属性,float和postion

float

float有几个属性值,left、right,none等,使用float后元素会脱离文档流,使元素display:block,float不会对其上方的元素产生影响,会对其下方的元素产生影响,可以使用clear:both清除影响。

float的属性值有none、left、right,有几个要点: 只有横向浮动,并没有纵向浮动。 当元素应用了float属性后,将会脱离普通流,其容器(父)元素将得不到脱离普通流的子元素高度。 会将元素的display属性变更为block。 浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片),与应用了position的元素相比浮动元素并不会遮盖后一个元素。 浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示,必须让两个块状元素都应用float)。

position

这篇文章对于position和float讲得非常清楚

1、static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。 2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。 3、absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。 4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。 - fixed这个元素比较重要的一点是参照的对象是浏览器窗口,例如标题栏header或者顶部的导航栏啥的可以选择固定 - fixed与absolute最大的区别就是fixed参照对象是浏览器窗口,而absolute的“根元素”是可以被设置的,默认的话是body标签 static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析 比较重要的一点是: relative是相对于自身位置进行定位, absolute是相对于static定位以外的第一个父元素进行定位,包括fixed情况。

总结

本文对近期的CSS学习做个总结,总结过程中发现自己对于position定位还不是特别清楚,后续使用过程中得继续体会,接下来准备学习下bootstrap和jquery。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 记一次"诡异"的git merge错误

    今天照常开发,在日常部署测试的时候进行git merge 竟然出现了"代码丢失"的情况,相当诡异,特此记录。

    LNAmp
  • 日志那些事儿——slf4j集成logback/log4j

    在日志Logger漫谈中提到了slf4j仅仅是作为日志门面,给用户提供统一的API使用,而真正的日志系统的实现是由logback或者log4j这样的日志系统实现...

    LNAmp
  • ThreadLocal解析与最佳实践

    用于同一个线程内的方法要共享某些变量或状态的时候,提供线程内的局部变量,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或者组件之间一些公共变量的传递...

    LNAmp
  • JQuery快速使用之元素查找与操作

    以下是Jquery快速使用的查阅手册,没有个人理解的地方还请原谅,毕竟初衷只是方便开发时忘了可以快速查阅。

    前端博客 : alili.tech
  • JavaWeb(八)JQuery

    jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

    二十三年蝉
  • css选择器

    下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

    lonelydawn
  • 如何使用python进行web抓取?

    本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

    CDA数据分析师
  • Pseudo elements伪元素与Pseudo classes伪类

    ::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

    gojam
  • 前端面试题-伪类和伪元素

    CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个...

    前端博客 : alili.tech
  • jquery教程之查找筛选函数

    三、children 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

    老雷PHP全栈开发

扫码关注云+社区

领取腾讯云代金券