Please enable JavaScript.

Coggle requires JavaScript to display documents.

浮动 (网页布局中的实际应用, 前面所学的盒子模型大部分都是设置了高度的，但是所有的父元素都要设置高度吗？, 网页布局准则, 为什么需要浮动？,…

- - - - 当父元素不给高度时，内部元素不浮动则会撑开盒子，内部元素浮动时，父元素就会因为没有高度而变成一条线
    - - 清除浮动元素造成的影响
      - 如果父盒子本身有高度，则不需要清除浮动
      - 清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
    - - 额外标签法（隔墙法）{优点：通俗易懂书写方便；缺点添加许多无意义的标签，结构化较差}
        
        在浮动元素末尾添加一个空标签。如：<div style="clear:both"></div>或者其他标签，如<br/>注：这个新的空标签必须是块级元素
      - 清除浮动
        
        语法：选择器{clear：属性值（left/right/both）；}
        
        在实际工作中，一般使用clear：both；（策略是：闭合浮动）
      - 父级添加overflow属性{优点：代码简洁；缺点：无法显示溢出的部分}
        
        给父级添加overflow属性，属性值为hidden、auto或scroll
      - 父级添加after伪元素{优点：没有增加标签，结构更简单；缺点：照顾低版本浏览器}
        
        Link Title
      - 父级添加双伪元素{优点：代码更简洁；缺点：照顾低版本浏览器}
        
        Link Title
- - - - ①块级元素会独占一行，从上向下排列
      - ②行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
    - - 浮动的特性
        
        当添加了float属性之后的盒子会脱离标准流的控制,简称“脱标。”
        
        在脱标之后的盒子，会脱离整个标准流，让它的下一个盒子迷惑，从而顶替上一个盒子的位置，导致两个盒子重叠在一起
        
        浮动的盒子不再保留原先的位置
        
        如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列，即从left top开始按顺序排列
        
        浮动元素会具有行内块元特性
        
        任何元素都可以浮动
        
        如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小由内容决定
        
        浮动的元素中间是没有缝隙的，紧挨在一起
- - - - width:0;
      - height:0;
      - border-color:transparent red transparent transparent;
      - border-style:solid;
      - border-weight:22px 8px 0 0;
- - - - 为了有效地减少服务器接受和发送的次数，提高页面的加载速度，所以出现了css精灵技术（css sprites、css雪碧）
    - - 将网页中的一些小背景图像整合在一张大图中，再将背景图片移动位置，让指定的盒子显示对应的内容，这样服务器只需要请求一次就行啦
    - - ①移动背景图片位置，使用background-position属性
      - ②移动的距离就是这个目标图片的x和y坐标（以网页的可视区左上角为原点）
      - ③一般都是往上往左移动，所以数值为负。（上负下正、左负右正）
      - ④在使用精灵图的时候需要精确测量
      - 总结
        
        主要借助于背景位置来实现--background-position
        
        一般情况下，精灵图都是负值
        
        主要针对小的背景图片使用
  - - - 放大和缩小不会失真
      - 更换比精灵图方便
      - 文件比精灵图小
      - 展示是图标，本质属于字体
      - 注：字体图标不能替代精灵技术，只是对工作中的图标部分技术进行提升和优化
    - - 简单小图标用字体图标
      - 复杂小图片就用精灵图
    - - ①在网站上下载好想用的字体图标，打包完成后将fonts放在页面根目录下（与网页放在同一个文件夹）
      - ②在css样式中全局声明字体（可在style.css文件中复制）@font-face~block；}行
      - ③在demo.html文件中复制想要的图标
      - ④在插入部分前加上代码：font-family：‘icomoon’(与声明字体一样)
    - - 把压缩包里面的selection.json重新上传，选中自己想要的新图标，重新下载压缩包并替换原文件
  - - - 去掉表单默认的蓝色边框
        
        outline:0;
        
        outline:none;
    - - textarea{resize:none;}
      - 默认设置的文本域右下角会有拖拽按钮，在实际开发中是不允许的
      - 注：textarea属性一般都写在同一行
    - - 定义：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
      - 语法：{cursor：pointer；}
      - default：小白，默认
      - pointer：小手
      - move：移动
      - text：文本
      - not-allowed：禁止
  - - - ②：超出部分隐藏 overflow:hidden;
      - ③：文字用省略号代替超出的部分 text-overflow:ellipsis;
      - ①：强制一行内显示文本 white-space:nowrap;
  - - - 语法：display:none/block;
      - none:隐藏对象
      - block:除了转换为块级元素之外，还有显示元素的意思
      - 定义：类似网站广告，当我们点击关闭就不见了，但是我们刷新后，会重新出现。运用display属性
      - 注：display隐藏元素之后，不再占有原来的位置，配合js使用
    - - 定义：用于指定一个元素是可见还是隐藏
      - visible：元素可视
      - hidden：元素隐藏
      - 注：visibility隐藏元素后，继续占有原来的位置
        
        如果隐藏元素想要原来的位置，就用visibility：hidden；如果隐藏元素不想要原来的位置，就用display：none；
    - - 定义：指定了如果内容溢出一个元素的高度或宽度时，会发生什么。
      - visible：不剪切内容也不添加滚动条
      - hidden：不显示超过对象尺寸的内容，超出部分隐藏
      - scroll：不管超出内容与否，总是显示滚动条
      - auto：超出自动显示滚动条，不超出不显示滚动条
      - 注意事项
        
        ①溢出的部分不会设置为显示，因为溢出会影响布局
        
        ②如果有定位的盒子，就不要设置隐藏多余的部分
    - - visibility显示隐藏元素保留位置
      - overflow溢出显示隐藏，对溢出部分做出处理
      - display显示隐藏元素不保留位置
  - - - 实现图片、表单和文字垂直居中对齐
        
        给图片、表单这些行内块元素的vertical-align属性设置为middle即可
      - 解决图片底部默认空白缝隙的问题
        
        问题产生原因
        
        行内块元素会和文字的基线对齐
        
        解决方法
        
        ①给图片添加vertical-align:middle/top/bottom属性值（推荐）
        
        ②把图片转换为块级元素display:block;
- - - - 定义：用于设置边框和内容之间的距离
      - padding-top
      - padding-right
      - padding-left
      - padding-bottom
      - padding简写属性
        
        与border大致相同
      - padding属性会撑大盒子，改变盒子的实际大小
      - 实际应用
        
        当让一些内容长度不等的盒子设置整齐的效果，如：页面的导航栏时，可以运用padding属性给每一个盒子设置相同的内边距，以达到简洁，整齐的目的
      - 如果盒子本身没有指定width/height属性，子元素默认和父元素一样宽，不会撑开盒子。注：%书写也是指定了宽度哦
      - box-sizing：border-box；可以有效解决盒子被padding和margin撑大的问题（前提两值不超过盒子宽度）
    - - 边框样式border-style
        
        dashed虚线边框
        
        solid实线边框
        
        dotted点线边框
      - 边框颜色border-color
        
        hex-number
        
        rgb-number
        
        color name
      - 边框宽度（粗细）border-width
        
        thick粗边框
        
        medium默认，中等边框
        
        thin细边框
        
        length自定义边框的宽度（一般用px做单位）
      - 边框的复合写法
        
        格式：border:border-width border-style border-color;
        
        没有顺序
      - border的写法
        
        如果只编辑其中一条边框，可写成：
        
        或者：border-top/right/bottom/left: 属性值
        
        border-top/right/bottom/left-width/style/color: 属性值
        
        border属性的简写
        
        border-width:5px 10px 20px；三个值，代表上边框宽度为5px，左右边框宽度为10px,下边框宽度为20px
        
        border-width:5px；一个值，代表上下左右的边框宽度为5px
        
        border-width:5px 10px 20px 30px；四个值，代表上边框宽度为5px，右边框宽度为10px,下边框宽度为20px，左边框宽度为30px
        
        border-width:5px 10px；两个值，代表上下边框宽度为5px，左右边框宽度为10px
        
        按顺时针的方向书写，即上右下左；
      - 边框合并border-collapse
        
        separate : 默认值，边框会分开
        
        collapse：相邻边框会合并为一个单一的边框
        
        应用场景：当表格中的每个单元格都设置了边框后，有一些边框会重叠，这样重叠的边框就会变粗，可以用这个属性解决问题
      - 边框会影响盒子的实际大小
        
        解决方法
        
        ①测量盒子大小时，不测量边框
        
        ②：如果测量包含了边框，则需要width/height减去边框宽度（如果两边都有边框需要减去双倍边框宽度）
    - - 定义：用于设置外边距，即控制盒子与盒子之间的距离
      - margin-top
      - margin-bottom
      - margin-right
      - margin-left
      - margin简写属性
        
        与border大致相同
      - 实际应用
        
        让块级盒子设置为水平居中
        
        ①：盒子必须指定了宽度（width）
        
        ②盒子左右的外边距都设置为auto,上下外边距可以根据实际设置
        
        写法：margin：上下外边距 auto;
        
        行内元素或行内块元素直接添加text-align:center;即可，如<img/><p>
        
        相邻块元素垂直外边距的合并
        
        当上下两个块元素（兄弟关系）相遇是，上面的块元素设置了margin-bottom,下面的块元素设置了margin-top，则取两个值中的较大值作为相邻盒子的距离
        
        嵌套块元素垂直外边距的塌陷问题
        
        对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时会去两个值中的较大值作为外边距
        
        解决方法
        
        ②为父元素定义上内边距
        
        ③为赋予父元素添加overflow:hidden
        
        ①为父元素定义上边框
        
        其他方法：浮动、固定、绝对定位的盒子不会产生塌陷问题
    - - 原因：很多浏览器都自带有默认的内外边距，这样会影响我们的布局效果
      - 代码：
        
        *{padding:0;margin:0;}
      - 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素和行内块元素就可以设置了
    - - 语法：border-radius: length ;（单位为px）
      - 原理：椭圆与边框交际形成圆角效果
      - 取值越大，弧度越大。
      - 实际应用
        
        如果盒子时一个矩形，把值改为盒子高度的一半就可以实现这种效果
        
        如果盒子为正方形，当取值为50%时，该矩形会变成一个以盒子宽度/高度的一半值为半径的一个圆
        
        该属性时简写属性，可以分别设置左上角，右上角，右下角，左下角
  - - - 可以为盒子阴影添加hover属性，具体可以与过渡属性transition结合使用
    - - ①：默认时外阴影（outset），但不能写这个值，否则阴影无效
      - ②：盒子阴影不占用空间，不影响其他盒子排列
- - - - 只会压住下面标准流的盒子，但盒子里面的文字和图片等内容任然会在盒子的其他部分显示
  - - - ②如果属性值相同，则按书写顺序，后来居上
      - ③数字后面不能够加单位
      - ①数值可以是正整数，负整数或者0，默认是auto,数值越大，盒子越靠上显示
      - 只有设置了定位的盒子才能设置z-index属性
- - - - 特点
        
        ②如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
        
        ③绝对定位是脱标的，不再占有原先的位置，适合做一些移动的图标
        
        ①如果没有做祖先元素或祖先元素没有定位，则以浏览器为准定位
    - - ②固定定位不再占有原先的位置
        
        固定定位也是脱标的，可以把他看做是特殊的绝对定位
      - 固定定位的小技巧：固定在版心右侧位置
        
        ①让固定定位的盒子left:50%;走到浏览器的可视区域（版心）一半的位置
        
        ②让固定定位margin-left:版心宽度的一半，多走版心宽度的一半位置
      - ①以浏览器的可视窗口为参照点进行移动元素
        
        跟度元素没有任何关系
        
        不随滚动条滚动
    - - 特点
        
        ①相对于自己本身的位置来移动
        
        ②原来在标准流中的位置不变，即不脱标，继续保留原来的位置，不会对后面的盒子造成影响
    - - 被认为是相对定位和固定定位的混合，在页面滚动时随着滚动，当滚动到不可见区域时，任然浮在页面上，依然可见
      - 特点
        
        ②粘性定位占有原先的位置（相对定位的特点）
        
        ③必须添加top/left/right/bottom其中一个才有效
        
        ①以浏览器的可视窗口作为参照点移动元素（固定定位的特点）
        
        ④跟页面滚动搭配使用，兼容性较差，现在的技术不支持，一般用JavaScript来完成
    - - 是元素的默认定位方式，即无定位，它按照标准流的特性摆放位置，没有边偏移，在项目中很少用到
  - - - bottom
      - left
      - top
      - right
- - - - 讲盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子