关于盒模型的 盒子模型 、 浮动 、 定位以及高级选择器的使用

盒模型的基本组成包括:外边距(margin)内边距(padding) 边框(border)元素(element,content)

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。都会合并成父元素的外边距,内盒子与大盒子之间不显示小盒子的外边距。

解决方案:可以为父元素定义1px的上边框。可以为父元素定义1px上内边距。可以为父元素添加 overflow: hidden

  • box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode
  • box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
    注:上面的标注的width指的是CSS属性里设置的width: length,content的值是会自动调整的
  • 高级选择器的写法以及其中的意思:通配符选择器为所有包含的html进行设置(*)在html中字体的最小是12px,
  • 选择器分组;div,p{},p在div外 后代选择器 div a{} a链接在div里边,如果在div外有个p标签,p标签下有个a链接是不生效的,a但是如果p与a标签都在div里,那就可以生效;
  • div>a{} div下有P,a不生效
  • div+p{}相邻元素设置p标签生效,如果中间有个a标签,那p标签就不生效
  • 伪类选择器a:hover{}鼠标移动到哪,设置的啥颜色就是啥,移开恢复原来颜色

原文地址:https://www.cnblogs.com/mmore123/p/12008658.html

时间: 2024-11-06 19:53:45

关于盒模型的 盒子模型 、 浮动 、 定位以及高级选择器的使用的相关文章

W3c盒子模型+IE盒子模型+box-sizing属性

1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padding,content,其中,content不包括其他部分,下面内容(content)部分为蓝色的部分,不包含其他. w3c中的盒子模型的宽:包括margin+border+padding+width;(width为content的宽度) width:margin*2+border*2+paddin

盒子模型(W3C盒子模型、IE盒子模型)

盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的;这是俩种标准 Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准 下面我用公式来说明一下: W3C: 宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right) 高=height

html盒子模型&jquery盒子模型

最近学了jquery的盒子模型之后,感觉真的颠覆我之前对盒子模型的看法,我在最初以为盒子模型只存在于html,我们就来看看他们有何区别. 1.html盒子模型 如果说js里面万物皆是对象,那么html里面的万物皆是盒子.不是盒子的我们也可以用dispiay:blok 变成盒子.那他的盒子是怎么计算的呢? httml元素有一个属性box-sizing:border-box/content-box; 默认的情况下是content-box 内容盒子这情况下宽高求法 实际宽(width)=定义的宽(wi

3.5html学习笔记之框模型,盒子模型

块元素:block 两个相邻的元素外边距,两者之间取最大. 浮动(定位机制针对框来说): 1.position:absolute,relative,fixed 1)relative:在原来的位置上进行移动 2)absolute:从里面往外走,第一个能定位的位置移动 2.float:right,left:在浏览器缩放时候,自动做调整

标准W3C盒子模型和IE盒子模型

标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(content). CSS盒子模型分为:标准W3C盒子模型,IE盒子模型,注意在两种模型中宽(width)和高(height)包括属性的不同. 标准W3C盒子模型: W3C模型中: CSS中的宽(width)=内容(content)的宽 CSS中的高(height)=内容(content)的高 eg: <d

padding标准盒模型和怪异盒子模型

我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意思,第二讲不明白 标准盒模型: 我们先摆出HTML和CSS代码: 1 <div class="shoebox"> <!--此div模仿鞋子的鞋盒--> 2 <div class="shoes"> <!--此div模仿鞋子--&g

溢出处理、盒子模型、背景图片、float(浮动)

一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出产生滚动,没有就不产生滚动条)    overflow:scroll; 不管有没有溢出均产生滚动条 图片精灵技术    服务器    前项目部署到服务器上,图片当然也是在服务器上.网页如果要显示a图片,如果显示b图片,如果套很多图片 二.盒子模型:        margin(外边距).border

从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要,必先于读书. 正文 ? CSS盒子模型是CSS基础中的基础,个人之前对于这块的理解有偏差?,由于涉及知识点比较多所以写一篇总结备忘.之前打算的是两周一次更新博文的,但是时间用在了刷题上,做了很多leetcode上算法数据结构的题记录在github,但其实也有在更新啦~只不过是对之前的一些博文进行纠

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文