CSS的几个属性(1)

  • line-height有什么作用?
    • 设置行高，例如：line-height:1/200%/16px;这是三种不同表达方式，表示行高或者当文字多时文本行与行之间的缝隙，文本所占用的高度是文字本身高度的一倍，二倍，或固定值16px。一般用于单行文字的垂直居中（多行则不行），行高等于元素的高度line-height=height。
  • 如何去查CSS熟悉的兼容性？比如inline-block哪些浏览器支持？
    网站caniuse中查看
    Paste_Image.png
  • a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
    • href表示的是超链接要跳转到哪里的一个路径地址，可以是相对路径也可以是绝对路径。
    • title:标题，鼠标移入图片的提示文字
    • target：在哪个窗口打开网页，常用的取值有两个，_slef,_blank.
      _slef:在当前窗口打开（默认）
      _blank:新开一个窗口打开
    • title 和 alt有什么区别？
      title是鼠标移入时候的文字提示，而alt一般用在图片上，表示图片加载不出来的时候在该位置上显示的提示文字
  • display: none , visibility: hidden, opacity:0 有什么作用？有什么区别？
    display: none，表示dom元素在页面中不显示，只在dom树中存在，文档流中不存在。
    visibility:hidden:仅仅是html文档中隐藏，元素所占的的位置依然保留
    opcity：设置透明度，取值（0-1），0表示完全透明，1表示完全不透明，一般用在实现动画，淡入淡出等过度的一些效果。
随笔css

列表介绍

有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？使用场景是什么？ 能否嵌套？

  • < ul>无序列表是一个列表，一般用在不需要区分内容前后顺序的信息列表中，默认用圆点，可以用list-style: none;去除。< ul>可以在< li>中添加嵌套。
    • < ol>有序列表是带有数字顺序的列表或列表项，常用在内容有明确的先后顺序的列表中，比如排行榜，默认样式用1.2.3.…标记
    • < dl>自定义列表类似于table，拥有表头，可以对列表项进行描述， 常用于需要分类描述的产品、信息等，列表项前没有标记。< dl>下的表头用< dt>，列表项用< dd>。

均可以嵌套，下面为示例
Paste_Image.png

技术css

html相关小知识点(1)

大的网站将css放在head里面是为了防止散屏、白屏，内容出来样式摆出来

index.html约定俗成的文件名，访问一个网站是默认打开index，但可以在web站点进行测试。

font-family：…（浏览器中的字体和电脑的字体库）；列出字体供网页显示，现在浏览器查找，没有的话在本地查找，否则查找下一个字体

@font face引入自定义字体

font-size:12px;chrome里面字体最小字体12像素，设置的在校也不会显示

字体单位

  • px是像素单位
  • em是相对单位。相对于父元素，1em表示是父元素字体大小的一倍（同等大小）
  • rem相对于根节点（html元素标签）的大小
    若果父元素或根节点未指定，则按浏览器默认的16xp

    text-align：left/right/center/justify;元素内容左对齐、右对齐、居中、两端对齐

    line-height:1/200%/16px;表示行高或者当文字多时文本行与行之间的缝隙，文本所占用的高度是文字本身高度的一倍，二倍，或固定值16px。一般用于单行文字的垂直居中（多行则不行），line-height=height。

    word-wrap: normal|break-word;正常|在长单词或 URL 地址内部进行换行

    伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容，CSS 伪类用于向某些选择器添加特殊的效果，代表的是一种状态，而不是指的特定选择器

    样式的继承，比如
    设置color:red;那么它里面的元素（没有特殊设置的话）都变为红色，但是对< a>标签是无效的，需要变成”.div a{color:red;}”

    a标签只有颜色不继承。ie8以下只支持a标签的伪类

随笔html小知识

HTML CSS语义化

如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节

  • 语义化是指合理使用HTML标记以及其特有的属性去格式化文档内容，也就是将标签所特有的含义和样式体现出里面包含的内容。
  • 语义化的好处：
    省去不必要的标签，让页面的结构简洁清晰
    更容易被搜索引擎的爬虫收录
    在设备无法渲染CSS时可以确保这些设备能用一种有意义的方式来渲染页面
    便于屏幕阅读器的阅读
    有利于团队的开发和维护
技术语义化

first-child和first-of-type的区别

:first-child和:first-of-type的作用和区别

  • :first-child：定义父元素下第一个元素的样式。
    例子：.box>h1:first-child{}：定义.box下第一个子元素为h1的样式，如果第一个子元素不是h1则没有样式显示
  • first-of-type：定义父元素下同一类元素中的第一个元素的样式。
    例子：.box>h1:first-of-type{}：对.box下所有的h1子元素当中的第一个h1元素定义样式

运行如下代码，解析下输出样式的原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
> <!DOCTYPE html>
> <html>
> <head>
>   <meta charset="utf-8">
>   <title>first-child  vs first-of-child</title>
>   <style>
>     /*选中.item1,该元素是它父亲下 当前类型的 第一个孩子*/
>     .item1:first-of-type{
>       background: red;
>     }
>     
>     /*选中.item1,该元素是它父亲所有的 .item1孩子中的第一个*/
>     .item1:first-child{
>       color: blue;
>     }
> 
>   </style>
> </head>
> <body>
> 
>  <!--红色，因为该元素是item1,且是它父亲的孩子中，div类型下的第一个-->
>  <!--蓝色，因为该元素是item1,且是它父亲的孩子中的第一个-->
>  <div class="item1">111</div>
> 
>  <div class="ct">
>    
>    <!--蓝色，因为该元素是item1,且是它父亲的孩子中的第一个-->
>    <!--红色，因为该元素是item1,且是它父亲的孩子中，p 类型下的第一个-->
>    <p class="item1">222</p>
>    
>    <!--红色，因为该元素是item1,且是它父亲的孩子中，div 类型下的第一个-->
>    <div class="item1">333</div>
>    <div class="item1">444</div>
>    <div class="item2">
>      
>      <!--蓝色，因为该元素是item1,且是它父亲的孩子中的第一个-->
>      <!--红色，因为该元素是item1,且是它父亲的孩子中，div 类型下的第一个-->
>      <div class="item1">555</div>
>      
>      <div class="item1">666</div>
>    </div>
>  </div>
> </body>
> </html>
  • .item1:first-of-type{background: red; }：所有子元素中class=“item1”且为同类型元素当中的第一个元素。
    • “111”是body下class=“item1”且为div类型的子元素中的第一个元素。
    • “222”是< div class=”ct”>下class=“item1”且为p类型的子元素中的第一个元素。
    • “333”是< div class=”ct”>下class=“item1”且为div类型的子元素中的第一个元素。
    • “555”是< div class=”item2”>下class=“item1”且为div类型的子元素中的第一个元素
  • .item1:first-child{color: blue;}：所有子元素中class=”item1”中的第一个元素。
    • “111”是body下class=“item1”的子元素中的第一个元素。
    • “222”是< div class=”ct”>下class=“item1”的子元素中的第一个元素。
    • “555”是< div class=”item2”>下class=“item1”的子元素中的第一个元素。

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中.

  • 设置文本内容或行内元素水平居中，作用在块级元素中的行内元素上，让其水平居中
技术css

css选择器知识点

class 和 id 有什么区别:
在同一页面内：

  • id只能出现一次，class可以重复使用
  • id的权值(优先级)比class高，浏览器会优先渲染ID的样式
  • id是先找到内容，再定义样式，class是先定义好样式，再套用给多个内容。
  • id是一个元素的唯一属性，只能定义一次，而一个元素可以定于多个class，套用多个样式
  • class可以用于使用重复样式，比如页面内部几个结构需要使用同样的字体、颜色等

标签选择器用于很少的情况下，比如所有样式的重置

1、id选择器
2、class选择器
3、属性选择器
4、分组选择器
5、派生选择器
6、直接子元素选择器

CSS3选择器:first-of-type 从一组中选择第一个元素
:last-of-type 从一组中选择最后一个元素

伪类选择器

伪类选择器:
:link 定义a元素未被点击链接的样式。
:visited 定义a元素已被点击链接的样式。
:active 定义鼠标已经在其上按下、还没有释放的元素样式。
:hover 定义鼠标悬停其上的元素的样式。
:nth-child(n) 定义其父元素的第n个子元素，第一个编号为1。
:first-child 定于元素的第一个子元素的样式，等同于nth-child(1)。
例子：.box>h1:first-child{}：定义.box下第一个子元素为h1的样式，如果第一个子元素不是h1则没有样式显示
:nth-of-type(n) 定义父元素下使用同种标签的元素的样式。
:first-of-type 定义父元素下使用同种标签的第一个子元素的样式，等同于:nth-of-type(1)。
例子：.box>h1:first-of-type{}：对.box下所有的h1子元素当中的第一个h1元素定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
>E:first-child	匹配元素E的第一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于
div>h1:first-child;选择div下第一个孩子是h1的元素，如果不是h1则不会效果
div>h1:first-of-type	；选择div下所有h1当中的第一个h1
input[type=“text”]，属性选择器，针对某个特定用户设置样式或者[data="index.html"]针对某个特定页面
>E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:nth-child(n)	匹配其父元素的第n个子元素并且第n个是E，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

属性选择器

E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
chrome调试伪类选择器，比如hover（鼠标放上去才能调），点右上角“小图钉”样式可以出现调试
< a class=”button” href=”javascript:void(0)”>确定，调用js，阻止按钮的跳转行为
marging：0 auto；左右自适应实现水平居中只针对块级元素

##CSS优先级
从高到低分别是

在属性后面使用 !important, 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

随笔选择器

CSS样式的引入方法

CSS是Cascading Style Sheets（层叠样式表）的缩写。用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。它的引入和定义一般要放在主体前面

  • 默认样式（ user agent style浏览器中默认定义的样式 ）

    比如h1、h2、p默认的字体大小和黑色字体

  • 外部样式表（引入一个外部.css文件）

“/“为linux下文件路径写法，”\”windows下路径写法。html中直接用“/”即可。./index.css和index.css均表示当前目录下。../index.css表示上一级目录。

  • 内部样式表(直接写入style标签)

技术css

标记语言介绍

标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括文本的结构和表示信息等)与原来的文本结合在一起，但是使用标记进行标识。

  • HTML是一种超文本标记语言，用于web文档的显示，web的内容以及样式、html语法、js等一起在编辑内写出来，最终显示在浏览器的是需要呈现的内容。而超文本就是指页面内可以包含图片、连接、音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

  • Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。

Markdown 的几个优点：

1、纯文本，兼容性极强，可以用所有文本编辑器打开。

2、让你专注于文字而不是排版。

3、格式转换方便，Markdown 的文本你可以轻松转换为 html、电子书等。

4、Markdown 的标记语法有极好的可读性。

技术markdown

git提交远程库常见错误提示 

1
2
3
4
5
6
git 提交命令
         git init
         git add README.md
         git commit -m "这次提交的改动信息"
         git remote add  origin git@github.com:Github的用户名/仓库名
         git push -u  origin master

可能出现的问题：

  • 执行git add README.md时出现fatal: pathspec ‘README’ did not match any files

    • 原因：该命令是将文件加至暂存区域，表示该文件找不到，即是在目录里面不存在，创建好文件再添加。

  • 执行第4条命令行时报错“fatal: remote origin already exists.”

    • 解决：先输入git remote rm origin后重新输入一次即可。

  • 执行git push -u origin master时报错信息如
    “ ! [rejected] master -> master (fetch first)
    error: failed to push some refs to ‘git@github.com:levyc/SpringAccessDB.git’
    hint: Updates were rejected because the remote contains work that you do
    hint: not have locally. This is usually caused by another repository pushing
    hint: to the same ref. You may want to first integrate the remote changes
    hint: (e.g., ‘git pull …’) before pushing again.
    hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.”

    • 原因：github远程仓库发生了变化，但是本地没有fetch（抓取）新变化下来就push到远程仓库。只要先执行git pull –rebase origin master获取最新改动即可解决。

  • -push成功后但是Github上没有本地项目的文件。

    • 原因：没有将项目里面的文件添加进去就commit（提交）了。用git add . 将目录内所有文件添加进暂存区域再提交即可。
技术git

行内元素的几个小特性

块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。

  • 对行内元素有几个特性：

    设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

  • IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

解决方法：为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”：

技术html
,