当前位置:   article > 正文

CSS之宽高自适应、BFC_默认情况下什么元素设置宽高可以生效

默认情况下什么元素设置宽高可以生效

宽度自适应  width

1. 块级元素设置宽度100%,默认和浏览器一样

2. 块级元素不设置宽度,宽度默认100%,回合父级等宽

3. 块级元素不设置默认100%,如果添加了脱离文档流属性,元素宽度由内容决定

4. 设置脱离文档流属性,一定要给该元素添加宽高大小

高度自适应  height

1. 浏览器的默认高度是0,如果设置直接子级元素为100% 高度不显示

2. 高度不设置或者设置auto,当前元素宽度会被子级撑开

设置元素为百分比的情况

        设置浏览器的默认百分比高,子级百分比才会相对浏览器进行计算

html,body{width: 100%;height: 100%}

        设置图片宽高大小和父级大小一样

img{width:100%;height:100%} => 拉伸变形

最小高度  min-height

高版本使用、不兼容低版本

作用:无内容时保持一个最小固定高度

           有内容时可将容器高度撑开做到自适应

BFC 块级格式化上下文

        - 只针对块级元素
        - 是一个独立的渲染区域,与外面的布局毫不相干
        - 常见的BFC区域有哪些:html文件

BFC的布局规则

  1. 1、内部的Box会在垂直方向,一个接一个地放置。
  2. - 元素类型中的块级元素的特点
  3. 2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
  4. - margin的错误解析 解析之间的最大值
  5. 3、每个元素的margin box的左边, 与包含块border box的左边相接触
  6. - 设置margin值的时候需要有包含框的接触
  7. 4、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
  8. - BFC的特点 独立的渲染区域
  9. 5、BFC的区域不会与float box重叠。
  10. - 实现常见的后台布局(两栏布局-左侧固定,右侧自适应)
  11. 6、计算BFC的高度时,浮动元素也参与计算
  12. - 高度塌陷 overflow:hidden

高度塌陷

原因:父级没有设置高度  自适应高度为0

           子级含有浮动属性  

解决:

  1. 第一种方法:给父级添加高度
  2. 缺点:不可以做到自适应布局
  3. 第二种方法:给父级添加overflow:hidden
  4. 原理:设置文本溢出属性会触发BFC,布局规则浮动元素也参与高度的计算
  5. 缺点:如果子级元素有超出父级容器的部分就会被隐藏起来
  6. 第三种方法:在当前容器中最后位置添加一个任意标签 设置clear:both
  7. 原理:清除上方预留出来的空间
  8. 优点:清除浮动 比较方便
  9. 缺点:代码冗余 造成布局错乱
  10. 第四种方法: 添加样式
  11. .clear-fix::after{
  12. content:'';
  13. width:100%;
  14. height:0;
  15. display:block;
  16. overflow:hidden;
  17. clear:both;
  18. visibility:hidden;
  19. }

伪对象/伪元素选择器

  1. 1.选择器::after 表示在当前标签的后面添加... 必须要和content属性一起使用
  2. 2.选择器::before 表示咋当前标签的前面添加... 必须要和content属性一起使用
  3. 3.选择器::first-letter 选择第一个文本
  4. 4.选择器::first-line 选择第一行
  5. 伪类和伪对象的区别是什么?
  6. - 伪类: hover link visited active
  7. - 伪对象 before after
  8. 1.写法上的区别: 在css2中伪类和伪对象都是一个冒号,在css3中为了区别,伪对象设置两个冒号
  9. 2.作用上的区别: 伪类改变对象的属性(样式),伪对象可以设置样式还可以添加虚拟结构

在浏览器中如何隐藏一个元素

  1. 1. display: none 把结构显示全部删除
  2. 2. visibility: hidden 隐藏显示方式,结构还存在
  3. 3. 文本溢出 overflow: hidden
  4. 4. opacity: 0

高级表单

  1. <select> 下拉框 子标签<opition>
  2. <textarea> 多行文本框 网站的意见、理由
  3. 1.哪些标签自带边框 input、hr、select、textarea
  4. 2.置换元素与非置换元素
  5. 置换元素: 有自身初始的宽高,通过改变html属性的属性值在浏览器中显示的样式也会发生改变
  6. input(type)、textarea、select
  7. 非置换元素: 除了置换元素 其他都是非置换
  8. div
  9. 3.常见的行内块
  10. img、input、textarea、select
  11. 高级表单: fieldset 收集用户信息,相当于form标签
  12. 高级表格:
  13. 数据的行分组
  14. - thead 头部
  15. - tbody:表格的主体内容 浏览器都会默认新增一个 可以设置多个
  16. - tfoot 尾部
  17. 数据的列分组
  18. - <col>
  19. - <colgroup></colgroup>
  20. - span、width
  21. border-spacing 单元格与单元格之间的间距
  22. border-collpase 合并单元格 值为 collapse
  23. empty-cells 无内容时,单元格的显示方式 值为 show/hidden
  24. table-layout 单元格的计算属性
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/812359
推荐阅读
相关标签
  

闽ICP备14008679号