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、内部的Box会在垂直方向，一个接一个地放置。
        - 元素类型中的块级元素的特点 

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
        - margin的错误解析 解析之间的最大值

3、每个元素的margin box的左边， 与包含块border box的左边相接触
        - 设置margin值的时候需要有包含框的接触

4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
        - BFC的特点 独立的渲染区域

5、BFC的区域不会与float box重叠。
        - 实现常见的后台布局(两栏布局-左侧固定,右侧自适应)

6、计算BFC的高度时，浮动元素也参与计算
        - 高度塌陷 overflow:hidden

高度塌陷

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

           子级含有浮动属性  

解决：

第一种方法:给父级添加高度
        缺点:不可以做到自适应布局

第二种方法:给父级添加overflow:hidden
        原理:设置文本溢出属性会触发BFC,布局规则浮动元素也参与高度的计算
        缺点:如果子级元素有超出父级容器的部分就会被隐藏起来

第三种方法:在当前容器中最后位置添加一个任意标签 设置clear:both
        原理:清除上方预留出来的空间
        优点:清除浮动 比较方便
        缺点:代码冗余 造成布局错乱

第四种方法: 添加样式
        .clear-fix::after{
            content:'';
            width:100%;
            height:0;
            display:block;
            overflow:hidden;
            clear:both;
            visibility:hidden;
        }

伪对象/伪元素选择器

1.选择器::after     表示在当前标签的后面添加... 必须要和content属性一起使用
2.选择器::before    表示咋当前标签的前面添加... 必须要和content属性一起使用

3.选择器::first-letter 选择第一个文本
4.选择器::first-line   选择第一行

伪类和伪对象的区别是什么?
  - 伪类: hover link visited active
  - 伪对象 before after
    
1.写法上的区别: 在css2中伪类和伪对象都是一个冒号,在css3中为了区别,伪对象设置两个冒号
2.作用上的区别: 伪类改变对象的属性(样式),伪对象可以设置样式还可以添加虚拟结构

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

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

高级表单

<select> 下拉框  子标签<opition>
<textarea> 多行文本框 网站的意见、理由


1.哪些标签自带边框  input、hr、select、textarea
2.置换元素与非置换元素
     置换元素: 有自身初始的宽高,通过改变html属性的属性值在浏览器中显示的样式也会发生改变
                input(type)、textarea、select
     非置换元素: 除了置换元素 其他都是非置换
                div
3.常见的行内块
     img、input、textarea、select


高级表单： fieldset 收集用户信息，相当于form标签

高级表格：
数据的行分组
        - thead 头部
        - tbody:表格的主体内容 浏览器都会默认新增一个 可以设置多个
        - tfoot 尾部

数据的列分组
        - <col>
        - <colgroup></colgroup>
        - span、width

border-spacing 单元格与单元格之间的间距
border-collpase  合并单元格 值为 collapse
empty-cells  无内容时，单元格的显示方式  值为 show/hidden
table-layout 单元格的计算属性