html之css

1 css基础知识

1.1 css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

1.2 CSS使用

1、style属性上直接使用 (行间样式)

<h1 style="color:purple;">今晚吃什么？</h1>

2、Style标签上使用 (内部样式)

语法：

选择器{样式的内容}

</style>

CSS常用选择选择器：

元素选择器：元素名称

Class选择器：.+类名

ID选择器：#+id名称

3、Link标签引入css文件使用 (外部样式)

1先创建一个css文件

div{

100px;

height:100px;

backgroup-color:red;

}

2再引用该css文件(在头部文件处引用)

1.3 优先级

三种css样式优先级：行间样式 >外部样式 =内部样式(前面的会被覆盖，后面的起作用)

元素内style属性的优先级>id>class>元素>默认的浏览器样式>继承的样式

越复杂的选择器优先级越高

备注：!Important,将样式的优先级提高到最高

2 css常见属性

文字

Color:文字颜色

Font-size:文字的大小

font-family:文字字体

Font-weight:字体粗细

Text-align:文字的排版

Line-height:行高，行与行之间的高度

Text-shadow:文字阴影

容器盒子

Box-size:设置盒子模型

Width:宽度

Height:高度

Padding:内边距

Margin:外边距

Border:边框

Box-shadow:盒子阴影

Display:设置盒子是块级元素还是行级元素还是弹性元素

Background:设置元素的背景，背景图片，背景颜色

3 盒子常见属性

容器盒子

Box-size:设置盒子模型，CSS3标准，

content-box:正常默认模式，起源于谷歌，元素的整体大小会被内边距和边框撑开（内容的宽度）

border-box：怪异模式，起源于IE，元素的整体大小不会被内边距和边框撑开(是整个元素大小的宽度)

Width:宽度

Height:高度

注意：width,height会根据box-size盒子模型的不同来决定是内容的宽度和高度，还是整个元素大小的宽度和高度。

Padding:内边距

Padding-left,padding-right,padding-top,padding-bottom

Padding:上右下左;

Padding:上左右下；左边距等于右边距

Padding:上下左右；下跟上边一样，左跟右一样

Margin:外边距

外边距跟内边距一致。但是两个元素的外边距会重叠。

Border:边框

语法：border: 边框宽度边框样式颜色;

可以分开设置，例如

border- 30px;

border-style: dashed;

border-color: purple;

分别设置上下左右边框，例如

border-bottom:50px dotted green;

Box-shadow:盒子阴影

box-shadow: 阴影的水平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜色;

Display:设置盒子是块级元素还是行级元素还是弹性元素

Block:块级元素，会占据一整行，有宽高，div,h1,p,li,ul...

Line-block:行块元素，不会占据一整行，有宽高,img...

Line:行元素，不会占据一整行，也没有宽高,a,span...

Border-radius:边框的圆角

Background:设置元素的背景，背景图片，背景颜色

Background:是一个综合性的属性，可以分出背景颜色，背景图片，背景是否重复，背景图片的位置，背景图片的大小

Background-position:设置背景图片的位置，left,right,top,bottom,center,百分比一般可以设置2值，第一个值是设置水平位置，第二个值设置垂直位置

Background-size:设置背景图片的大小，注意：有时候不知道图片的确切比例的时候，只需要设置一个宽度或者高度，另外一个值设置为auto即可。　　　　

4 选择符

一选择符的类型

标签选择符 div{}

class选择符 .d1{属性：属性值;} <div class="d1">

id选择符 #d2{属性：属性值} <div id="d2">

群组选择符 .d1,#d2{属性:属性值} <div class="d1"> | <div id="d2">

通配选择符 *{属性:属性值}

包含选择符 .d1 p{属性:属性值} （包含在d1中的p标签才会显示这些属性）

伪类选择符 a:link{color:red}/*未访问的链接*/ a:visited{color:black}/*已访问的链接*/

a:hover{color:orange;font-size:20px}/*鼠标移动到链接上*/ a:active{color:gold;font-size:50px}/*选定的链接*/

二、选择符优先级

标签选择符的权重是01

类选择符的权重是010

ID选择符的权重是0100

行间样式的权重是1000

包含选择符权重可以相加

5 定位

定位Position

相对定位relative

语法：postion:relative;

特点：相对于自身进行位移，只是样子进行了移动，其实还是会牢牢占据原来的位置，不会影响到整个布局的变化

绝对定位absolute

语法：postion:absolute

特点：脱离正常的文档流，不会占据原来的位置。相对于设置了定位的父元素或者是祖先元素。

固定定位fixed

语法：position:fixed

特点：脱离正常的文档流，不会占据原来的位置。相对于浏览器进行定位

层：z-index

语法：Z-index：数字；

解析：z-index可以设置统一级别下，使用了定位的层级关系。z-index值越大，层越在上面。默认情况下，所有元素的z-index值为0。没有使用定位的元素，不可用。

6 浮动

浮动元素会寻找父元素的边缘或者是同样浮动元素的边缘，紧紧的靠拢在一起。

优点

1、可以让文字包围图片。

2、可以去掉莫名其妙的间距

3、可以让内容向左和向右排布

大问题

父元素高度塌陷

原因：使用了浮动的元素，会脱离正常的文档流，使其父元素找不到子元素，从而认为自己内部没有元素，所以没有高度。

解决方案：

1、给父元素设置高度

2、万能的解决方案

1 .clear:after{
2 
3     content: "";
4 
5     display: block;
6 
7     clear: both;
8 
9 }

解决方案：清除浮动

1、在父元素的最后面加上一个div

2、设置这个div的样式为:clear:both;

缺点：多了1个div,结构比较混乱

* */

完美升级方案：

1、使用伪元素创建一个假的元素，：after在元素的最后面创建一个假的子元素

2、设置这个假的元素为块级元素

3、清除左右浮动clear:both

* */

弹性布局--->当下最佳布局方式。