CSS----盒子模型与浮动
盒模型(框模型)
页面上任何一个元素我们都可以看成是一个盒子,盒子会占用一定的空间和位置他们之间相互制约,就形成了网页的布局
w3c的盒模型的构成:content border padding margin
padding:内边距(内部填充距) padding-right:50px/10%;
padding-left:50px/10%;
padding-top:50px/10%;
padding-bottom:50px/10%; 缩写:
padding: 上 右 下 左;----从十二点钟方向开始,顺时针
padding: 50px;表示四个方向的值都设置成50px
padding: (上下) (左右);表示上下的值一样,左右的值一样
padding: 上 (左右) 下; margin:外边距,元素与元素之间的距离 margin-right:50px/10%;
margin-left:50px/10%;
margin-top:50px/10%;
margin-bottom:50px/10%; 缩写:
margin: 上 右 下 左;----从十二点钟方向开始,顺时针
margin: 50px;表示四个方向的值都设置成50px
margin: (上下) (左右);表示上下的值一样,左右的值一样
margin: 上 (左右) 下; 如果让一个容器水平方向居中:margin: px/% auto; margin值在垂直方向会有重叠的现象,在取值的时候取较大值
九 浮动
文档流:正常的文档流是块级元素从上到下,行内元素从左到右的顺序展示
给一个元素赋值浮动后,该元素就会脱离正常的文档流进行左右浮动,直到它本身的外边缘碰到包含框或另一个浮动框的左右
float:left/right;
left---向左浮动
right---向右浮动
加了浮动过后的元素会导致父元素高度陷塌,由加了浮动过后的元素导致的,脱离了正常文档流
如果将多个同辈元素设置成向右浮动过后,会让这些元素倒着排序
解决父元素高度陷塌的方法:
1 设置父元素的高度
2 清除浮动
浮动的作用:可以让块级元素同行显示
CSS----盒子模型与浮动的更多相关文章
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- CSS盒子模型(boeder)+浮动(float)+定位(position)
盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 = 内容的宽(wid ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
随机推荐
- Dom4j解析、生成Xml
1以下代码未Xml的解析和生成代码 <?xml version="1.0" encoding="UTF-8"?> <users> < ...
- MVC字符串转json,ajax接受json返回值
#region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...
- 事件驱动架构 (Event-Driven Architecture,EDA) 简介
EDA 是一种侧重于以生成/消费为基础的异步通信的架构模式.这主要对照于传统的基于线程的同步系统. EDA 是一种以事件 (event)为核心,提供事件产生,路由,消费已经结果回调等机制的架构模式. ...
- android开发 RecyclerView 列表布局
创建一个一行的自定义布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...
- Eclipse properties.config.yml 配置文件中文编码问题。Eclipse 配置文件插件解决方案
写了中文默认转成unicode. 正常应该是这样子的 其实不是什么大问题只需要装一个插件就行了,插件有很多.推荐使用,Properties Editor 安装方式如下 .这里使用的是离线安装.即本地文 ...
- Ruby学习笔记2 : 一个简单的Ruby网站,搭建ruby环境
Ruby on Rails website 的基础是 请求-返回 循环. 首先是浏览器请求服务器, 第二步,Second, in our Rails application, the route ta ...
- 【4-1】js函数、事件、补充知识
一.函数操作 (一)字符串操作: (1)变量名.toLowerCase():--转小写 toUpperCase():----转大写 (2)变量名.substring(索引,截取到位数);--- ...
- linux-2.6.22.6 内核源代码包的文件目录介绍
下载一个linux-2.6.22.6.tar并解压 再其解压的文件中加入下面的bat脚本 生成当前文件的目录树脚本如下: @rem 此BAT文件名一定不能是"tree.bat",否 ...
- linux 源码编译php的参数
./configure --prefix=/usr/local/php-5.3.5 --with-config-file-path=/usr/local/php-5.3.5/etc --with-co ...
- jsfl 导出指定名称的swf
var _openDOC = fl.openDocument("file:///E|TE/dt.fla"); var _exName = _openDOC.pathURI.spli ...