前端（三）

时间 2019-11-08

标签前端繁體版

原文原文链接

一css基本概念

1.1流

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

1.2css宽高样式

width、height的默认值都是auto。
css

对于块级元素，流体布局之下width: auto自适应撑满父元素宽度。html

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

不管内联元素仍是块级元素，height: auto都是呈现包裹性，即高度由子级元素撑开。bash

注意父元素height: auto会致使子元素height: 100%百分比失效。布局

若是块级元素的 width是个固定值， margin是 auto，则 margin会撑满剩下的空间；若是 margin是固定值， width是 auto，则 width会撑满剩下的空间。

1.3css的单位
字体

html中的单位只有一种，那就是像素px，因此单位是能够省略的，可是在CSS中不同。 CSS中的单位是必需要写的，由于它没有默认单位。经常使用过的是px或者是百分比（相对于父标签）
ui

1.4css的基本写法url

选择器{
	属性名: 属性值;
	属性名: 属性值;
}复制代码

选择器表明页面上的某类元素，选择器后必定是大括号。
属性名后必须用冒号隔开，属性值后用分号（最后一个属性能够不用分号）。
属性名和冒号之间最好不要有空格（经验）。
若是一个属性有多个值的话，那么多个值用空格隔开

1.5行高line-height样式spa

行高和块级仍是行内标签没有关系，就是指定的每一行的高度。如code

p {
            width: 400px;
            line-height: 30px;
            font-size: 10px;
        } 复制代码

<p >你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好</p> 复制代码

那么显示p的高度就是 = 多少行*30px。

二字体样式

p{
            font-size:50px; 		/*字体大小*/
            line-height: 30px;      /*行高*/
            font-family:幼圆,黑体; 	/*字体类型：若是没有幼圆就显示黑体，没有黑体就显示默认*/
            font-style:italic ;		/*italic表示斜体，normal表示不倾斜*/
            font-weight:bold;	/*粗体：属性值写成bolder也能够*/
            font-variant:small-caps;  /*小写变大写*/
  }复制代码

字体属性说明：

网页中不是全部字体都能用，由于这个字体要看用户的电脑里面装没装。
为了防止用户电脑里，没有幼圆这个字体。就要用英语的逗号，隔开备选字体。
行高能够用百分比，表示字号的百分之多少。举例： font-size:50px; line-height: 200%; 就等同于line-height:100px。

三列表样式

list-style-image:url(../static/logo.png) ;  /*列表项前设置为图片*/复制代码

四超出范围样式

咱们在css中设置宽度和高度都是100px，这个时候咱们在容器中放置一个很长的文本，文本所须要的区域，已经超过了这个宽度和高度的时候咱们须要怎么样显示呢？

使用overflow属性，能够定义超出的文本怎么显示，样式值有：

auto：浏览器本身解决。在必需时裁切对象多余的内容或显示滚动条。通常采用这个属性值。
visible：默认值。所有显示出来（溢出）。
hidden：不显示超过对象尺寸的内容。
scroll：老是显示滚动条。

五背景样式

CSS样式中，常见的背景属性有如下几种：（常常用到，要记住）

background-color:#ff99ff; 设置标签的背景颜色。
background-image:url(images/2.gif); 设置标签的背景图片。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
- no-repeat不要平铺；
- repeat-x横向平铺；
- repeat-y纵向平铺。
background-position:center top; 设置背景图片在当前标签中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一块儿移动。属性值能够是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
另外还有一个简写属性叫作background，它的做用是：将上面的多个属性写在一个声明中。

tips：padding也是有背景图和颜色的。

background-position样式值能够是top、left、right、bottom，同时还能够是具体数值，但是是正数还能够是负数：

background-position:向右偏移量 向下偏移量;复制代码

background 综合属性

background:red url(1.jpg) no-repeat 100px 100px fixed;复制代码

等价于：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;复制代码

六css和html结合方式

行内样式：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式：在页面的head里采用<style>标签。范围针对此页面。
引入外部样式css文件的方式。这种方式又分为两种：
- 采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 采用import，必须写在<style>标签中，而且必须是第一句。例如：@import url(a.css) ;

6.1行内样式

采用style属性。范围只针对此标签适用。

<p style="color:white;background-color:red">之后全部的时光里</p>复制代码

6.2内嵌样式

在head标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。

<style type="text/css">
    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>

 <body>
        <p>小哥哥</p>
	<p>洗白白</p>
	<p style="color:blue">你懂得</p>
 </body>复制代码

6.3引入外部样式css文件

咱们先在html页面的同级目录下新建一个a.css文件，那说明这里面的代码全是css代码，此时就没有必要再写<style>标签了

<link rel = "stylesheet" type = "text/css" href="a.css">复制代码

这样咱们就在当前页面引入了一个外部样式。

这里再讲一个补充的知识：link标签的rel属性 <link>标签的rel属性： 其属性值有如下两种：

stylesheet：定义的样式表
alternate stylesheet：候选的样式表