前端 css浮动笔记

一、Chrome调试工具

二、PxCook的基本使用

1. PxCook的基本使用

1. 通过软件打开设计图

① 打开软件 ② 拖拽入设计图 ③ 新建项目

2. 常用快捷键

1. 放大设计图：ctrl + +

2. 缩小设计图：ctrl + -

3. 移动设计图：空格按住不放，鼠标拖动

3. 常用工具

1. 量尺寸

2. 吸颜色

4. 从psd文件中直接获取数据

1. 切换到开发界面，直接点击获取数据

三、盒子模型

掌握盒子模型 边框、内边距、外边距 的设置方法

盒子模型一共有几个部分组成？分别是什么？

1. 内容区域：content

2. 边框区域：border

属性值：单个取值的连写，取值之间以空格隔开

如：border : 10px solid red;

Ø 快捷键：bd + tab

边框单方向设置

属性名：border-方位名词

3. 内边距区域：padding（边框与内容之间的距离）

场景：只给盒子的某个方向单独设置内边距。  属性名：padding-方位名词  属性值：数字+px

Ø 给盒子设置四周 20px 的内边距可以通过什么属性设置？

padding : 20px ;（常用）

Ø 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？

padding : 20px 30px ;

Ø 给盒子设置左侧50px的内边距可以通过什么属性设置？

padding-left : 50px ;

记忆规则：从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的！！

4. 外边距区域：margin  作用：设置边框以外，盒子与盒子之间的距离

盒子区域的大小通过宽度width和高度height来设置

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置。

 

css布局：浮动

一.结构伪类选择器：

二.浮动

浮动的代码 

属性名：float   

属性值：左浮动 left  右浮动 right 

浮动的作用

早期作用：左浮动 float：left

                  右浮动 float：right

 浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

• 相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 浮动元素会受到上面元素边界的影响

5. 浮动元素有特殊的显示效果

• 一行可以显示多个

• 可以设置宽高

Ø 注意点：

• 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

浮动元素的特点有哪些？

1. 浮动元素会脱标，在标准流中不占位置

2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 浮动元素会受到上面元素边界的影响

5. 浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

浮动书写网页导航步骤

1. 清除默认的margin和padding

2. 找到ul，去除小圆点

3. 找到li标签，设置浮动让li一行中显示

4. 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？

• 方法一：给a标签设置 display : inline-block

• 方法二：给a标签设置 display : block

• 方法三：给a设置 float : left

三.清除浮动

含义：清除浮动带来的影响

• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

Ø 原因：

• 子元素浮动后脱标 → 不占位置

Ø 目的：

• 需要父元素有高度，从而不影响其他网页元素的布局

清除浮动的方法：1 直接设置父元素高度  2 额外标签法：1. 在父元素内容的最后添加一个块级元素； 给添加的块级元素设clear:both