【HTML/CSS】CSS盒模型及其理解

1 盒模型

  1. 概念:CSS盒模型本质是一个盒子,包括:外边距margin、边框border、内边距padding、内容content

  2. 分类:标准盒模型(W3C)和怪异盒模型(IE)
    标准盒模型:width的值就是content的值
    在这里插入图片描述

    怪异盒模型:width的值等于content+padding+border
    在这里插入图片描述

2 如何解决样式兼容性问题

  1. 不要给子元素设置内边距
  2. 可以给父元素加内边距或者给子元素加外边距

3 CSS3指定盒模型

可以使用box-sizing指定盒模型的类型:

  1. content-box:标准模型
  2. border-box:怪异模型
  3. inherit:继承父元素

4 容易混淆的API

// 获取的是content的宽度,而不是width属性的值
document.getElementById('#div).width() 
// 获取的是width属性的值
document.getElementById('#div).css('width') 
// innerWidth获取的是padding+content的值,不含border
document.getElementById('#div).innerWidth() 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/480890.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Netty异步非阻塞事件驱动及原理详解

本文基于 Netty 4.1 展开介绍相关理论模型、使用场景、基本组件、整体架构,知其然且知其所以然,希望给大家在实际开发实践、学习开源项目方面提供参考。 Netty 是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服…

文本预处理跑得慢?抱抱脸团队又放福利,1GB文本语料分词只需20s!

一只小狐狸带你解锁NLP/DL/ML秘籍正文素材来源:量子位缘起BERTBERT带来的并不是只有一大波paper和嗷嗷上线,还带火了一个NLP团队——Huggingface(中文译作抱抱脸)。抱抱脸团队是一个创业团队。他们的Transformers是github上最火的…

基于深度学习的FAQ问答系统

| 导语 问答系统是信息检索的一种高级形式,能够更加准确地理解用户用自然语言提出的问题,并通过检索语料库、知识图谱或问答知识库返回简洁、准确的匹配答案。相较于搜索引擎,问答系统能更好地理解用户提问的真实意图, 进一步能更有效地满足用…

【HTML/CSS】定位方式及区别

1 文档流 文档流是浏览器默认的排版方式 文档流的排版方式是块级元素垂直排布,行内元素和行内块元素水平排布。 2 脱离文档流 脱离文档流是不按照文档流的排版方式进行排版,脱离后,元素不在布局中,不在流中占有位置&#xff0c…

基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba的企业级微服务敏捷开发系统架构

一、项目总体架构图 二、功能介绍 2.1、统一认证功能 支持oauth2的四种模式登录 支持用户名、密码加图形验证码登录 支持手机号加密码登录 支持openId登录 支持第三方系统单点登录 2.2、分布式系统基础支撑 服务注册发现、路由与负载均衡 服务降级与熔断 服务限流(url/方法级别…

征文通知 | 2018年全国知识图谱与语义计算大会

2018年全国知识图谱与语义计算大会China Conference on Knowledge Graph and Semantic Computing (CCKS 2018)2018年8月15日-18日,天津征稿截止: 2018年5月18日全国知识图谱与语义计算大会(CCKS: China Conference on Knowledge Graph and Semantic Comp…

如何让聊天机器人懂情感?这是一篇来自清华的论文

原载:Paperweekly作者:黄民烈,清华大学老师关注自然语言处理、人机对话情感分析等方向aihuangtsinghua.edu.cn当你悲伤的时候,机器人可以安慰你;当你高兴的时候,机器人为你高兴。悲你所悲,喜你所…

戴着口罩也要开心过年吖!

一只小狐狸带你解锁NLP/ML/DL秘籍素材来源于网络新的一年????就要到来了作为超(bu)高(shan)智(yan)商(ci)的程序员如何向亲朋好友证明我们是人群中最靓的仔呢小夕为你准备了专属程序员的新春祝福~~普天同庆for (;;) { print("鼠年快乐"); }(满屏的新年…

【HTML/CSS】margin塌陷和合并问题

1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>margin塌陷</title…

集群、分布式、微服务的概念及异同

一、什么是集群&#xff1f; 集群是指将多台服务器集中在一起&#xff0c;每台服务器都实现相同的业务&#xff0c;做相同的事&#xff1b;但是每台服务器并不是缺一不可&#xff0c;存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征&#xff1a;&…

论文浅尝 | Complex Embeddings for Simple Link Prediction

The ́o Trouillon, Johannes Welb, Sebastian Riedel, ÉricGaussier, Guillaume Bouchard . Complex Embeddings for Simple Link Prediction. In Proceedings of the 33ndInternational Conference on Machine Learning, pages 2071– 2080 (ICML2016)论文链接&#xff1a;…

详解医学顶刊《柳叶刀》最新发表新型冠状病毒研究论文

我是夕小瑶&#xff0c;一只热爱科研的小狐狸作者&#xff1a;夕小瑶&#xff0c;小鹿鹿鹿&#xff0c;QvQ前言新型冠状病毒&#xff08;2019-nCoV&#xff09;的突发恰逢春节&#xff0c;千家万户都对疫情十分关注。令人心痛的是&#xff0c;病毒带来的不止有病痛&#xff0c;…

AI学习笔记--人机对话的四种形态

AI学习笔记--人机对话的四种形态 ><div class"show-content-free"><p>最近在筹备转行 AI PM 由于之前的产品线也有做过类似 AI 的智能客服产品&#xff0c;所以打算先从人机对话这个角度入手。</p><p>以下文章结合了一些 case&#xff0c…

Spring Cloud简介,为什么需要Spring Cloud?

一、为什么需要Spring Cloud&#xff1f; 从分布式/微服务的角度而言&#xff0c;就是把我们一个大的项目分解成多个小的模块&#xff0c;这些小的模块组合起来&#xff0c;完成功能&#xff1b;而拆分出多个模块以后&#xff0c;就会出现各种各样的问题&#xff0c;而Spring C…

【HTML/CSS】浮动模型和清除浮动的方法

1 浮动 浮动是让元素脱离文档流&#xff0c;浮动前后的非定位元素会无视浮动元素&#xff0c;可能沿着元素另一侧垂直流动。浮动元素会生成一个块级框&#xff0c;具有块级元素的特性&#xff0c;但是不占整行。浮动元素脱离了文档流&#xff0c;无法为文档流中的父元素撑起高…

论文浅尝 | 「知识图谱」领域近期值得读的 6 篇顶会论文

本文转载自公众号&#xff1a;PaperWeekly。CIKM 2017■ 论文 | Hike: A Hybrid Human-Machine Method for Entity Alignmentin Large-Scale Knowledge Bases■ 链接 | https://www.paperweekly.site/papers/1528■ 解读 | 罗丹&#xff0c;浙江大学硕士1. Motivation 随着语义…

NLP最佳入门与提升路线

一只小狐狸带你解锁NLP/ML/DL秘籍作者&#xff1a;夕小瑶&#xff0c;小鹿鹿鹿&#xff0c;QvQ前言对突如其来的长假感到惶恐和不安&#xff1f;紧盯2019-nCoV的最新消息却依然感觉很空虚&#xff1f;腰酸萎靡脖子僵甚至怀疑自己有点发烧&#xff1f;这是长时间没学习的症状。 …

揭秘任务型对话机器人(下篇)

本文来自专栏语言、知识与人工智能&#xff0c;作者腾讯知文实验室 近年来比较热门的任务型对话的研究主要集中在端到端的框架的研究&#xff0c;基本跟传统任务型算法框架——语言理解模块&#xff08;Spoken Language Understanding&#xff0c;对话管理模块(Dialogue Manage…

斯坦福大学NLP公开课CS224n上映啦!华人助教陪你追剧

一只小狐狸带你解锁NLP/DL/ML秘籍作者&#xff1a;小鹿鹿鹿&#xff0c;QvQ&#xff0c;夕小瑶CS224n: Natural Language Processing with Deep LearningStanford / Winter 2020开课啦&#xff01;&#xff01;在大量开源工具的席卷下&#xff0c;NLP领域也不可避免的受到了“调…

【HTML/CSS】display相关属性

1 display的定义 display规定元素应该生成的框的类型 display使用不谨慎&#xff0c;可能会违反HTML中定义的显示层次结构 2 display的取值 常用的取值&#xff1a; none&#xff1a;不显示block&#xff1a;显示为块级元素&#xff0c;元素前后会带有换行符inline&#x…