css 盒模型相关样式
话不多说，一切还是从最基础的说起。
盒的类型
1.盒的基本类型
在css中，用display定义盒的类型，一般分为block类型与inline类型。
例如div属于block类型，span属于inline类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: yellow;
}
span
{
background-color: #000099;
}
</style>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<span>我也是span</span>
</body>
</html>
通过运行这段代码，我们可以清楚的可以看到block类型的宽度占满整个浏览器，而inline元素的宽度等于其内容的宽度
每一行只允许容纳一个block元素，但是可以容纳多个inline元素。
下来我们可以通过display属性把div改成block类型，把span改成inline属性，看下其运行效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: yellow;
display: inline;
}
span
{
background-color: #000099;
display: block;
}
</style>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<span>我也是span</span>
</body>
</html>
2.inline-block类型
inline-block属于block盒的一种，把元素的display属性设置成inline-block,其显示和设置
成inline一样，但是元素的width、height属性只能作用于block元素上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: yellow;
display:inline-block;
width: 100px;
height: 100px;
} </style>
</head>
<body>
<div>我是div</div>
<div>我是div2</div>
</body>
</html>
3.inline-table类型
先看下列子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table
{
width: 200px;
border: solid 1px red;
display: inline-table;
vertical-align: bottom;
}
td{
border: solid 1px red;
}
</style>
</head>
<body bo>
大家好
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
大家好
</body>
</html>
table属于block类型，要想文字和table同行显示，需要把table的display属性设置成inline-table，但是各个浏览器
对于文字和表格的对齐方式有所差别，一般情况下要设置其对齐方式。
4.list-item类型
可以将多个元素当做列表来显示，并在其前加上列表标记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: list-item;
list-style-type: decimal;
margin-left: 30px;
}
</style>
</head>
<body bo>
<div>list1</div>
<div>list2</div>
<div>list3</div>
<div>list4</div>
<div>list5</div>
</body>
</html>
5.none类型
把元素设置成none类型，该元素将不会被显示。
6.overflow属性
overflow属于用于对盒中内容显示不下时显示方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
border: solid 1px red;
overflow: hidden;
}
#div2{
margin-top: 10px;
width: 100px;
height: 100px;
border: solid 1px green;
overflow: scroll;
}
</style>
</head>
<body>
<div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>
</html>
同时还有overflow-x,overflow-y两个属性，可以单独给水平或者垂直方向超出盒范围的内容的显示
显示方式进行设置。
7.box-sizing属性
box-sizing属性是css3中新增的盒模型属性。
在css中使用width和height可以设置元素的宽度和高度，但是可以使用box-siziing属性，可以指定
用width与height属性设置的宽度与高度是否包含元素内部的补白区域，以及边框的宽度和高度。
box-sizing属性值为content-box,及border-box。content-box表示元素的宽度与高度不包括内部的补白区域
及边框的宽度高度，border-box表示元素的宽度与高度包括内部补白区域及边框的宽度及高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid 30px red;
padding:30px ; }
div#div1{ box-sizing: content-box;
-webkit-box-sizing: content-box;
}
div#div2{ box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>
</html>
css 盒模型相关样式的更多相关文章
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- CSS盒模型和文本溢出
CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- 4、css盒模型和文本溢出
4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...
- 详解CSS盒模型
原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...
- 详解CSS盒模型（转）
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- 【CSS】309- 复习 CSS盒模型
点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
随机推荐
- poj3259
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 24864 Accepted: 8869 Descri ...
- iOS 中的UIWindow
使用Xcode新建一个工程后,Xcode会自动新建一些文件,其中有AppDelegate.h,AppDelegate.m,ViewController.h,ViewController.m,Main. ...
- Angularjs 整体框架结构
//angulajs整体代码框架结构/** * @license AngularJS v1.2.6 * (c) 2010-2014 Google, Inc. http://angularjs.org ...
- 利用 SQL Monitor 查看语句运行状态步骤
利用 SQL Monitor 查看语句运行状态步骤 1.确定语句被 SQL Monitor 监控 SQL> SELECT * FROM GV$SQL_MONITOR WHERE sql_id=' ...
- Mysql中关于 group_concat函数详解
group_concat()主要功能:能将相同的行组合起来 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Sepa ...
- java web，生成验证码图片的技术
偶然知道原来有些网站的验证码图片都是随机生成的,后来听人讲了一下,就做了这个小例子 生成图片,绘制背景,数字,干扰线用到了java.awt包,主要使用BufferedImage来生成图片,然后使用Gr ...
- Oracle新建用户、角色，授权，建表空间
oracle数据库的权限系统分为系统权限与对象权限.系统权限( database system privilege )可以让用户执行特定的命令集.例如,create table权限允许用户创建表,gr ...
- 教你50招提升ASP.NET性能（二十四）：ORM小窍门
ORM TipsORM小窍门 More and more people are using Object to Relational Mapping (ORM) tools to jump the d ...
- 【转】Android真机抓屏- Android Screen Monitor
http://www.cnblogs.com/xiaofeixiang/p/4086092.html 一般运行Android应用程序有两种方式一种是设置Android虚拟设备模拟器,通过Android ...
- LeetCode: Word Break II [140]
[题目] Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where ...