-
浮动布局
2020-09-15 15:32:58含义:浮动布局,使用后会使元素向左或者向右移动 取值: left 左浮动 right 右浮动 none 【默认】不浮动 特点: 1、使用浮动的元素会脱离文档流【置物架】 2、使用浮动的元素的宽、高度默认由内容决定,可设置宽、...-
float
含义:浮动布局,使用后会使元素向左或者向右移动
取值:
left 左浮动
right 右浮动
none 【默认】不浮动
特点:
1、使用浮动的元素会脱离文档流【置物架】
2、使用浮动的元素的宽、高度默认由内容决定,可设置宽、高
3、原先所在位置就会被其他块元素填充
4、浮动元素在一行中依次排列,当一行无法容纳的时候会自动换行
案例:
1、全部浮动
2、左边浮动,右边不浮动
3、左右浮动,中间不浮动
中间的元素要写在最后面清除浮动的方式 1、浮动元素的父级元素: overflow:hidden; 2、浮动元素的父级元素: ::after{clear:both;content:'';display:block;} 3、浮动元素的同级:添加一个空标签,并且设置clear:both; 1) 七列布局 2) nav的伪元素竖线 拓展 如何让元素使用margin:0 auto,水平居中 只对块级元素生效,所以margin:0 auto的用法分为三种,分别为 块级元素:div、h1~h3、ul /*对于块级元素,只需要设置width*/ div{ width: 200px; background-color: #ccc; margin:0 auto; } 行内元素:span、a /*对于行内元素,需要先设置为块级元素,再加宽度*/ span{ display: block; width: 100px; background-color: red; margin:0 auto; } 行内块元素:button、img、input、textarea /*对于行内块级元素,需要设置为块级元素,可以不用设置宽度*/ input{ display: block; margin:0 auto; }
-
-
浮动 布局
2018-03-18 21:31:34一些标签会自带浮动布局, 此时要想清除掉这些浮动 需要使用float none 常用标签 标题标签是 h1-h6 双标签 块级标签 h1是最大的标题标签 最好只出现一次 用于网页的logo部分 h2常用于二级标题, 也就是子模块的...float left |right | none 向左浮动 向右浮动 清除浮动 一些标签会自带浮动布局, 此时要想清除掉这些浮动 需要使用float none 常用标签 标题标签是 h1-h6 双标签 块级标签 h1是最大的标题标签 最好只出现一次 用于网页的logo部分 h2常用于二级标题, 也就是子模块的标题部分. h4 -h6 不常用的 dislipay:block (显示为块级)|inline(显示为行级)|none(不显示) none : 元素不会被显示 black: 此元素会被显示为行级元素,元素前后自带换行符 inline:此元素会被显示为行级元素,元素前后不会带换行符 inline-block :行内快元素 设置了inline-block 属性的元素既拥有了block元素可以设置width和font-weight:bold(设置为粗体) |normal(设置为正常字体) 列表标签 列表标签分为: 有序列表(ol ki): 组合标签 双标签 块级 ol li 必须精密相连成对 出现 不能分开 无序列表(ul li): 组合标签 双标 块级 ul li 成对出现 自定义列表: 如 字典列表 双标签 块级 dl td dd
-
配色与网页设计 项目9:CSS浮动布局 项目九:CSS浮动布局x_网页设计布局分析
2020-10-08 17:39:04掌握浮动布局的基本原理和float 属性的用法掌握浮动元素的盒子模型计算 掌握clear属性的含义和用法 掌握浮动元素的display属性;任务说明;任务步骤;构建HTML结构;设置CSS样式; 此处将右边盒子的宽度设为652px这个宽度... -
页面布局——浮动布局
2020-11-02 22:43:15页面布局——浮动布局 浮动布局是页面的一种重要布局方式 它使用float属性为元素开启浮动,float属性的可选值有left、right、none none 是默认值,即不开启浮动 left向 左浮动,靠父元素的左边浮动 right向 右浮动...**
页面布局——浮动布局
浮动布局是页面的一种重要布局方式
它使用float属性为元素开启浮动,float属性的可选值有left、right、none
none 是默认值,即不开启浮动
left 向左浮动,靠父元素的左边浮动
right 向右浮动,靠父元素右边浮动元素浮动前位于文档流中的特点
块级元素(block):在文档流中独占一行,宽度默认是父级的宽度,高度默认由内容撑开,可为其自定义设置宽高;
行内元素(inline):在文档流中不独占一行,宽和高都默认由内容撑开,且不可为其自定义设置宽高;
行内块元素(inline-block):在文档流中不独占一行,宽和高都默认由内容撑开,可为其自定义设置宽高;
元素浮动后的特点
- 浮动元素完全脱离文档流,不再占据文档流中的位置
块级元素(block)、行内元素(inline)、行内块元素(inline-block)脱离文档流的特点:
不再独占一行,宽高默认由内容撑开,但可以为其自定义设置宽高,即均呈现行内块元素(inline-block)的特点下图做了一个小小的测试——元素脱离文档流后均呈现行内块元素的特点
2. 浮动元素默认不会从父元素中溢出
3. 浮动元素的层级会提升,从而遮挡住未开启浮动的元素
4. 浮动元素会遮挡未开启浮动的元素,但不会盖住未开启浮动的文字,文字会自动环绕在浮动元素周围
5. 浮动元素不会超过它前一个浮动的兄弟元素,最多就是和它一样高总结: 浮动首先要搞清楚元素浮动后呈现的特点,不论是块级元素、行内元素还是行内块元素,他们浮动脱离文档流后均会呈现出行内块元素的特点:不独占一行,宽高默认由内容撑开,但可以为其设置自定义宽高。后面几个特点可以自己敲一个简单的测试来验证一下。
**
-
css布局浮动布局
2020-09-27 13:39:45浮动布局 float: right left none onherit布局 (div ul>li ) 行级布局 利用块级元素的特点 <div class="container"> <div class="header"></div> <div class="content"></div>...- 默认文档流:
块级元素独占一行,宽高默认父级的100%
行内元素与其他元素共享一行 宽度高度都由内容决定- 浮动布局
float: right left none onherit布局 (div ul>li )
- 行级布局
利用块级元素的特点
<div class="container"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div>
- 列级布局
块元素在一行中显示
在默认文档流中,块独占一行空间。
浮动可以使得一个元素脱离默认文档流。
1) 宽度,高度都由内容决定
2) 多个浮动元素在一行中排布
2.1 子元素浮动后无法支撑父元素
<ul> <li>one</li> <li>two</li> <li>three</li> ::after </ul> <div class="content"></div> <style> ul>li { float:left; } </style> <!--1)one two three在一行中排布 2)ul的高度为0 -->
2.2 两个兄弟元素中其中一个元素浮动,一个不浮动
<style> .content > div { height:100px; } .content > .left { float:left; width:100px; } .content > .right { width:200px; } </style> <!--1) left right 2) content高度为100px--> <div class="content"> <div class="left"></div> <div class="right"></div> </div>
2.3 多个浮动在一行,如果父元素的一行中无法容纳这么多元素 换行
- 清除浮动
对父元素
overfloat:hidden;
添加伪元素
::one{ content:' '; display:block; clear:both; }
-
CSS——自适应布局之百分比浮动布局和半固定浮动布局
2020-02-15 20:28:55百分比浮动布局 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; } ... -
Float浮动布局
2020-09-04 20:55:25什么是浮动布局? 浮动可以设置元素,脱离正常的文档流,向右或者向左,靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。比如, 我们使用div等块标签的时候,它们都是独占一行,但是很多时候要将多个div... -
html浮动布局
2016-10-19 10:31:34html浮动布局 浮动布局: ...所以我们需要采用浮动布局,所谓的浮动布局,可以这么来理解,将网页当作游泳池,游泳池分为水底和水面,一般的网页布局就是将标签贴在水池地面上,固定着,而浮动布局就 -
css浮动布局
2020-03-30 22:05:27浮动布局 float 使用浮动可以控制相邻元素间的排列关系。 float: left; /* 向左浮动 */ float: right; /* 向右浮动 */ float: none; /* 不浮动 */ 文档流 没有设置浮动的块元素是独占一行的。 浮动是对后面元素的... -
float浮动布局
2019-12-30 23:37:35浮动布局 任何元素都可以浮动,浮动后会脱离文档流,但需要注意的是,无论它本身是块状元素还是行内元素或是其他类型元素,都会生成一个块级框,就我个人的理解:无论何种类型的元素设置了float,都会变成inline-... -
CSS中的流式布局,浮动布局,层布局,flex布局
2019-07-16 21:41:43CSS中的流式布局,浮动布局,层布局,flex布局 文章目录CSS中的流式布局,浮动布局,层布局,flex布局1. 流式布局2. 浮动布局2.1浮动的特点2.2 元素浮动会造成影响(清除浮动)3. 层布局4. flex布局4.1 容器相关的...