前端基本功(一)-HTML+CSS+JS基础

小Tips

  • 任何一个标准的HTML页面,第一行一定是一个以DOCTYPE ……开头的语句。这一行,就是文档声明头,DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
  • 标准的div+css页面,用的标签种类很少:div p h1 span a img ul ol dl input
  • 一个HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!

HTML 超文本标记语言 从语义的角度描述页面结构。提到HTML的作用,只能从语义方面从想,绝对不能想样式
CSS 层叠式样式表 从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。

HTML

CSS

CSS 基础

标签选择器

id选择器

类选择器
类选择器: class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类; 同一个标签可以同时携带多个类。
1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

到底用id还是用class?
答案:尽可能的用class,除非极特殊的情况可以用id。
原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

就是一个标签,可以同时被多种选择器选择,标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签,从而影响样式,这就是css的cascading“层叠式”的第一层含义。


CSS 高级

这里写图片描述
后代选择器,描述的是祖先结构

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述
继承性是从自己开始,直到最小的元素。

层叠性:
权重问题大总结:
1) 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。

块级元素和行内元素

  • 块级元素
    • 霸占一行,不能与其他任何元素并列
    • 能接受宽、高
    • 如果不设置宽度,那么宽度将默认变为父亲的100%。
  • 行内元素
    • 与其他行内元素并排
    • 不能设置宽、高。默认的宽度,就是文字的宽度。

在HTML中,我们已经将标签分过类,当时分为了:文本级、容器级。
文本级:p、span、a、b、i、u、em
容器级:div、h系列、li、dt、dd

CSS的分类和上面的很像,就p不一样:
所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。
所有的容器级标签都是块级元素。
这里写图片描述

css中一共有三种手段,使一个元素脱离标准文档流:
1) 浮动
2) 绝对定位
3) 固定定位

浮动

  • 浮动的基本性质
    • 浮动的元素脱标
      • 一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。
    • 浮动的元素互相贴靠
    • 浮动的元素有“字围”效果
    • 收缩
      • 一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。
  • 清除浮动

  • 清除浮动方法1:给浮动的元素的祖先元素加高度( 加高法)。有高度的盒子,才能关注浮动。浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
  • 清除浮动方法2:clear:both。clear就是清除,both指的是左浮动、右浮动都要清除。意思就是:清除别人对我的影响(表示自己的内部元素,不受其他盒子的影响)。这种方法有一个非常大的、致命的问题,margin失效了。
  • 清除浮动方法3:隔墙法。在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。墙用自己的身体当做了间隙。隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”。
    • 内墙法:浮动的元素不能把父亲撑出高。内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了
  • 清除浮动方法4:overflow:hidden。所有溢出边框的内容,都要隐藏掉。
    • 一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。
    • 这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。
  • 盒子居中

    • margin:0 auto;margin的值可以为auto,表示自动。当left、right两个方向,都是auto的时候,盒子居中了
    1   margin-left: auto;
    2   margin-right: auto;  //这两句简写未 margin:0 auto;
     
     
    • 1
    • 2

    注意:
    1) 使用margin:0 auto; 的盒子,必须有width,有明确的width
    2) 只有标准流的盒子,才能使用margin:0 auto; 居中。
    也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
    3) margin:0 auto;是在居中盒子,不是居中文本。
    文本的居中,要使用 text-align:center;
    4) margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。
    所以,我们一定要善于使用父亲的padding,而不是儿子的margin。

    定位

    以盒子为参考点:
    子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
    绝对定位的儿子,无视参考的那个盒子的padding
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    原文链接:https://blog.csdn.net/simplebam/article/details/81558859?biz_id=102&utm_term=%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-1-81558859&spm=1018.2118.3001.4187原文作者:Simplebam
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值