html知识点总结3

VScode注释代码：

单行注释：光标放在一行的任意位置ctrl+/

多行注释：选中想要注释的代码 ctrl+/  或者Shift +Alt +A

让单行文字垂直居中显示：让文字的行高等于盒子的高度，就可以让文字在盒子内垂直居中

如果行高小于盒子的高度，文字会偏上，如果行高大于盒子的高度，则文字偏下

1.

Css背景

背景颜色：background-color：transparent透明/color

背景图片background-image：none | url  常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置

background-image:url(images/logo.png);

背景平铺：background-repeat::repeat | no-repeat | repeat-x | repeat-y

repeat:背景图像在纵向和横向上平铺，默认情况下是平铺的

no-repeat：背景图像不平铺

repeat-x:背景图像在横向上平铺

背景图片的位置：background-position: x y;  属性可以改变图片在背景中的位置

X坐标和y坐标 可以是方位名词或者精确单位

如果是方位名词：top | center | bottom | left | center | right

注意：right center 和center right是等价的，第一个可能是Y轴第二个x轴，如果只指定一个方位名词，另一个省略，则第二个默认居中

background-position:right;//水平靠右对齐，第二个参数省略Y轴是垂直居中

background-position:top; //第一个参数一定是Y轴 顶部对齐 第二个参数省略x轴是水平居中

如果是精确单位：那么第一个参数肯定是x坐标，第二个一定是y坐标

background-position:20px 50px；第一个参数是x轴水平20px，第二个参数y轴是垂直50px

背景图像固定;:

background-attachment:scroll | fixed

scroll:背景图像是随着对象内容滚动

fixed：背景图像固定

背景的复合属性：属性没有固定的，一般顺序如下：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置

background:black url(images/bg.jpg) no-repeat fixed center top;使代码变得更简单了

背景颜色的半透明：

Background:rgba(0,0,0,0.3)  最后一个参数alpha透明度，取值0-1

2.

CSS三大特性：层叠性、继承性、优先级

层叠性（覆盖）：为相同的选择器设置相同的样式 遵循就近原则，离那个样式近就执行那个样式，样式不冲突，不会层叠

Div{

  Color：red;

  Font-size：18px；

}

Div{

  Color：green；

}

继承性：只为父类设置属性，则子类会继承父类div的某些样式，如：文本颜色、字号  恰当使用使用继承性可以简化代码，降低css样式复杂性

子元素可以继承父元素的样式{text- font- line-这些元素开头的可以继承，以及color属性}

<div>

  <p>..</p>

</div>

优先级：

当同一个元素指定多个选择器，就会有优先级的产生

如果选择器相同，则执行层叠行

选择器不同，则根据选择器权重执行

!important重要的（无穷大）>行内样式style=“”（权重1000）>ID选择器（权重0100）>类选择器，伪类选择器（权重0010）>元素选择器（权重0001）>继承或 *通配符选择器（权重0000）

注意：继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

a连接浏览器默认指定了一个样式 蓝色的 有下划线

div{

   color：pink；

}

.test{

  color：red；

}

#demo{

  color:green;

}

<div class=”test” test id=”demo”>…</div>

复合选择器会有叠加的问题：

ul li {   //权重0002

  color：green；

}

li {   //权重0001

   color：red；

}

.nav li {  //权重0011

 color：pink；

}

<ul class=“nav”>

  <li>nihao</li>

</ul>

最后显示粉红色

3.

网页布局三大核心:盒子模型、浮动和定位

网页布局过程：

1. 先准备好相关元素，网页元素基本都是盒子Box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形盒子，也就是一个装内容的容器

它包括：边框border、外边距margin、内间距padding、和实际内容content

border边框

语法：border：border-width | border-style | border-color

属性：

border-width：边框粗细单位px

border-style：边框样式：none无边框 solid实线 dashed虚线边框 dotted点线边框

border-color：边框颜色

边框的复合写法：

border;1px solid red;  没有顺序

边框可以分开来写：border有4条边，想写那一条边就写  上边框border-top 下边框border-bottom 左边框border-left 右边框border-right

如设置上边框语法：border-top：1px solid red；

合并相邻的边框border-collapse：collapse

边框会影响盒子大小，当盒子本身设置宽度高度，在设置边框后，盒子宽度高度会变大

内边距：padding  设置边框与内容之间的距离

padding-left :作内边就

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

复合属性;

padding:5px; 一个值代表上下左右都由5像素内边距

padding：5px 10px； 2个值代表上下内边距是5像素，左右内边距是10px

padding：5px 10px 20px； 3个值代表上内边距5px 左右内边距10px 下内边距20px

padding：5px 10px 20px 30px  4个值代表上是5px 右10px 下20px 作30px

内边距也会影响盒子大小，当盒子本身设置宽度高度，在设置内边距后，盒子宽度高度会变大

保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小

当设置盒子的文字不一般多时，如果设定width 和height大小是不合理的，此时合理的利用padding不给盒子设置宽度高度，通过padding给盒子相等的内边距来撑开盒子

例子：新浪导航栏

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子

盒子外边距margin

用于控制盒子与盒子之间的距离

属性：

margin-left：左外边距

margin-right：右 外边距

margin-top：上外边距

margin-bottom：下外边距

margin简写和padding完全一致

margin:5px; 一个值代表上下左右都由5像素内边距

margin：5px 10px； 2个值代表上下内边距是5像素，左右内边距是10px

margin：5px 10px 20px； 3个值代表上内边距5px 左右内边距10px 下内边距20px

margin：5px 10px 20px 30px  4个值代表上是5px 右10px 下20px 作30px

外边距可以让块级元素水平居中，但是必须满足两个条件：

1盒子必须指定宽度2.盒子左右的外边距都设置为auto

  Margin：0 auto；或者margin：auto 或margin-left：auto；margin-right：auto

让行内元素和行内块元素水平居中给其父元素添加 text-align：center；即可

使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并，解决尽量给一个盒子设置margin

嵌套块元素垂直外边距的塌陷问题;

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距

解决方案：

1. 可以为父元素定义上边框

  为父元素设置边框 border：1px solid transparent

1. 可以为父元素定义内边距

padding：1px；

1. 可以为父元素添加overflow：hidden； 不会改变盒子大小

清除内外边距：

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的外边距

语法：

*{

   padding:0;

margin:0;

}

行内元素尽量只设置左右内边距，不要设置上下内边距。但是转换为块级元素行内块元素就可以设置了