2018-09-29日

Web前端 / 基础

18 分钟读完 (大约 2771 个字)

Web前端基础（2）CSS基础知识

CSS基础知识

一个HTML文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

css样式语法结构

CSS声明总是以分号(;)结束，声明组以大括号({})括起来。

样式分类

插入样式表的方法有三种:

外部样式表(External style sheet)

1
2
3

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明

内部样式表(Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>

内联样式(Inline style)
内联样式不建议使用

1	<p style="color:sienna;margin-left:20px">这是一个段落。</p>

一些常见属性

<style type="text/css">
	.testcolor{
		color:red;
		/*这是个注释*/
	}
<style type="text/css">

<span class="testcolor">测试字符颜色</span>

/*注意css和html的注释**/

字符颜色 color:red;
字号大小 font-size:40px;
背景颜色 background-color:blue;
加粗 font-weight:bold;
不加粗 font-weight:normal;
斜体 font-style:italic;
不斜体 font-style:normal;
下划线 text-decoration:underline;
没有下划线 text-decoration:normal;

基础选择器

标签选择器

div{ }

id选择器

#id{ }

类选择器

.classname{ }
同一个标签可能同时属于多个类，用空格隔开

1	<h3 class="teshu zhongyao">我是一个h3啊</h3>

还有一个常有思路写出所有公共类供全局使用

不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
要尽可能的使用class，外部框体和特殊地方才用id选择器

后迭代选择器

向后迭代，不只是儿子，孙子，子子孙孙都可以

<style type="text/css">
    .div1 p{
    	color:red;
    }
</style>

<div>
	<p>测试文本1<p>
</div>
<div class="div1">
	<p>测试文本2<p>
</div>

测试文本1

测试文本2

上面只会对文本2有效果

交集选择器

一般是以标签选择器开头，class选择器结尾

1
2
3

h3.special{
	color:red;
}

并集选择器

用逗号分隔

1
2
3

h3,li{
	color:red;
}

通配符

通配符* ：效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

1
2
3

*{
	color:red;
}

CSS的继承性和层叠性

继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的

所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：

body{
	color:gray;
	font-size:14px;
}

层叠性

层叠性原则：

先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
如果没有选中，那么权重是0。如果大家都是0，就近原则

如果同一个标签，携带了多个类名，有冲突怎么显示？

<style type="text/css">
    .spec2{
    	color:blue;
    }
    .spec1{
    	color:red;
    }
</style>

<p class="spec1 spec2">我是什么颜色？</p>
<p class="spec2 spec1">我是什么颜色？</p>

我是什么颜色？

可以看到都是红色，所以和在标签中的挂类名的书序无关，只和css的顺序有关

!important标记

当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。

<style type="text/css">
    p{
    	color:red !important;
    }
    #para1{
    	color:blue;
    }
    .spec{
    	color:green;
    }
</style>

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

盒模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。

<style type="text/css">
	div.t1{
        width:200px;
        height:200px;
        border:1px solid red;
        padding: 50px;
	}
</style>
<div class="t1">测试文本</div>

测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本

这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。这是因为还要加上padding、border。

chrome浏览器盒子模型

宽度和真实占有宽度，不是一个概念！！
真实占有宽度= 左border + 左padding + width + 右padding + 右border

padding分方向设置

1	padding:30px 20px 40px 100px; /（上、右、下、左）/

用小属性层叠大属性

1 2	padding: 20px; padding-left: 30px;

chrome浏览器盒子模型

下面的写法错误

1 2	padding-left: 30px; padding: 20px;

border的其他属性解释

border-width:10px; → 边框宽度
border-style:solid; → 线型
border-color:red; → 颜色。

1	border:10px solid red;

标准文档流现象

我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。

标准文档流的几个特点和现象：

空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
高矮不齐，底边对齐

高矮不齐底边对齐演示

自动换行，一行写不满，换行写。

块级元素和行内元素

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级： p、span、a、b、i、u、em
容器级： div、h系列、li、dt、d

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换： display:inline; display:block;

块级元素

霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素

与其他行内元素并排
不能设置宽、高。默认的宽度，就是文字的宽度。

脱离标准流

标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。所以，移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：浮动、绝对定位、固定定位。

浮动

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

实现浮动

浮动分为左浮动和右浮动

img{
    float:left;
}
img{
    float:right;
}

浮动的特点

浮动的元素脱离标准流。（能够并排了，并且能够设置宽高了。无论它原来是个div还是个span）。
浮动的元素互相靠帖。
浮动的元素有“字围”效果。

字围效果示例

浮动的清除

有时候我们需要清除行内元素浮动的特性以适应某种要求。

浮动效果

例如上面的文本如果我们清除其浮动效果则图片会规则排列成两行

.text_line
{
    clear:both;
}

浮动清除效果

清除浮动的方法

例如：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。

<style text="text/css">
    ul{
        float:left;
        margin:0px;
        padding:0px;
    }
    ul li{
        color:white;
        float:left;
        background-color:#FF923D;
    }
</style>

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>

<div>
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

HTML
CSS
JS
HTML5
设计模式

学习方法
英语水平
面试技巧

1. 给浮动的元素的祖先元素添加高度

给浮动的元素的祖先元素添加高度

可以看到div的高度是0px, 因为div内的元素是浮动的，所以div不能被撑出高度。

<style text="text/css">
    div{
    	height:40px;
    }
</style>

HTML
CSS
JS
HTML5
设计模式

学习方法
英语水平
面试技巧

网页制作中，高度height很少出现。为什么？因为能被内容撑高！工作中用的很少。

2. clear:both;

这种方法有一个非常大的、致命的问题，margin失效了。

3. 隔墙法
这种方法可以在两个div中间添加一个块元素，和上面图片的例子很相似。

<style text="text/css">
	...
	
    #heightdiv{
		clear:both;
		height:10px;
    }
</style>

<div>
    <ul>
        ...
    </ul>
</div>
/*隔墙*/
<div id="heightdiv" ></div>
<div>
    <ul>
       ...
    </ul>
</div>

HTML
CSS
JS
HTML5
设计模式

学习方法
英语水平
面试技巧

4. 内墙法

<style text="text/css">
	...
	
	.heightdiv{
		height:40px;
	}
</style>

<div>
    <ul>
        ...
    </ul>
    /*内墙*/
	<div class="heightdiv" ></div>
</div>
<div>
    <ul>
       ...
    </ul>
    /*内墙*/
	<div class="heightdiv" ></div>
</div>

HTML
CSS
JS
HTML5
设计模式

学习方法
英语水平
面试技巧

5. overflow:hidden;

overflow就是”溢出”的意思， hidden就是”隐藏”的意思。表示”溢出隐藏”。所有溢出边框的内容，都要隐藏掉。

块标签元素溢出现象

本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

例如上面给两个div加上overflow:hidde;

<style text="text/css">
    div{
    	overflow:hidden;
    }
</style>

HTML
CSS
JS
HTML5
设计模式

学习方法
英语水平
面试技巧

# Web, css, html, javascript