CSS基础

CSS是层叠样式表的缩写，它用于定义html元素的显示形式，是一种格式化网页内容技术。

添加样式表的方式：

1.内联式：直接在元素中加入style属性，只能用网页中的一个元素

<div style="border: 1px solid #000;width: 300px;height: 200px"></div>

2.嵌入式：书写style标签，在标签中指明样式。可以用于网页中不同元素

    <style>

        div{

            width: 300px;

            height: 200px;

            background-color: yellow;

            border: 2px solid #000;

        }

    </style>

3.外联式：将样式规则写到文件中，可以用于不同的网页，重用度高

<link rel="stylesheet" href="abc.css">

层叠样式表的含义是：如果有多个规则来描述同一个元素，那么会根据样式表的优先级，来决定最终显示什么样式。

对于导入css的优先级：内联式 > 嵌入式 > 外联式

1.CSS选择器：

元素选择器：利用元素的标签名称作为选择范围。div{}表示所有div元素均采用该样式。h1,h2{}表示所有的h1标签和h2标签均采用该方式。

2.类选择器.：利用元素的class属性来引入选择器的样式。同一种元素也可以选择性使用。

.mm{}<div class="mm"></div>该div类选择器定义的样式。

3.id选择器#：让拥有id属性的元素采用该方式

<pid="p1"></p>   #p1{}  id号为p1的元素采用该方式

4.包含选择器：元素内的子元素采用该方式

<div id="mydiv"></div> #mydiv span{} id号为mydiv元素中所有的span标签采用该方式

div.aaa{}表示所有的div中，class属性为aaa的元素采用该方式

5.通配符*：所有的元素均采用该样式

#onediv *{} 表示id为onediv中，所有的元素均采用该样式

6.伪类选择器：执行完某个动作的元素采用该样式。

#data tr:hover{} 表示鼠标悬停在id为data下的tr元素时采用该方式。

颜色单位：

使用0-255之间的整数值来设置，如color:rgb(128,0128);

使用十六进制数组定义颜色，如#fc0eab;

为颜色取名：aqua，black，blue，fuchsia，gray，green等；

margin属性：

水平盒子的间距为两个盒子间距的和

垂直盒子的间距两个盒子间距的较大值

margin值可以设置为负值

padding属性：

padding属性用来描述盒的边框和内容之间插入多少空间

margin是当前元素和border的间距；padding是内容和border的间距

margin只对外的，padding是对内的

margin只对块级元素有效。padding对所有元素有效

盒子模型

在盒子模型中，我们可以控制四个不同的分层属性：

内容：元素中的内容

外边距：代表元素外边的空间，这个控制将元素相互分开

边框：位于元素的边距内和元素的边框外之间的可配置的线

内边距：元素内容和元素边框之间的空间

盒子模型均可以用上右下左方式设置。如果仅给出两个或三个值，那么缺失的属性值与对边相同的值

标准文档流：

所谓标准流，就是指在不使用其他与排列位相关的特殊CSS规则时，各种元素的排列规则。

1文本元素从上到下，从左到右的格式布局

2块级元素按照从上到下依次排列。

3内嵌元素按照从左到右依次排列。

display:none和visibility:hidden的区别：

这两种方式都可以隐藏元素

display:none元素看不见，同时不占yong位置

visibility:hidden元素看不见，但元素会占位置

内嵌元素和块级元素的相互转换

内嵌元素-------》块级元素   display: block

块级元素-------》内嵌元素   float:left