html5基础

1-css的选择器的使用

在head内建立style，在style内进行操作

选择器属性一样时，可以用逗号隔开并公用一个属性

————选择器：表示选择对象进行css修饰 html4+css2

常见选择器

标签、元素、标记选择器、id选择器、class（类）选择器、群组选择器、通配符、伪类选择器

1.表圈选择器：html标签都可以作为选择器出现使用

使用方法——div{} p{}

2.id选择器

需要在标签的内部添加一个 id 属性 并且设置 id 属性

通常表示一个区域的外围结构——- 在css样式表中 使用 #id属性值{}

作用:通常表示一个区域的外围结构(唯一性的)

3.class选择器 （类选择器）

需要在标签内添加一个class属性，并且设置class属性值 可设置多个

4.包含选择器

- 使用: 父级选择器 子级选择器{}

5.群组选择器：选中相同的属性

- 选择器1,选择器2,....{}

6.通配符:浏览器中是有默认间距的

选中当前页面中的所有标签/选择器

固定用法 *{margin:0;padding:0} 浏览器内外边距为0

2.动态伪类选择器

a:link {color: red;} /* 未访问的链接状态 */

a:visited {color: green;} /* 已访问的链接状态 */

a:hover {color: blue;} /* 鼠标滑过链接状态 */—重点—

a:active {color: yellow;} /* 鼠标按下去时的状态 */

针对—a—标签

3.hover的使用

hover表示当鼠标移入元素时对元素状态的改变

改变自己的状态——选择器名称：hover{声明}即可

还可以通过父级改变子集的元素 如下

总结关于选择器的权重（优先级问题）

权重:选择器加载的顺序优先级 0 0 0 0

- 行内样式表 1000

- 标签选择器 0001

- id选择器 0100

- class选择器 0010

- 包含选择器 相加

- 群组选择器 各自计算

- 通配符 0000

- 伪类选择器 0010

- 新增的权重表达方式 属性:属性值 !important

4.浮动属性

相对抽象——浮动属性的使用：控制在水平方向向上移动

属性：float 使。。。浮动/漂浮

属性值：left、right、none

向左向右浮动

当属性同时向一个方向浮动时，会依次向右排列 直到父系边框无法容纳下一个元素

然后才会依次向左向下浮动 - 元素设置了浮动属性,当前元素会漂浮起来脱离文档流(正常的网页布局) 初始位置不存在

- 浮动会让元素漂浮 但是碰到当前的包含框(父级边框区域)就会停止浮动

- 浮动元素碰到前面一个含有浮动属性的元素也会停止浮动

5.浮动实现页面导航

使用无序列表

使用通配符将页面内外间隙进行归零

清楚列表的实心圆

对导航页面进行修饰

6.文本图片环绕效果

浮动会脱离文档流。盒子元素会被覆盖——但是文本时实体 不会被浮动元素覆盖

7.盒概念模型

盒模型——就是元素与元素之间的关系——实质就是在页面中设置一个样式盒子

- content 内容 设置的盒子宽高 物品对应的就是content

- padding 补白、填充、内边距 缓冲物品(泡沫) => padding

- border 边框、边界 快递箱 => border

- margin 外边距 多个快递之间的距离 => margin

8.内边距与外边距的使用

内边距——设置值会向外移动=》但是会撑大容器的大小——所以需要减去相应的padding值

直接在css相对应各式内书写便可

的方向值问题：前端的方向都是沿着顺时针去转的

设置一个值:表示上下左右

设置两个值:表示上下 左右

设置三个值:表示上 左右 下

设置四个值:表示上右下左

外边距——外边距设置值会增加元素与周围的距离，与内边距不同，不会撑大当前容器的大小

方向属性内外边距都一样margin/padding-top/right/bottom/left

与内边距不同 外边距可使用负值，

总结—{margin:0;padding:0} 元素的内外边距清空

版心{margin:0 auto} 版心居中

9.margin的bug

margin常见的bug

- 当父级元素只有一个子级元素的时候 设置子级元素距离父级元素的上边距 margin-top 会错误解析到父级元素

- margin换padding

- 给父级设置边框

- 给父级设置浮动

- 给父级设置文本溢出属性

- 当两个同级元素默认从上大小排列的时候 给两个元素分别设置margin-bottom/top 会错误的取之间最大值

- 设置一个方向上的值即可