CSS的基本使用4- 浮动和盒子模型

男娘i 2022-04-23 22:38 215阅读 0赞

### float 浮动 ###

#### float 中的四个参数 ####

*  float：left 左浮动
 *  float：right 右浮动
 *  float：none 不浮动
 *  float：inherit 继承浮动

#### float 的原因以及副作用 ####

*  使元素脱离了标准流
 *  浮动的元素不占用原空间
 *  父元素坍塌以及其他元素异味

#### css 中定位机制 ####

*  标准流
 *  定位
 *  浮动

### position 定位 ###

#### position中的可选参数 ####

*  styatic
 *  relative
 *  absoulute
 *  fixed
 *  inherit

##### relative 参数特性 #####

*  不脱离文档流
 *  可以利用top right bottom left 定位
 *  为子定位划分作用域
 *  移动区域为整个网页

##### absolute 参数特性 #####

*  脱离文本流
 *  可以利用 top right bottom left 进行定位
 *  为子定位划分作用域
 *  移动区域为整个网页

##### fixed 参数特性 #####

*  脱离文档流
 *  可以利用 top right bottom left 进行定位
 *  为子定位划分作用域
 *  移动区域为整个窗口区

#### 定位中的层级 ####

*  通过顺序插入，越后面添加的层级越大
 *  z-index 改变层级
 *  不同父元素的子元素的层级关系各不相关

#### z-index的属性值 ####

*  z-index：auto(默认值)
 *  z-index ：inherit(继承)
 *  z-index：number(number 指具体值)

##### z-index 特性 #####

*  可以设置元素的叠加顺序，但依赖定位属性
 *  z-index 大的元素会覆盖 z-index 小的值
 *  z-index 为auto 的元素不参与层级比较
 *  z-index 为负数时 元素会被普通流元素覆盖

##### 定位与边距的异同 #####

*  margin padding 通过控制边距改变距离
 *  position 通过定位改变距离

### 盒子模型 ###

#### 网页中的盒子模型 ####

![网页中的盒子模型][AfCvUf.png]

#### 盒子模型的概念 ####

*  盒子用来放网页中的各种元素
 *  网页设计中内容，如文字图片等元素都是盒子(div 嵌套)

#### HTML 可设置高和宽属性 ####

*  块级元素
    
    > `<p> <div> <h1>~<h6> <ul><li><ol><dl><dt><dd>`
 *  替换元素
    
    > `<img> <input> <textarea>`

#### HTML 标签分类 ####

*  块级标签：占据一行，换行
    
    > `<div> <ul> <ol><li><dl><dt> <dd><h1>~<h6><form><hr>`
 *  行内元素
    
     *  非替换元素 `<b> <em> <a> <span>`
     *  替换元素 `<img> <input> <textarea>`

### 边框属性 ###

*  设置边框宽度(border-width)
 *  边框颜色(boder-color)
 *  边框样式(border-style)
 *  4个方向(上右下左)

##### 设置元素边框宽度 #####

*  `border-width:thin|medium|thick`

##### 设置边框颜色 #####

`border-color` ：颜色|transparent

##### 设置边框元素样式 #####

`border-style：值|none|hidden`

##### 不同方向表示 #####

#### 内边距 padding ####

*  设置元素的内容与边框之间的距离分4个方向(上右下左)
 *  padding-top ：长度值|百分比
 *  padding-right ：长度值|百分比
 *  padding-bottom ：长度值|百分比
 *  padding-left ：长度值|百分比

值不能为负

#### 外边距 margin ####

设置元素与元素之间的距离分4个方向（上右下左）

*  margin：值一 四个方向值都是值1
 *  margin：值一 值二 上下方向值都值1 左右为值二
 *  margin：值一值二 值三 上=值一 左右=值二 下=值三
 *  margin：值一值一值二 值三值四 上右下左

### 盒子模型的计算方式 ###

![盒子模型计算][AfiSdx.png]

### Display ###

*  inline 元素显示为内联元素 元素前后没有换行符
 *  block 元素将显示为块级元素 元素前后会有带换行符
 *  lnline -block 行内元素 元素显现为inline 但是具有block 特性
 *  none 元素不会显示

[AfCvUf.png]: /images/20220222/261b74980142479eab3e0bd30a961ed8.png
[AfiSdx.png]: /images/20220222/ef01f1f6cec14ef8a3c37bd19db2a6d5.png

CSS的基本使用4- 浮动和盒子模型

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS样式中选择器+盒子模型+定位+浮动

相关【前端】深入理解CSS盒子模型与浮动

相关 CSS盒子模型(css盒子模型的理解)

相关 4.1 CSS盒子模型

相关盒子模型和css属性

相关 CSS复习之盒子的浮动和定位

相关 CSS之——盒子模型、盒子的定位与浮动

相关【CSS】【9】CSS盒子的浮动

相关 CSS的基本使用4- 浮动和盒子模型

相关 CSS核心内容：标准流、盒子模型、浮动、定位