1、css的三大特性
css有三个重要的特性:层叠性、继承性、优先级
1、层叠性
- 样式冲突,就近原则,覆盖相同属性的值
- 属性不冲突的,不会层叠
2、继承性
- 子元素可以集成父元素的样式(text-,font-,line-这些元素开头的以及color可以集成)
3. 优先级
2、CSS盒子模式
页面布局三个核心,盒子模型、浮动、定位
2.1 边框
边框border 全写,没有顺序
border-collapse :边框重叠
2.2 padding 内边距
- 属性值
padding:5px :上下左右
padding:5px 10px 上下5,左右10
padding :5px 10px 6px:上 5,左右 10,下 6
padding :5 6 7 8 ;上 右 下 左
- 注意:如果盒子没有指定盒子的宽度的大小,padding不会撑开盒子的宽度
2.3 外边距:margin
- 属性值和padding一样
- 应用
- 外边距使块级盒子水平居中,
- 盒子必须指定宽度
- margin:左右设置为auto
- 行内元素居中(当做文本对待),设置父元素text-align:center;
- 外边距使块级盒子水平居中,
- 外边距塌陷问题
2.4 清除内外边距
* {
margin :0;
padding: 0;
}
注意
行内元素尽量设置左右内外边距
为父元素添加overflow:hidden 解决问题
3.圆角边框
4. 浮动
4.1 概念
将浮动的框移动到一边,知道左边缘或右边缘触及包含块或另一个浮动框的边缘
4.2浮动的特性
- 浮动元素脱离标准流
- 浮动的盒子不在保留原先的位置
- 如果多个盒子都设置了浮动,按照属性值一行内显示并且顶端对其排列
- 父元素装不下浮动的盒子,会被挤走
- 浮动的元素具有行内块属性
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素具有行内块元素的特性
- 浮动的元素经常和标准流父级搭配使用
5. 清除浮动
1.清除浮动:就是不受子元素浮动的影响
2. 清除浮动的四种方法
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,行内元素无效
-
父级添加overflow 属性 ,设置为hidden、auto 或scroll都行
-
伪元素法;:after。
-
双伪元素
6. PS切图
- 图层合并图层,右键导出
- 切片切图
- 有背景的
- 裁剪工具,切片切图
- 选中要切的图片
- 导出—》导出为web格式的—》选择选中的切片
- 没有背景的图片
- 如果导出没有背景的,则在图层中关掉图层
- 再导出为png格式的图片
- 有背景的
- 插件切图Cutterman
7. css书写顺序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5HzmS32-1585021180733)(C:\Users\CodePigChen\AppData\Roaming\Typora\typora-user-images\image-20200321213431214.png)]
8. CSS定位
1. 定位组成
- 将盒子定一个位置,定位=定位模式+便偏移
- 定位模式指定一个元素在文档中的定位方式,边偏移决定该元素的最终的位置
2.Relative相对定位
相对定位是元素在移动位置的时候,相对于原来的位置定位的
- 相对于自己的位置移动
- 原来在标准流的位置继续占有,不脱标。
3. Absolute绝对定位
- 如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位(Document 文档)
- 祖先元素有定位(相对、绝对、固定定位),以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位脱离标准流,不占有位置
- 通常来说子绝父相
子绝对定位:就可以在父亲内随便定位,不占有位置
父相对定位:占有位置;
4. Fixed 固定定位
5.定位叠放次序z-index
- 数值可以使整数、负数、、0默认auto,数值越大越靠上
- 属性值相同,书写顺序,后来居上
- 数字后面每单位
- 定位盒子才有属性z-index
6.绝对定位的盒子居中
- 水平居中:left :50% margin-left:-盒子自身宽度的一半
- 垂直居中:top:50% margin-top:-盒子自身宽度的一半
1.特点
- 以浏览器的可视窗口做定位标准
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有位置
2. 技巧
固定在版心右侧位置
-
固定定位的盒子 left:50% ,浏览器可视区的一半位置
-
固定的盒子 margin-left:版心宽度一半的距离。
3. 定位的拓展
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对定位或固定定位,可以直接设置宽度和高度
- 块级元素添加绝对定位或固定定位,不在占有一行,大小是内容大小
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. 页面布局整体思路
-
确定页面的版心大小
-
分析页面中的行模块,已经每个行模块中的列模块
-
一行中的列模块经常浮动布局,先确定每个列的大小,之后确定位置
-
制作HTML结构,先有结构,后有样式,结构最重要
5. 绝对定位和固定定位,元素脱离文档流---->相对定位不脱离文档流
都会增加设置盒子的大小
2. 去掉li的点:list-style:none
3. 元素浮动,兄弟元素 都浮动
4. 页面布局整体思路
-
确定页面的版心大小
-
分析页面中的行模块,已经每个行模块中的列模块
-
一行中的列模块经常浮动布局,先确定每个列的大小,之后确定位置
-
制作HTML结构,先有结构,后有样式,结构最重要