4.14课堂笔记

标签

lang=“en” 声明网页的语言 en 英语 ch 中文

</br>(强制换行)
<meta charset="UTF-8">  信息标签   
charset="UTF-8"  网页的编码格式
<title></title>  标题栏

网页的渲染 左右 上下
按照闭合：带结尾的 单闭合
按照换行：不换行 （行级标签） 换行（块级标签）

  1.标题标签    h标签   加粗   大-小  自带换行
   <h1>html</h1>
  2.格式化标签
  <b>html</b>
  3.斜体 行级
  <i>html</i>
  4.下划线
  <u>html</u>
  5.删除线
  <del>$200.00</del>
  6.上下标
  H<sub>2</sub>o

列表 （有序ol 无序ul）
文字标签
子父元素选择器
空格 匹配的是当前元素里面的所有的后代元素
(>)匹配的是当前元素的直接子集

css优先级的问题

1.行内
优先级最高

2.内嵌
公用样式

div class="block"  id="b2"

1. div
2. 星号

内嵌里面的优先顺序

1. #b2
2. body .div

body #b2（最高）

.block{
width:1000px  !important;
}（高于行内）

3.外部

默认的样式优先级，如果样式之间没有冲突，则叠加，如果样式冲突，考虑优先级，行内>内嵌>外部

盒子模型

html,body{
boder:1px solid silver;
width:100%;
height:100%;
}

box-sizing:boder-box;(在设置宽和高的条件下有效)转化为盒子模型
margin设置外间距
padding设置外间距（上 右 下 左）
只给一个值上下左右均相同
盒子模型中 上下放置的元素之间的外间距不累计加 取最大值
**盒子模型中 左右放置的元素之间的外间距累计加 **

元素的水平浮动

**left right
块级元素 元素在浮动之后 会脱离文档流（即不占位置）
要想水平浮动 浮动的子元素的总宽 小于父元素的宽
子元素在浮动之后会导致父元素不能撑开

解决父元素不能撑开有两种方法：

 1. overflow: hidden;（超出部分隐藏）
 2. div style="clear: both"  (清除左右浮动）

菜单

ul.menu>li.menu_li
按下快捷键tab

撤掉一般的默认样式

*{
		margin o;
		paddding o;
}
list-style:none;(去点)
text-align:center;(文本在水平方向的居中)
line-height:40px;(行高会让里面的字在垂直方向上居中)要和高度一致
font-size:12;(字体的最小像素)
display:none;(隐藏子集)
.menu_li:hover{
display:block;(悬停时显示子集)
}

css里面的伪类

<a href="#">百度</a>

---

1.访问过的伪类

 a:visited{
        color:yellow;
        }

2. 鼠标悬停伪类

a:hover{
color:red;
}

3.鼠标激活伪类

 a:active{
    color:green;
    }

4.访问之前的伪类

  a:link{
   	 color:gray;
    }

css里面的定位及元素的转化

css定位

1. 相对定位
占位置 相对于自己的位置在移动和分层

position：relative;

2. 绝对定位
不占位置 靠浏览器移动和分层

position:absolute;

3. 固定定位
不占位置 固定在某一个位置

position:fixed;

元素在定位定位之后可以使用5个属性 right left top bottom z-index(分层)

相对定位和固定定位搭配使用

margin:0 auto;
margin:auto;(水平居中)

给绝对定位的父容器写一个相对定位
固定定位只能靠浏览器 绝对定位可以靠浏览器和父元素

元素的转化

display:inline-block;(转化为行级块)

去除两个块之间的缝隙，给行级块的父级元素写

font-size:0;字体大小为0

然后给子容器设置字体大小

span是行级元素 不能设置行和高 转换

display：block;
text-decoration:none;(去掉a链接里面的下划线)