CSS知识点整理(2):框模型,定位

1. 框模型:Box Model 规定了元素处理元素框处理元素内容、外边距、边框、内边距的方式。

2. 当边距给定的值 可以小于4个。CSS定义了一些规则、处理这中情况:

  • 如果缺少左外边距的值,则使用右外边距的值。
  • 如果缺少下外边距的值,则使用上外边距的值
  • 如果缺少下外边距的值,则使用上外边距的值。

3. 外边距合并:当两个垂直方向(相对于水平方向)的外边距相遇时,它们将合成一个外边距。

合并后的数值:合并前的较大值

 

4. 合并发生在两个同级元素之间,子元素和父元素之间,也可能发生在自身。

详情参考: http://www.w3school.com.cn/css/css_margin_collapsing.asp

 

5. 定位的相关概念

·文档流

·流式布局

·列式布局

·正常流布局

·行框

·行内框、行内元素

·块框、块级元素

·无名框、无名块框

·包含框

 

注意“行框”与“行内框”

参考网址:  http://www.w3school.com.cn/css/css_positioning.asp  其他百度

 

6. 相对定位,clip的属性值以及解释,并计算剪裁后图形的高度

 

7. 浮动的3个案例:水平菜单,表格,简单首页

http://www.w3school.com.cn/css/css_positioning_floating.asp

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

Vux的安装使用

1、Vux的安装 1.1、vue-cli的vux模板生成项目 可以直接使用 vue-cli 的模板生成一个 vux 项目 vue init airyland/vux2 projectName 由此可以直接使用 vux。(或许运行项目可能会报错,那是 vue-cli 初始项目的通病) 1.2、手动安装 vux 首先在项…

Spring Data JPA教程:获取所需的依赖关系

在创建使用Spring Data JPA的应用程序之前,我们需要获取所需的依赖关系。 这篇博客文章标识了必需的组件,并描述了如何使用Maven获得它们。 让我们开始吧。 其他阅读:如果您不熟悉Spring Data JPA,则应该阅读以下博客文章&…

元素属性的添加删除(原生js)

添加属性 odiv.setAttribute("title","hello div!");odiv.setAttribute("class","boxClass");odiv.setAttribute("hello","divTag");//自定义属性设(hello"divTag") 获取属性 var vodiv.getAttribute(&…

framelayout

编写的mail.xml文件: <?xml version"1.0" encoding"utf-8"?><FrameLayout xmlns:android"http://schemas.android.com/apk/res/android" android:id"id/frame" android:layout_width"fill_parent" android:layou…

Git 使用的问题总结

1、git stash pop 显示 xxx already exists, no checkout 当我们先使用 git stash save -u 保存信息说明 来储藏更改&#xff0c;然后拉取代码 git pull&#xff0c;如果你的本地修改有新建文件&#xff0c;远程也有新建文件&#xff0c;并且两者同名&#xff0c;此时应用储藏 …

在OpenShift上托管的WildFly实例上进行Arquillian测试

技术提示&#xff03;54解释了如何为现有Java EE项目启用Arquillian。 在该技巧中&#xff0c;测试是针对本地安装的WildFly服务器运行的。 如果此WildFly实例在OpenShift上运行&#xff0c;那么同一个适配器也可以工作吗&#xff1f; 没有&#xff01; 因为与xlocalhost相比&…

js基础---数组方法

数组数据的排序及去重   sort无形参的排序方式 arr1[2,12,3,15];var aarr1.sort();console.log(arr1);console.log(a);//排序会改变原本数组是顺序&#xff0c;是依据首个字符的大小开始排名sort有形参的排序方式方法1arr2[2,12,3,15];var barr2.sort(function(n1,n2){if(n1&…

扩展Asterisk1.8.7的CLI接口

我之前有一篇文章&#xff08;http://www.cnblogs.com/MikeZhang/archive/2012/04/14/asteriskCLIAppTest20120414.html&#xff09;介绍过如何扩展asterisk的cli接口&#xff0c;本篇是它的继续&#xff0c;总结下&#xff0c;也方便我以后查阅。 大部分情况下&#xff0c;配置…

CSS中的 ',' 、''、'+'、'~'

1、群组选择器&#xff08;,&#xff09; /* 表示既h1&#xff0c;又h2 */ h1, h2 {color: red; } 2、后代选择器&#xff08;空格&#xff09; /* 表示 h1 下面的所有 span 元素&#xff0c;不管是否以 h1 为直接父元素 */ h1 span {} 3、子元素选择器&#xff08;>&#x…

避免不必要的Spring配置组件扫描

我在堆栈溢出中遇到了一个有趣的问题。 Brett Ryan有问题&#xff0c;Spring Security配置被初始化了两次。 当我查看他的代码时&#xff0c;我发现了问题所在。 让我展示显示代码。 他有相当标准的Spring应用程序&#xff08;不使用Spring Boot&#xff09;。 使用基于Spring…

正则表达式 小结

时间&#xff1a;2018年1月21日 18:29:01 用于&#xff1a;此小结是学习正则表达式的总结 正则表达式&#xff08;regular expression&#xff09;小结1. . 表示出断行外任意一个字符   ^行首   $行尾   [] 表示范围 如&#xff1a;[a-z]指a到z范围的一个字符 [\u]表…

js 之for..in、表单及事件触发

<html ><body> <script type"text/javascript">var x;var mycarsnew Array();mycars[0] "saa";mycars[1] "Va";mycars[2] "BMW";for(x in mycars)//x是变量用来指定变量&#xff0c;指定的变量可以是数组元素&…

移动端,fixed bottom问题

//不显示 .bar {position:fixed;bottom:0;z-index:99; }//显示 .bar{position:fixed;bottom:calc(90vh); /*当前屏幕高度百分比90%*/z-index:99; } 转载于:https://www.cnblogs.com/qq917937712/p/11475310.html

js 判断一个字符在字符串中出现的次数

<script type"text/javascript">var sdjh.doiwe.esd.d.ddd0sdd.d.; var n(s.split(.)).length-1; document.write(n);</script> 结果&#xff1a;6 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

Spring Boot微服务的黑匣子测试是如此简单

当我需要进行原型设计&#xff0c;概念验证或在空闲时间使用一些新技术时&#xff0c;开始新项目对于Maven来说总是有点烦人。 不得不说&#xff0c;设置Maven项目并不难&#xff0c;您可以使用Maven原型。 但是原型通常是过时的。 谁想玩旧技术&#xff1f; 因此&#xff0c;我…

sharepoint ECMAScript对象模型系列

转载&#xff1a;Sharepoint学习笔记—ECMAScript对象模型系列-- 8、组与用户操作(一) http://www.cnblogs.com/wsdj-ITtech/archive/2012/06/08/2416967.html 转载于:https://www.cnblogs.com/EricLee007/archive/2012/06/08/2541636.html

c++ static关键字的作用

名称  全局静态变量  局部静态变量   静态函数  类的静态成员类的静态函数形式  全局变量前加static局部变量前加static 函数返回类型前加static类成员前加static类成员函数前加static存储区域 静态存储区 运行期间一直存在 静态存储区 运行期间一直存在 作用域…

单片机第三季-第七课:STM32中断体系

目录 1&#xff0c;NVIC 2&#xff0c;中断和事件的区别 3&#xff0c;优先级的概念 4&#xff0c;如何实际编程使用外部中断 5&#xff0c;STM32开发板通过按键控制LED 5.1&#xff0c;打开相应GPIO模块时钟 5.2&#xff0c;NVIC设置 5.3&#xff0c;外部中断线和配套…

【学亮IT手记】angularJS select2多选下拉框实例

永远保持对大部分知识的好奇心&#xff0c;学习从不枯燥&#xff0c;也没有被逼学习一说&#xff0c;乐此不疲才是该有的心态和境界&#xff01;&#xff01;&#xff01; 引入相关js库&#xff1a; html部分代码&#xff1a; angularJS定义数据源变量&#xff1a; 更多专业前端…

虚拟主机相关业务知识介绍

什么是虚拟主机&#xff1f; 虚拟主机是使用特殊的软硬件技术&#xff0c;把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机&#xff0c;每一台虚拟主机都具有独立的域名&#xff0c;具有完整的Internet服务器&#xff08;WWW、FTP、Email等&#xff09;功能&#xf…