程序博客网 > beyond compare 3 mac

CSS盒模型

来源：互联网 发布：beyond compare 3 mac 编辑：程序博客网 时间：2024/06/05 04:51

一：元素分类

CSS中，html中的标签元素分为三种不同的类型：块状元素、内联元素（又叫行内元素）、内联块状元素

常用的块状元素有：<div>,<p>,<h1>...<h6>,<pl>,<ul>,<table>,<address>,<blockquote>,<from>

常用的内联元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>

常用内联块状元素有：<img>,<input>

二：元素分类—块级元素

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点

  1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
<head>    <meta charset="UTF-8">    <title>内联级块元素</title>    <style>        div,p { color: red; }    </style></head><body><div>Stevin三天三夜的专栏</div><p>搜索公众号:Stevin三天三夜的专栏</p></body>

显示效果：

这里写图片描述

三：元素分类—内联元素

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{     display:inline; }

内联元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<head>    <meta charset="UTF-8">    <title>内联元素</title>    <style>        p,a,span {            background-color: red;        }    </style></head><body><p>搜索公众号:Stevin三天三夜</p><a href="http:www.baidu.com">点击跳转百度</a><span>Hello World</span></body>

显示效果：

这里写图片描述

四：元素分类—内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。内联块状元素inline-block 元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

<head>    <meta charset="UTF-8">    <title>内联块状元素</title>    <style>        a{            background-color: red;            text-align: center;            width: 100000px;            /*为 a 元素设置了宽，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。*/        }    </style></head><body><a>百度搜索:</a><a>Stevin</a><a>三天三夜</a><a>专栏</a></body>

显示效果：

这里写图片描述

五：盒模型

这里写图片描述
这里写图片描述

六：盒模型—边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

<head>    <meta charset="UTF-8">    <title>盒模型</title>    <style>        p {            border: 2px solid red;            /*等效:             border-width:2px;             border-style:solid;             border-color:red;            */        }    </style></head><body><p>    美联储此次加息在市场预料之中。美联储在14日结束货币政策例会后发表的声明中称，5月以来的信息显示美国就业市场继续强劲，失业率降到16年来的最低水平，工资缓慢上涨，近几个月家庭消费回升，企业固定资产投资继续扩张。上海社会科学院世界经济研究所研究员徐明棋表示，尽管并不十分令人满意，但总体而言，美国经济在持续温和增长，有必要将利率水平往正常水平提升。</p>

显示效果：

这里写图片描述
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（不是很常用），最常还是用象素（px）。

六：盒模型—边框（二）

设置指定方向的下划线

<head>    <meta charset="UTF-8">    <title>盒模型</title>    <style>        p {            border-bottom: 2px solid red;            /*等效:             border-width:2px;             border-style:solid;             border-color:red;            */        }    </style></head><body><p>美联储此次加息在市场预料之中。</p><p>美联储在14日结束货币政策例会后发表的声明中称，5月以来的信息显示美国就业市场继续强劲，失业率降到16年来的最低水平，工资缓慢上涨，</p><p>近几个月家庭消费回升，企业固定资产投资继续扩张。上海社会科学院世界经济研究所研究员徐明棋表示，尽管并不十分令人满意，但总体而言，美国经济在持续温和增长，有必要将利率水平往正常水平提升。</p></body>

显示效果：

这里写图片描述

七：盒模型—宽度和高度

盒模型宽度和高度和平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。高度同理。

这里写图片描述

<head>    <meta charset="UTF-8">    <title>高度和宽度</title>    <style>        li {            background-color: aqua;            border-bottom: 2px solid red;            width: 300px;            height: 50px;        }    </style></head><body><ui>    <li>彩电</li>    <li>冰箱</li>    <li>洗衣机</li></ui></body>

显示效果：

这里写图片描述

八：盒模型—填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}
<head>    <meta charset="UTF-8">    <title>高度和宽度</title>    <style>        #box {            width: 150px;            border: 2px solid red;            padding: 30px;        }    </style></head><body><div id="box">盒感觉都泛海国际款到发货国际快递法国红酒肯定过好的晶块搞活动覆盖即可都是子</div></body>

显示效果：

这里写图片描述

九：盒模型—边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

总结：padding和margin的区别：padding在边框里，margin在边框外。

<head>    <meta charset="UTF-8">    <title>高度和宽度</title>    <style>        div {            width: 150px;            height: 150px;            border: 2px solid red;        }        #box1 {            margin-bottom: 10px;        }    </style></head><body><div id="box1">盒感觉都泛海国际款到发货国际快递法国红酒肯定过好的晶块搞活动覆盖即可都是子</div><div id="box2">各环节的看法和股东会更健康符合国际法韩国进口国和对方即可好几个款到发货刚开发的好高科技的复合弓</div></body>

显示效果：

这里写图片描述

十：盒模型代码简写

盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

阅读全文
0 0
beyond compare 3 mac beyond compare 3 mac
原创粉丝点击
热门IT博客
裤子 知乎裤子 知乎
mac地址 冲突mac地址 冲突
怎么软件赚钱最快
淘宝每天访客多少正常
故宫的记忆 知乎
python导出docker镜像
电子商务与云计算
如何解除冻结淘宝封号
淘宝上日本直邮靠谱吗
元胞数组
mac版qq不能远程协助
听说科技人机对话软件
怎样做文明网络小公民
麒麟天下数据服务
linux golang 1.8
sql union 去重复
企业怎样做网络推广
书籍制作的淘宝店
两个单片机远程通信
淘宝app流程图
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 优鱼 鱿鱼怎么做 鱿鱼怎么烤 生鱿鱼的做法 鱿鱼的切法图解 鱿鱼干的做法大全家常 尤鱼做菜 鱿鱼和什么炒好吃 鱿鱼的营养价值 鱿鱼的做法大全家常 游鱼的做法 甲鱼怎么做好吃 小鱿鱼的做法大全 怎么烧鱿鱼 鱿鱼的家常做法 鱿鱼怎么烧 鱿鱼怎么炒 鱿鱼营养 鱿鱼怎么切 鱿鱼营养成分 怎么做鱿鱼 怎么炒鱿鱼 鱿鱼炒什么 生鱿鱼怎么做好吃 鱿鱼的切法 火爆鱿鱼的做法 尧 尧怎么读 尧建云 尧三青作品 尧舜禹 老王张欣尧舞蹈battle 尧读音 皇叔水尧儿txt 唐继尧 张欣尧 尧三青 国手圣医唐尧 沈尧冰霍泽琛 尧山风景区 尧城机场

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里