ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

HTML/CSS

2021-09-08 22:34:24  阅读：122  来源： 互联网

标签：BFC flex 浏览器 元素 HTML position CSS 属性


  盒模型、BFC、清除浮动、position定位5个值、水平垂直居中、

fllex布局 、   水平/垂直居中、 两/三栏布局(圣杯双飞翼)、flex布局；

  常见的块级/行内/空元素、CSS Hack、src与href的区别、

 link与  @import区别 、 css3/H5新特性 、 浏览器兼容性问题

##盒模型：

   什么是盒模型？

 在HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。

1.2.盒子模型有哪两种
标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

1.3. 标准和怪异模型的转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

1.4. JS盒模型

怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

##2.1什么是BFC？

概念：BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

如何触发BFC？

在box属性值为这些的情况下，都会让所属的box产生BFC。

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法：

overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
BFC的原理？

  1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
  2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
  3. BFC的区域不会与float重叠。

BFC的应用？

1. 可以用来自适应布局

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响

2. 可以清除浮动：

父元素加overflow:hidden/auto,变BFC

##3.1清除浮动

1.1 为什么要清除浮动？

  清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

1.2 清除浮动的方法（最常用的4种）

一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易等等）

四、使用before和after双伪元素清除浮动：（较常用推荐）

优点： 代码更简洁

## position定位5个值

1、position: static
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

2、position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

3、position: absolute
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

4、position: fixed
可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。

5、inherit
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

6、sticky (吸顶效果)
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
 

## 水平/垂直居中

方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法

方法二：父元素设置成弹性盒，子元素横向居中，纵向居中

方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。

## 两/三栏布局(圣杯双飞翼)、flex布局

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

实现思路也非常的简单：

  • 使用 float 左浮左边栏

  • 右边模块使用 margin-left 撑出内容块做内容展示

  • 为父级元素添加BFC，防止下方元素飞到上方内容

  • 还有一种更为简单的使用则是采取：flex弹性布局

    左侧盒子设固定宽度，右侧设flex ：1

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

实现三栏布局中间自适应的布局方式有：

  • 两边使用 float，中间使用 margin

    两边固定宽度，中间宽度自适应。
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时，右侧部分会被挤下去

  • 两边使用 absolute，中间使用 margin

    • 实现流程：
- 左右两边使用绝对定位，固定在两侧。
- 中间占满一行，但通过 margin和左右两边留出10px的间隔

  • flex实现

    左右两侧的盒子给一个固定宽高，中间盒子flex ：1

##flex布局

   Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

1.1以下6个属性设置在容器上

  • flex-direction ： 属性决定主轴的方向（即项目的排列方向） 有4个值
  • row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

  • flex-wrap ：换行  

       

    它可能取三个值。

（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。

  • flex-flow ：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。  
     flex-flow: <flex-direction> || <flex-wrap>;

  • justify-content ：主轴上的对齐方式。 
    它可能取5个值，

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items ：定义项目在交叉轴上如何对齐。
  • flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  • align-content：多轴对齐方式。如只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

##常见的块级/行内/空元素

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

行内元素有：span a b i img input select strong
块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>

##CSS Hack

什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式：
属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

1、条件Hack

  条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

2、属性Hack

属性级Hack：
比如IE6能识别下划线“”和星号“”，
IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。
background-color:red9; 9所有的ie浏览器可识别；
background-color:yellow0; 0 是留给ie8的，


3、选择符Hack

比如IE6能识别 *html .class{}，IE7能识别*+html .class{}

浏览器优先级别:

FF<IE7<IE6,CSS hack

##src与href的区别 

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

##link与@import区别

link属于html标签。@import在css中使用表示导入外部样式表；
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重 高于@import的权重；
link 支持使用javascript改变样式 （document.styleSheets），后者不可
 

##css3/H5新特性

  • css3新特性

    1. 选择器

      ( 基本选择器 层级选择器 内容选择器 过滤选择器 属性过滤选择器 子元素过滤选择器 表单属性过滤选择器 )

  1. 背景和边框 ( background-size， border-radius，box-shadow ）

  2. 文本效果

  3. 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)

  • h5新增特性：

    1. 语义化标签：header、footer、section（赛可婶）、nav、aside、article（阿特污）

    2. 增强型表单：input 的多个 type (email date color search)

    3. 新增表单属性：placehoder、required、min 和 max

    4. 音频视频：audio、video

    5. 本地存储：

    6. 延伸 :

      vue ：

      localStorage 生命周期是永久，这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般为5MB，不参与和服务器的通信。sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage。cookie 具有极高的扩展性和可用性，是用来和服务器通讯，而不是本地存储，他只是被‘借用’到本地存储。存储大小最大4KB每次http请求，header都携带cookie

      微信小程序：

      存储：通过wx.setStorage/wx.setStorageSync写数据到缓存

      接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，

      uni-app：

      存储：uni.setStorage

      接收：uni.getStorage

##浏览器兼容性问题

一、css兼容

1. css3新属性，加浏览器前缀兼容早期浏览器

2. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

3. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

4. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

5. IE浏览器div最小宽度和高度的问题

6. 超链接访问过后hover样式就不出现的问题

7. 图片默认有间距

二、js兼容

1. 事件绑定

2.阻止事件冒泡传播

3. 阻止事件默认行为

4.ajax兼容问题

标签：BFC,flex,浏览器,元素,HTML,position,CSS,属性
来源： https://blog.csdn.net/lwg112233/article/details/120129463

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有