CSS基础

什么是CSS

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

样式规则的位置

外部样式表

不需要style标签

<link rel="stylesheet" href=""/>

嵌入式样式表

<style type="text/css">
p{}
</style>

内联样式

属性名为style
举例：

<p style=""></p>

css导入方式的优先级，采用就近原则，什么样式离元素越近，优先用什么样式
优先采用内联式，嵌入式和外联式，哪个离元素最近用哪个

CSS样式规则：

1、元素选择器：

p{} 凡是标签名称为p的元素均采用该样式
h1，h2{} h1和h2标签采用该样式

2、类选择器：

.myclass 凡是使用class=“myclass”的元素均用该样式，可以给同一个元素加上多个类选择器，中间以空格隔开

3、id选择器

#imgDiv{} id属性为imgDiv的元素采用该样式

4、包含选择器

#imgTable img{} id属性为imgTable的元素中的img子元素采用该样式

5、通配选择器

#mydiv *{} id属性为mydiv的元素中，所有的子元素采用该样式

6、伪类选择器

#myImage：hover{} 当鼠标悬停在id为myImage的元素时，采用该样式

7、属性选择器

input[type=text] 表示input标签type属性为text的元素采用该样式

CSS优先级

！important可以改变CSS选择器的优先级，加上一个！important就可以优于正常的CSS规则，

CSS盒模型

CSS使用了一个称为盒模型的方法格式化所有HTML元素，当为元素定义格式时，CSS实际上是在定义盒子的格式，盒模型将所有元素放在一个正方形或矩形盒子中，这个盒子用多个可设置的属性来分层

在盒模型中，可以控制四个不同的分层属性
内容：元素中的内容
外边距：代表元素外边的空间，这个空间将元素相互分开
边框：位于元素的边距内和元素的边框距外之间可配置的线
内边距：元素内容和元素边框之间的空间

margin是当前元素和border的距离
padding是内容和border的距离
margin是对外的，padding是对内的

水平盒子的间距为两个盒子的和
垂直盒子间距为两个盒子间距的最大值

盒子之间的关系

标准文档流
指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则
1、文本元素按照从上到下，从左到右的格式布局
2、块级元素按照从上到下依次排列
3、内嵌元素按照从左到右依次排列

块级元素转换为内嵌元素，使用float：left

内嵌元素转换为块级元素，使用display：block

display=“none”元素不会占用空间
visibility=“hidden”元素会占用空间

内容超出容器

overflow：scroll 超出部分显示滚动条
overflow：hidden 超出部分隐藏

定位属性

position属性用来规定元素怎样在web页上定位，
它的取值为：
static（默认的）静态定位，表示按照HTML格式规则正常定位
relative 相对定位，相对于元素原始位置进行偏移
absolute 绝对定位，是指某元素将定位在已经定位的父元素框架或浏览器窗口本身的左上角绝对位置
fixed 固定定位，该元素不会随滚动条移动而移动

opacity: 0.5;   /*透明度 0表示完全透明，1表示完全不透明*/

transition: opacity 2s;/*透明度在2s内完成改变*/

 input[type=text]{}/*input标签，type属性为text的元素采用该样式*/
 
 background-repeat: no-repeat; /*设置背景图片是否平铺*/
 
background-position: 150px 0px; /*设置背景图片的起始位置*/

font-family: 幼圆; /*设置字体类型*/

letter-spacing: 20px;/*设置文字间距*/

border-width: 2px 6px 8px 1px;/*上右下左*/

margin-left: 50px;/*当前元素相对于父元素或上一个兄弟元素的左间距*/

padding-top: 10px;/*内容相对于边框的距离*/

float: left;/*左漂移，后面的元素相对于当前元素靠左排列*/

display: block;/*将内嵌元素转化成块级元素*/

position: relative;/*将该元素定位设置为相对定位，该元素相对于原来的位置进行定位*/

left: 50px;
top: 10px;
 /*left和top只有在元素定位后，才能生效*/

position:absolute ;/*将该元素定位设置为绝对定位，如果父元素没有定位，会脱离文档流，相对于浏览器定位，如果父元素已经定位，相对于父元素定位*/

position: fixed;/*将该元素定位设置为固定定位，该元素不会随滚动条移动而移动*/

<div style="width: 100px;height: 100px;background-color: blue;clear: both">sadas</div>
<!--clear 清除上一个元素漂移的影响-->

list-style: none;/*去掉无序列表的圆点*/

cursor: pointer;/*设置鼠标样式为手型*/