Html+css+js知识整理（2）

Html+css+js知识整理（2）

 

01、浮动：第一个值：上下外边距 第二个值：左右外边距

块级元素居中：左右外边距auto

浮动实现的效果：水平对齐。脱离标准流，变成行内块(可以在一行排列，给宽高有效) 。左浮动或者右浮动

02、微信头部：一定要设置宽度，才能水平居中

.con{

width: 950px;

height: 75px;

margin: 0px auto;}

03、浮动之后的问题：标签如果不设置高度，高度由内容决定

子级标签浮动，父级标签检测不到子级的高度。浮动塌陷

解决办法:

第一种：给父级加高度

第二种：给父级加 overflow:hidden;

04、选择器分类：同样的样式，谁后写谁生效h1{

color: lime;

color: blue;

如果选择器权重一样，谁后写谁生效

选择器权重可以叠加

交集选择器：div.first  既要是div类名又要为first

后代选择器：div  p 用空格隔开

并集选择器：用逗号隔开 h1,h2,h3

子代选择器:div>p 用>隔开  div里面的子级元素

05、选择器及选择器的权重：类名：可以重复 id名：相当于身份证号码。不能重复。是唯一的

选择器分类： *：通配符   标签名选择：直接通过标签名字选择

类名选择器：.类名

id选择器:#id名

选择器权重：

*：1mg

标签名：1g

类名：1kg

id名：1吨

!important>内联样式权重>id名选择器。

!important提升的是一个样式的权重，而不是一个选择器的权重。

p{

color: red !important;

font-size: 40px; }

#one{

color: tomato;

}

05、css三种书写方式：

css的三种书写方式

外链(联)式：<link rel="stylesheet" href="style.css">

嵌入式：

<style></style>

以上两种写法权重一样，谁后写谁生效。

内联式：<p style="color:pink;">文字</p>

06、固定定位：定位：脱离标准流，变成行内块.不占位。参照物当前窗口(有了四个坐标，left top  bottom right)，不会随着窗口的滚动而滚动。

居中的办法：top:50%; margin-top:-盒子的高度的一半;

left:50%;margin-left: -盒子宽度的一半;

left: 50%;

margin-left: -50px;

top: 50%;

margin-top: -50px;

07、相对定位：相对定位：相对自身做微调。top left right bottom 占位。占的原来本身的位置。

半脱离标准流：

一方面：有了四个坐标

一方面：行内元素和块级元素的性质没有改变。

08、绝对定位：脱离标准流，变成行内块。不占位。子级绝对定位，父级相对定位(父级只要有一种定位方式即可，相对定位对别的标签影响最小)

如果父级没有定位方式，会一直向上寻找，直到找到定位方式的为止。

让子级标签固定在父级的某个位置。

09、相对定位：text-align: center;文本类元素居中center  靠右right  靠左left

img{

display: block;

给图片加该样式，可以解决图片和盒子边框的留白。 }

10、图层顺序：nth-of-type(index)选择同级元素的第几个。索引值从1开始

同一个父级标签，才属于同级

只有定位了的标签有图层顺序，后写的在上面。可以通过z-index调整图层顺序。默认值是0。不带单位，值越大越靠上

11、css样式：p{

margin-top: 20px;

font-size: 20px;

line-height: 30px;

/* 文字一行的高度 */

font-size: 12px;

text-indent:2em;

/* 首行缩进 */

/* em相对单位：相对当前文字的大小。 */

height: 60px;

border: 1px solid #000;

overflow: hidden;

/* 超出隐藏 */

}

h1{

width: 100px;

height: 100px;

border: 1px solid #000;

font-size: 20px;

text-align: center;

/* 文字水平居中 */

line-height: 100px;

/* 文字垂直居中：给行高等于当前容器的高度 */

/* background: rgba(5, 216, 0, 0.3); */

/* 背景透明 */

opacity: 0.3;

/* 内容和背景都透明。0-1  0全透明  1不透明 */

}

img{

width: 200px;

/* 图片一般只设置一个宽度或者高度。另外一个值由计算机自己计算。会按照自己的比例进行计算 */

}