博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css中和模型及其相关的问题
阅读量:6640 次
发布时间:2019-06-25

本文共 906 字,大约阅读时间需要 3 分钟。

什么是css和模型

又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素
IE模型区别是宽度和高度不同,标准模型宽度和高度是content的高度,IE模型的宽度是border 和padding
图片描述

  • css 如何设置这两种模型 box-sizing:content-box

box-sizing:border-box IE模式下 padding计算在里边

box-sizing:content-box 默认

  • 获取css中dom的宽高方法

第一种

dom.style.height  dom.style.width

这种情况有一个只有在内联样式中能够获取到 而写到上边或者外联都获取不到样式

第二种

dom.currentStyle.width  只有IE支持

第三种方法

window.getComputedStyle(a).height

第四种方法

原生JS提供了一个getBoundingClientRect()方法,用于获取左,上,右和下分别相对浏览器视窗的位置。
图片描述
right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离
BFC 是什么?
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
原理:bfc垂直方向边距发生重叠,bfc区域不会与浮动元素的box重叠
bfc是一个容器外边元素不会影响里边的元素,计算bfc高度浮动元素也会参与计算
如何形成:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用:
创建BFC来避免垂直外边距叠加
创建BFC来清除浮动
创建BFC来实现自适应布局

转载地址:http://zxovo.baihongyu.com/

你可能感兴趣的文章
读懂正则表达式就这么简单
查看>>
python模块介绍-gearman:程序排程 概述
查看>>
利用autobench测试web服务器极限并发数
查看>>
Zabbix监控系统部署
查看>>
centos用光盘做本地源
查看>>
linux 的文件归档和压缩
查看>>
内网通过映射后的公网IP访问内网服务测试--ASA8.0 hairpin NAT测试
查看>>
2018年的AI/ML惊喜及预测19年的走势(二)
查看>>
jboss 基本配置(端口、编码、访问、log)
查看>>
1.VMware vsphere 5.0新体验-介绍
查看>>
java重载与重写
查看>>
Python BeautifulSoup 爬取笔趣阁所有的小说
查看>>
Linux网络配置命令
查看>>
我的友情链接
查看>>
ansible使用
查看>>
marathon上部署marathon-lb服务发现与负载均衡
查看>>
基于express的bodyParser() 解析请求体实现文件上传功能
查看>>
在linux下如何使用yum查看安装了哪些软件包
查看>>
kafka集群配置调优详解
查看>>
《Perl语言入门》之六——正则表达式
查看>>