HTML &&CSSmd-02

1、css的三大特性

css有三个重要的特性：层叠性、继承性、优先级

1、层叠性

• 样式冲突，就近原则，覆盖相同属性的值
• 属性不冲突的，不会层叠

2、继承性

• 子元素可以集成父元素的样式（text-,font-,line-这些元素开头的以及color可以集成）

3. 优先级

2、CSS盒子模式

页面布局三个核心，盒子模型、浮动、定位

2.1 边框

边框border 全写，没有顺序

border-collapse ：边框重叠

2.2 padding 内边距

1. 属性值

padding：5px ：上下左右

padding：5px 10px 上下5，左右10

padding :5px 10px 6px:上 5，左右 10，下 6

padding ：5 6 7 8 ；上 右 下 左

2. 注意：如果盒子没有指定盒子的宽度的大小，padding不会撑开盒子的宽度

2.3 外边距：margin

1. 属性值和padding一样
2. 应用
   • 外边距使块级盒子水平居中，
     • 盒子必须指定宽度
     • margin：左右设置为auto
   • 行内元素居中（当做文本对待），设置父元素text-align:center;
3. 外边距塌陷问题

2.4 清除内外边距

* {
margin :0;
padding: 0;
}

注意

行内元素尽量设置左右内外边距

为父元素添加overflow：hidden 解决问题

3.圆角边框

4. 浮动

4.1 概念

将浮动的框移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘

4.2浮动的特性

1. 浮动元素脱离标准流
   1. 浮动的盒子不在保留原先的位置
   2. 如果多个盒子都设置了浮动，按照属性值一行内显示并且顶端对其排列
   3. 父元素装不下浮动的盒子，会被挤走
   4. 浮动的元素具有行内块属性
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素具有行内块元素的特性
4. 浮动的元素经常和标准流父级搭配使用

5. 清除浮动

1.清除浮动：就是不受子元素浮动的影响

2. 清除浮动的四种方法

1. 额外标签法

1. 额外标签法会在浮动元素末尾添加一个空的标签。

   <div class="box">
   			<div class="c">1</div>
   			<div class="c">2</div>
   			<div class="c">3</div>
   			<div class="clear"></div>
   		</div>
   

   父元素没有指定高度，在浮动元素的末尾添加一个空标签，引用clear:both; 样式

   新添加的空标签必须是块级元素或者br，行内元素无效

2. 父级添加overflow 属性 ，设置为hidden、auto 或scroll都行

3. 伪元素法；：after。

4. 双伪元素

6. PS切图

1. 图层合并图层，右键导出
2. 切片切图
   • 有背景的
     • 裁剪工具，切片切图
     • 选中要切的图片
     • 导出—》导出为web格式的—》选择选中的切片
   • 没有背景的图片
     • 如果导出没有背景的，则在图层中关掉图层
     • 再导出为png格式的图片
3. 插件切图Cutterman

7. css书写顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5HzmS32-1585021180733)(C:\Users\CodePigChen\AppData\Roaming\Typora\typora-user-images\image-20200321213431214.png)]

8. CSS定位

1. 定位组成

1. 将盒子定一个位置，定位=定位模式+便偏移
2. 定位模式指定一个元素在文档中的定位方式，边偏移决定该元素的最终的位置

2.Relative相对定位

相对定位是元素在移动位置的时候，相对于原来的位置定位的

1. 相对于自己的位置移动
2. 原来在标准流的位置继续占有，不脱标。

3. Absolute绝对定位

1. 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位（Document 文档）
2. 祖先元素有定位（相对、绝对、固定定位），以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位脱离标准流，不占有位置
4. 通常来说子绝父相
   子绝对定位：就可以在父亲内随便定位，不占有位置
   父相对定位：占有位置；

4. Fixed 固定定位

5.定位叠放次序z-index

1. 数值可以使整数、负数、、0默认auto，数值越大越靠上
2. 属性值相同，书写顺序，后来居上
3. 数字后面每单位
4. 定位盒子才有属性z-index

6.绝对定位的盒子居中

1. 水平居中：left ：50% margin-left:-盒子自身宽度的一半
2. 垂直居中：top:50% margin-top:-盒子自身宽度的一半

1.特点

1. 以浏览器的可视窗口做定位标准
2. 跟父元素没有任何关系
3. 不随滚动条滚动
4. 固定定位不占有位置

2. 技巧

固定在版心右侧位置

1. 固定定位的盒子 left：50% ，浏览器可视区的一半位置

2. 固定的盒子 margin-left:版心宽度一半的距离。

3. 定位的拓展

绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
2. 块级元素添加绝对定位或固定定位，不在占有一行，大小是内容大小

4.绝对定位或固定定位会完全压住盒子

浮动元素，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字

浮动最初是为做文字环绕的

9. 元素的显示与隐藏

1. display 属性

• display: none 隐藏对象
• display:block;显示对象

隐藏元素，不占有位置

2. visibility 属性

• visibility : hidden隐藏对象
• visibility :visible;显示对象

隐藏元素，占有位置

3. overflow 溢出 内容

• overflow：hidden;溢出部分隐藏
• overflow：scroll;添加滚动条
• overflow：auto；溢出的添加滚动条，不溢出就不添加滚动条

# 总结:

1.边框、内边距都会增加设置盒子的大小

2. 去掉li的点：list-style:none

3. 元素浮动，兄弟元素 都浮动

4. 页面布局整体思路

1. 确定页面的版心大小

2. 分析页面中的行模块，已经每个行模块中的列模块

3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定位置

4. 制作HTML结构，先有结构，后有样式，结构最重要

5. 绝对定位和固定定位，元素脱离文档流---->相对定位不脱离文档流

都会增加设置盒子的大小

2. 去掉li的点：list-style:none

3. 元素浮动，兄弟元素 都浮动

4. 页面布局整体思路

1. 确定页面的版心大小

2. 分析页面中的行模块，已经每个行模块中的列模块

3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定位置

4. 制作HTML结构，先有结构，后有样式，结构最重要

5. 绝对定位和固定定位，元素脱离文档流---->相对定位不脱离文档流