精华内容
下载资源
问答
  • 浮动布局

    2020-09-15 15:32:58
    含义:浮动布局,使用后会使元素向左或者向右移动 取值: left 左浮动 right 右浮动 none 【默认】不浮动 特点: 1、使用浮动的元素会脱离文档流【置物架】 2、使用浮动的元素的宽、高度默认由内容决定,可设置宽、...
    1. 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
    
    展开全文
  • 掌握浮动布局的基本原理和float 属性的用法掌握浮动元素的盒子模型计算 掌握clear属性的含义和用法 掌握浮动元素的display属性;任务说明;任务步骤;构建HTML结构;设置CSS样式; 此处将右边盒子的宽度设为652px这个宽度...
  • 页面布局——浮动布局 浮动布局是页面的一种重要布局方式 它使用float属性为元素开启浮动,float属性的可选值有left、right、none none 是默认值,即不开启浮动 left向 左浮动,靠父元素的左边浮动 right向 右浮动...

    **

    页面布局——浮动布局

    浮动布局是页面的一种重要布局方式
    它使用float属性为元素开启浮动,float属性的可选值有left、right、none
    none 是默认值,即不开启浮动
    left 向左浮动,靠父元素的左边浮动
    right 向右浮动,靠父元素右边浮动

    元素浮动前位于文档流中的特点

    块级元素(block):在文档流中独占一行,宽度默认是父级的宽度,高度默认由内容撑开,可为其自定义设置宽高;

    行内元素(inline):在文档流中不独占一行,宽和高都默认由内容撑开,且不可为其自定义设置宽高;

    行内块元素(inline-block):在文档流中不独占一行,宽和高都默认由内容撑开,可为其自定义设置宽高;

    元素浮动后的特点

    1. 浮动元素完全脱离文档流,不再占据文档流中的位置

    块级元素(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 )

    1. 行级布局
      利用块级元素的特点
    <div class="container">
    	<div class="header"></div>
    	<div class="content"></div>
    	<div class="footer"></div>
    </div>
    
    1. 列级布局
      块元素在一行中显示
      在默认文档流中,块独占一行空间。
      浮动可以使得一个元素脱离默认文档流。
      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;
    } 
     
    
    展开全文
  • 百分比浮动布局 代码 <!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:34
    html浮动布局 浮动布局: ...所以我们需要采用浮动布局,所谓的浮动布局,可以这么来理解,将网页当作游泳池,游泳池分为水底和水面,一般的网页布局就是将标签贴在水池地面上,固定着,而浮动布局
  • 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布局 文章目录CSS中的流式布局,浮动布局,层布局,flex布局1. 流式布局2. 浮动布局2.1浮动的特点2.2 元素浮动会造成影响(清除浮动)3. 层布局4. flex布局4.1 容器相关的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,682
精华内容 4,672
关键字:

浮动布局