css08盒子模型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外边距和内边距</title>
<style type="text/css">
div{
border: dashed 2px red; /*边框的样式*/
width: 500px; /*宽度*/
/* margin-left: 100px; /!*左外边距*!/
margin-top: 100px; /!*上外边距*!/*/
margin:30px; /*上 右 下 左 顺时针顺序*/
margin:30px 50px; /*上下 30PX 左右 50PX*/ padding: 30px; /*上 右 下 左 顺时针顺序 内边距*/
}
</style>
</head>
<body>
<div><img src="data:image/cat.jpg" height="200"></div>
<div><img src="data:image/cat.jpg" height="200"></div>
</body>
</html>
实现会员登陆的效果 创建一个html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
*{ /*整个网页中的所有元素 去掉内边距和外边距*/
padding: 0px;
margin: 0px;
}
div{
width: 300px;
border: solid 1px #3a6587; /*盒子的边框样式*/
margin: auto; /*水平居中*/
}
h2{
padding-left: 20px; /*左内边距*/
line-height: 50px; /*行高*/
height: 50px; /*高度*/
color: white; /*字体颜色*/
background-color:cornflowerblue ; /*背景颜色*/
}
form{
padding: 30px 20px; /*上下边距30px 左右边距20px*/
}
td{
text-align: right; /*文本对齐方式*/
}
</style>
</head>
<body>
<div>
<h2>会员登录</h2>
<form action="" method="post">
<table>
<tr>
<td>姓名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>联系电话:</td>
<td><input type="text"></td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><input type="submit" value="登录"></td>
</tr>
</table>
</form>
</div> </body>
</html>
效果图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
/*
border-style: 边框类型
border-color: 边框颜色
border-width: 边框粗细
设置的时候：都是按照 上右下左的顺序依次赋值！
*/
*{ /*给页面中所有的元素清空内外边距*/
margin: 0px;
padding: 0px;
}
#box{
width: 300px; /*整个盒子的宽度*/
border: 1px solid red; /*盒子的边框*/
margin: 0px auto; /*盒子相对于浏览器 水平居中*/
/*网页中水平居中的必要条件
01.是块元素
02.固定的宽度？？？？ span是根据内容来自动调整宽度！！*/
} div:nth-of-type(1) input{
border: 1px solid red; /*1px红色的实线*/
}
div:nth-of-type(2) input{
border: 1px dashed blue; /*1px蓝色的虚线*/
}
div:nth-of-type(3) input{
border: 1px dotted deeppink; /*1px深粉色的点实线*/
} h2{
height: 35px; /*h2的高度*/
line-height: 35px; /*行高*/
background: #3A6587;
color: #F8F8F3;
padding-left:20px ;
} form{
background: #C8ECE3;
} </style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#" method="post">
<div>
姓名：<input type="text">
</div>
<div>
邮箱：<input type="text">
</div>
<div>
电话：<input type="text">
</div>
</form>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
#box{
width: 120px;
height:120px;
padding: 5px;
margin: 10px;
border: 1px solid red;
box-sizing: border-box;
}
#f{
width: 50px;
height:50px;
border: 1px solid blue;
/*box-sizing: border-box;盒子的高度和宽度就是内容元素的高度和宽度*/
/*box-sizing: content-box;默认值，盒子的总尺寸*/
box-sizing: inherit;/* 继承父类的盒子尺寸类型*/
} </style>
</head>
<body>
<div id="box">
<div id="f"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>圆角属性</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* border-radius:5px;四个角都是相同的弧度*/
/* border-radius:5px 10px 15px 20px; 左上 --》左下 顺时针顺序*/
border-radius:5px 20px; /*左上和右下 都是5px 右上和左下都是20px*/
}
</style>
</head>
<body>
<div></div></body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置半圆</title>
<style type="text/css">
div{
background: orange;
margin: 20px;
}
div:nth-of-type(1){
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0; /*左上和右上*/
} div:nth-of-type(2){
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;/*左下和右下*/
} div:nth-of-type(3){
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;/*左上和左下*/
}
div:nth-of-type(4){
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;/*右上和右下*/
} </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置扇形和圆形</title>
<style type="text/css">
div{
background: orange;
margin: 20px;
}
div:nth-of-type(1){
width: 50px;
height: 50px;
border-radius: 50px 0 0 0; /*左上*/
} div:nth-of-type(2){
width: 50px;
height: 50px;
border-radius: 0 50px 0 0; /*右上*/
} div:nth-of-type(3){
width: 50px;
height: 50px;
border-radius: 0 0 50px 0; /*右下*/
} div:nth-of-type(4){
width: 50px;
height: 50px;
border-radius: 0 0 0 50px; /*左下*/
} div:nth-of-type(4){
width: 50px;
height: 50px;
border-radius:50px; /*设置所有 圆形*/
} </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
div{
height: 100px;
width: 100px;
border: 1px solid red;
border-radius: 10px;
box-shadow:10px 10px 10px orange;/*外阴影*/
/* box-shadow:inset 10px 10px 10px orange;内阴影*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css08盒子模型的更多相关文章
- 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- JS学习：第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
- html学习第三天—— 第11章 盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- 盒子模型(W3C盒子模型、IE盒子模型)
盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...
随机推荐
- c#利用WebClient和WebRequest获取网页源代码
C#中一般是可以利用WebClient类和WebRequest类获取网页源代码.下面分别说明这两种方法的实现. WebClient类获取网页源代码 WebClient类 WebClient ...
- asp.net使用Mysql乱码处理
在asp.net与mysql数据库打交道的时候,由于配置的问题,会遇到自己写的方法在读取数据库中数据的时候,英文,数字可以正常通过,但是中文就无法通过,以登录为例(方法略),当输入英文用户名的时候可以 ...
- 纯js制作遮罩层对话框 -- g皓皓
//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- Win7 64位 php-5.5.13+Apache 2.4.9+mysql-5.6.19 配置
一 :准备阶段 1:php php-5.5.13下载链接:http://windows.php.net/downloads/releases/php-5.5.13-Win32-VC11-x64.zip ...
- php中的双引号和单引号的区别？
1.单引号里面的字符串直接全部转义,原样输出(即:单引号内部的变量不会被执行) 2.双引号里面的变量会被替换(即:变量会执行) 例如:$name = 'hello';echo "the $n ...
- 周赛D题
D - D Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description ...
- 图示Servelet请求过程
静态文件的请求处理过程: 客户端浏览器向WebServer发送一个HTTP请求,WebServer解析HTTP请求,然后找到对应的静态文件,读取文件的内容,然后返回给客户端浏览器HTML文本,浏览器解 ...
- xilinx FPGA普通IO作PLL时钟输入
本帖转自于 :http://www.cnblogs.com/jamesnt/p/3535073.html 在xilinx ZC7020的片子上做的实验; [结论] 普通IO不能直接作PLL的时钟输入, ...
- 一个关于多线程和DbHelper的问题
我的初衷是这样的:在多线程环境下,每个数据库编号对应一个DbHelper对象. 下面是代码,不知道这样写有什么问题. namespace TestDAL { public class DB { pri ...
- COJN 0585 800604鸡蛋的硬度
800604鸡蛋的硬度 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 最近XX公司举办了一个奇怪的比赛:鸡蛋硬度之王争霸赛.参 ...